From 81ae913be1035a9eb7ab7014c5a8c06abb0d5b62 Mon Sep 17 00:00:00 2001
From: David Ralph <ohlookitsderpy@protonmail.com>
Date: Fri, 16 Apr 2021 18:43:23 +0100
Subject: [PATCH] feat: new changelog tab

---
 .../modals/main/scss/marketplace/_main.scss   |  2 +-
 .../modals/main/scss/settings/_main.scss      | 14 +++++
 .../modals/main/settings/sections/About.jsx   |  5 +-
 .../main/settings/sections/Changelog.jsx      | 63 +++++++++++--------
 src/modules/constants.js                      |  3 +-
 src/modules/default_settings.json             |  2 +-
 6 files changed, 56 insertions(+), 33 deletions(-)

diff --git a/src/components/modals/main/scss/marketplace/_main.scss b/src/components/modals/main/scss/marketplace/_main.scss
index 0f5cb941..bcac0b1d 100644
--- a/src/components/modals/main/scss/marketplace/_main.scss
+++ b/src/components/modals/main/scss/marketplace/_main.scss
@@ -155,7 +155,7 @@ p.description {
   background: #2d3436;
 }
 
-#item>img {
+#item>img, .updateimage, .updatechangelog>p>img {
   border-radius: 24px;
   height: 200px;
   width: auto;
diff --git a/src/components/modals/main/scss/settings/_main.scss b/src/components/modals/main/scss/settings/_main.scss
index 59c7ed70..ddd6062b 100644
--- a/src/components/modals/main/scss/settings/_main.scss
+++ b/src/components/modals/main/scss/settings/_main.scss
@@ -161,3 +161,17 @@ input[type=color]::-moz-color-swatch {
   color: var(--modal-text) !important;
   cursor: move;
 }
+
+.updatechangelog {
+  li {
+    cursor: initial;
+    font-size: 1rem;
+    list-style-type:disc;
+    padding: 0;
+    margin-left: 20px;
+  }
+}
+
+.aboutLink {
+  color: var(--modal-text) !important;
+}
\ No newline at end of file
diff --git a/src/components/modals/main/settings/sections/About.jsx b/src/components/modals/main/settings/sections/About.jsx
index 6fc03988..55c0f73b 100644
--- a/src/components/modals/main/settings/sections/About.jsx
+++ b/src/components/modals/main/settings/sections/About.jsx
@@ -78,10 +78,7 @@ export default class About extends React.PureComponent {
         <a href='https://discord.gg/zv8C9F8' className='welcomeLink' target='_blank' rel='noopener noreferrer'><ForumIcon/></a>
 
         <h3>{this.language.support_mue}</h3>
-        <p><a href='https://github.com/sponsors/davidjcralph' className='welcomeLink' target='_blank' rel='noopener noreferrer'>GitHub Sponsors</a> 
-          • <a href='https://ko-fi.com/davidjcralph' className='welcomeLink' target='_blank' rel='noopener noreferrer'>Ko-Fi</a> 
-          • <a href='https://patreon.com/davidjcralph' className='welcomeLink' target='_blank' rel='noopener noreferrer'>Patreon</a>
-        </p>
+        <p><a href='https://github.com/sponsors/davidjcralph' className='aboutLink' target='_blank' rel='noopener noreferrer'>GitHub Sponsors</a> • <a href='https://ko-fi.com/davidjcralph' className='aboutLink' target='_blank' rel='noopener noreferrer'>Ko-Fi</a> • <a href='https://patreon.com/davidjcralph' className='aboutLink' target='_blank' rel='noopener noreferrer'>Patreon</a></p>
 
         <h3>{this.language.resources_used.title}</h3>
         <p>Pexels ({this.language.resources_used.bg_images})</p>
diff --git a/src/components/modals/main/settings/sections/Changelog.jsx b/src/components/modals/main/settings/sections/Changelog.jsx
index 19e28b8f..1d4b9965 100644
--- a/src/components/modals/main/settings/sections/Changelog.jsx
+++ b/src/components/modals/main/settings/sections/Changelog.jsx
@@ -1,56 +1,67 @@
 import React from 'react';
 
+import WifiOffIcon from '@material-ui/icons/WifiOff';
+
 export default class Changelog extends React.PureComponent {
   constructor() {
     super();
     this.state = {
-      title: window.language.modals.update.title,
-      date: null,
-      content: window.language.modals.update.title,
-      html: window.language.modals.main.loading,
-      image: null
+      title: null
     };
     this.language = window.language.modals.update;
   }
 
   async getUpdate() {
-    const data = await (await fetch(window.constants.API_URL + '/getUpdate')).json();
-  
-    if (data.statusCode === 500 || data.title === null) {
-      const supportText = `<br/><p>${this.language.contact_support}: <a target='_blank' class='modalLink' style='padding-left: 0px' href='https://muetab.com/contact'>https://muetab.com/contact</a></p>`;
-      return this.setState({
-        title: this.language.error.title,
-        html: this.language.error.description + supportText
-      });
-    }
-  
+    const data = await (await fetch(window.constants.BLOG_POST + '/index.json')).json();
+
     this.setState({
       title: data.title,
-      date: data.published,
-      image: data.image || null,
-      author: data.author,
-      html: data.content
+      date: data.date.split(' ')[0],
+      image: data.featured_image || null,
+      author: 'By ' + data.author,
+      html: data.html
     });
    }
   
    componentDidMount() {
     if (localStorage.getItem('offlineMode') === 'true') {
-      return this.setState({
-        title: this.language.offline.title,
-        html: this.language.offline.description
-      });
+      return;
     }
   
     this.getUpdate();
    }
 
   render() {
+    const errorMessage = (msg) => {
+      return (
+        <div className='emptyitems'>
+          <div className='emptyMessage'>
+            {msg}
+          </div>
+        </div>
+      );
+    };
+
+    if (navigator.onLine === false || localStorage.getItem('offlineMode') === 'true') {
+      const language = window.language.modals.main.marketplace;
+    
+      return errorMessage(<>
+        <WifiOffIcon/>
+        <h1>{language.offline.title}</h1>
+        <p className='description'>{language.offline.description}</p>
+      </>);
+    }
+  
+    if (!this.state.title) {
+      return errorMessage(<h1>{window.language.modals.main.loading}</h1>);
+    }
+
     return (
       <>
         <h1 style={{ 'marginBottom': '-10px' }}>{this.state.title}</h1>
-        <h5 style={{ 'lineHeight': '0px' }}>{this.state.date}</h5>
-        {this.state.image ? <img draggable='false' src={this.state.image} alt={window.language.modals.update.title}/> : null}
-        <p dangerouslySetInnerHTML={{ __html: this.state.html }}></p>
+        <h5 style={{ 'lineHeight': '0px' }}>{this.state.author} • {this.state.date}</h5>
+        {this.state.image ? <img draggable='false' src={this.state.image} alt={window.language.modals.update.title} className='updateimage'/> : null}
+        <div className='updatechangelog' dangerouslySetInnerHTML={{ __html: this.state.html }}/>
       </>
     );
   }
diff --git a/src/modules/constants.js b/src/modules/constants.js
index e7632142..362a9f74 100644
--- a/src/modules/constants.js
+++ b/src/modules/constants.js
@@ -5,8 +5,9 @@ export const WEATHER_URL = 'https://mueweather.ohlookitsderpy.workers.dev';
 export const WEBSITE_URL = 'https://muetab.com';
 export const SPONSORS_URL = 'https://sponsors.muetab.com';
 export const GITHUB_URL = 'https://api.github.com';
+export const BLOG_POST = 'https://blog.muetab.com/posts/mue-marketplace';
 export const FEEDBACK_FORM = 'https://api.formcake.com/api/form/349b56cb-7e2b-4004-b32b-e8964d217dd1/submission';
 export const DDG_PROXY = 'https://external-content.duckduckgo.com/iu/?u=';
 export const OFFLINE_IMAGES = 20;
 export const BETA_VERSION = false;
-export const VERSION = '5.0'; 
\ No newline at end of file
+export const VERSION = '5.0'; 
diff --git a/src/modules/default_settings.json b/src/modules/default_settings.json
index bede5a60..405da0d8 100644
--- a/src/modules/default_settings.json
+++ b/src/modules/default_settings.json
@@ -25,7 +25,7 @@
   },
   {
     "name": "brightness",
-    "value": 100
+    "value": 90
   },
   {
     "name": "events",