diff --git a/.editorconfig b/.editorconfig new file mode 100644 index 00000000..3274ec36 --- /dev/null +++ b/.editorconfig @@ -0,0 +1,8 @@ +root = true + +[*] +indent_style = space +indent_size = 2 +charset = utf-8 +trim_trailing_whitespace = true +insert_final_newline = true \ No newline at end of file diff --git a/.env b/.env deleted file mode 100644 index 7db6011f..00000000 --- a/.env +++ /dev/null @@ -1,2 +0,0 @@ -GENERATE_SOURCEMAP=false -INLINE_RUNTIME_CHUNK=false \ No newline at end of file diff --git a/.eslintrc.js b/.eslintrc.js new file mode 100644 index 00000000..7dfe405d --- /dev/null +++ b/.eslintrc.js @@ -0,0 +1,4 @@ +module.exports = { + extends: 'react-app', + parser: '@babel/eslint-parser' +} \ No newline at end of file diff --git a/.github/FUNDING.yml b/.github/FUNDING.yml deleted file mode 100644 index ad97a13e..00000000 --- a/.github/FUNDING.yml +++ /dev/null @@ -1,3 +0,0 @@ -github: ohlookitsderpy -patreon: ohlookitsderpy -ko_fi: ohlookitsderpy diff --git a/.github/ISSUE_TEMPLATE/feature-request.md b/.github/ISSUE_TEMPLATE/feature-request.md deleted file mode 100644 index 39e93351..00000000 --- a/.github/ISSUE_TEMPLATE/feature-request.md +++ /dev/null @@ -1,14 +0,0 @@ ---- -name: Feature Request -about: Suggest an idea for Mue -title: "[Feature Request]" -labels: enhancement -assignees: '' - ---- - -**Description** -A clear and concise description of what you want in this new feature. - -**Additional context** -Add any other context or screenshots about the feature request here. diff --git a/.gitignore b/.gitignore index 88927bbd..7fb56cff 100644 --- a/.gitignore +++ b/.gitignore @@ -6,4 +6,6 @@ build/ # Files package-lock.json yarn-error.log -yarn.lock \ No newline at end of file +.eslintcache +stats.json +yarn.lock diff --git a/CODE_OF_CONDUCT.md b/CODE_OF_CONDUCT.md deleted file mode 100644 index 7f1074c7..00000000 --- a/CODE_OF_CONDUCT.md +++ /dev/null @@ -1,76 +0,0 @@ -# Contributor Covenant Code of Conduct - -## Our Pledge - -In the interest of fostering an open and welcoming environment, we as -contributors and maintainers pledge to making participation in our project and -our community a harassment-free experience for everyone, regardless of age, body -size, disability, ethnicity, sex characteristics, gender identity and expression, -level of experience, education, socio-economic status, nationality, personal -appearance, race, religion, or sexual identity and orientation. - -## Our Standards - -Examples of behavior that contributes to creating a positive environment -include: - -* Using welcoming and inclusive language -* Being respectful of differing viewpoints and experiences -* Gracefully accepting constructive criticism -* Focusing on what is best for the community -* Showing empathy towards other community members - -Examples of unacceptable behavior by participants include: - -* The use of sexualized language or imagery and unwelcome sexual attention or - advances -* Trolling, insulting/derogatory comments, and personal or political attacks -* Public or private harassment -* Publishing others' private information, such as a physical or electronic - address, without explicit permission -* Other conduct which could reasonably be considered inappropriate in a - professional setting - -## Our Responsibilities - -Project maintainers are responsible for clarifying the standards of acceptable -behavior and are expected to take appropriate and fair corrective action in -response to any instances of unacceptable behavior. - -Project maintainers have the right and responsibility to remove, edit, or -reject comments, commits, code, wiki edits, issues, and other contributions -that are not aligned to this Code of Conduct, or to ban temporarily or -permanently any contributor for other behaviors that they deem inappropriate, -threatening, offensive, or harmful. - -## Scope - -This Code of Conduct applies both within project spaces and in public spaces -when an individual is representing the project or its community. Examples of -representing a project or community include using an official project e-mail -address, posting via an official social media account, or acting as an appointed -representative at an online or offline event. Representation of a project may be -further defined and clarified by project maintainers. - -## Enforcement - -Instances of abusive, harassing, or otherwise unacceptable behavior may be -reported by contacting the project team at hello@muetab.com. All -complaints will be reviewed and investigated and will result in a response that -is deemed necessary and appropriate to the circumstances. The project team is -obligated to maintain confidentiality with regard to the reporter of an incident. -Further details of specific enforcement policies may be posted separately. - -Project maintainers who do not follow or enforce the Code of Conduct in good -faith may face temporary or permanent repercussions as determined by other -members of the project's leadership. - -## Attribution - -This Code of Conduct is adapted from the [Contributor Covenant][homepage], version 1.4, -available at https://www.contributor-covenant.org/version/1/4/code-of-conduct.html - -[homepage]: https://www.contributor-covenant.org - -For answers to common questions about this code of conduct, see -https://www.contributor-covenant.org/faq diff --git a/CONTRIBUTING.md b/CONTRIBUTING.md deleted file mode 100644 index 4cd0530d..00000000 --- a/CONTRIBUTING.md +++ /dev/null @@ -1,37 +0,0 @@ -# Contributing -All contributions are welcome! However, there are some things you need to take note of before starting your contribution to the Mue project. - -By contributing to Mue, you agree that: -* None of the work submitted is plagiarised -* Your contribution will be distributed under the [BSD-3-Clause License](LICENSE) after it has been merged or implemented otherwise. - -## General -Test *everything*. That's right - make sure every feature still works depending on the change you just implemented. If it's a translation, check if all strings are translated. -A bug fix? See if it has fixed the issue fully on both Chromium and Firefox. For features, make sure that everything else still works fine and is compatible with what you -implemented. - -### Translations -Please don't use Google Translate. When submitting new translations, we'd prefer it if you waited until it's finished before pull requesting or if you opened it as a draft. - -## Development -### Code -Here's some quick bullet points as to what your code should be like on Mue: -* Follow the general codestyle of the project (unless you can make it more optimised) -* Fix any React or JS errors/warnings created -* Use as few external dependencies as possible - -### Features -We prefer it if you implement features from our [projects board](https://github.com/mue/mue/projects). However, if you have an idea feel free to let us know first via a GitHub -issue or our Discord server (see README for invite). Here's a quick list of things to look out for: -* External APIs - Please refrain from requesting to servers not on the ``muetab.com``, ``derpyenterprises.org`` or ``duckduckgo.com`` domains. Whenever possible, try to create -a "proxy" API service for requests to go through. Pull requests involving paid APIs or heavily limited free plans will be denied. -* Clones - Please don't go blatantly copying features from the alternative extensions out there unless you have written permission from the original author of the project. -Inspired features are fine. -* Removed Features - If a feature has been removed by us don't add it back again without asking us about it first for the reasons as to why it was removed in the first place. - -### Bug Fixes -See the note in general. - - -## Final Note -Contact us before doing anything if you don't want to have to change 1000 things and/or have your pull request closed. diff --git a/README.md b/README.md index 9e8fd442..b2aafbb0 100644 --- a/README.md +++ b/README.md @@ -12,27 +12,27 @@ Mue is a fast, open and free-to-use browser extension that gives a new, fresh an
## WARNING -All development has moved to the 5.0-dev branch, the information below is outdated and for the 4.2.1 version currently on stores. +This is the branch for 5.0, the next version of Mue. For the stable version currently on stores, see the main branch. ## Table of contents * [Screenshot](#screenshot) * [Features](#features) -* [Planned Features](#planned-features) + * [Planned Features](#planned-features) * [Installation](#installation) * [Chrome](#chrome) * [Firefox](#firefox) - * [Chromium](#edge-chromium) - * [Opera/Other](#operaother) + * [Edge Chromium](#edge-chromium) + * [Naver](#naver) + * [Other](#other) * [Contributing](#development) * [Requirements](#requirements) * [Starting](#starting) * [Building](#building) * [Credits](#credits) - * [Maintainers](#maintainers) - * [Contributors](#contributors) - * [Translators](#translators) - * [Other](#other) - + * [Developers](#developers) + * [Translators](#translators) + * [Contributors](#contributors) + * [Resources](#resources) ## Screenshot ![Screenshot](assets/screenshot.jpg) @@ -64,24 +64,25 @@ Please see our [roadmap](https://github.com/mue/mue/projects) ### Edge (Chromium) ~~[Microsoft Edge Addons](https://microsoftedge.microsoft.com/addons/detail/aepnglgjfokepefimhbnibfjekidhmja)~~ Currently outdated, please use the Chrome Web Store version -### Opera/Other +### Naver +[Whale Store](https://store.whale.naver.com/detail/ecllekeilcmicbfkkiknfdddbogibbnc) + +### Other +Please note that we have dropped support for Opera as of Mue 5.0 + [GitHub Releases](https://github.com/mue/mue/releases) -### Development -#### Requirements -
    -
  1. Git
    2. -
  2. Node.JS
    3. -
  3. A suitable browser
    4. -
-
Starting
-
    -
  1. Clone the repository using git clone https://github.com/mue/mue.git -
  2. Run yarn or npm i to install all needed dependencies -
  3. Run yarn start or npm start to start testing -
  4. Code your heart out! (See the sections below for how to build the extension) -
-

Building

+## Development +### Requirements + * [Git](https://git-scm.com/) + * [Node.JS](https://nodejs.org/) + * A suitable browser +### Starting + 1. Clone the repository using `git clone https://github.com/mue/mue.git` + 2. Run `yarn` or `npm i` to install all needed dependencies + 3. Run `yarn start` or `npm start` to start testing + 4. Code your heart out! (See the sections below for how to build the extension) +### Building
Chrome/Edge (Chromium) (Click to expand)
    @@ -126,35 +127,23 @@ Please see our [roadmap](https://github.com/mue/mue/projects)
## Credits -### Core Team -#### Maintainers -[David Ralph (ohlookitsderpy)](https://github.com/ohlookitsderpy) - Lead development, photographer
- -#### Developers -[Alex Sparkes](https://github.com/alexsparkes) - Name, lead design, photographer
- -[Isaac (Eartharoid)](https://github.com/eartharoid) - QA, development, photographer
- -[Wessel Tip](https://github.com/Wessel) - Development
- +### Developers +[David Ralph](https://github.com/davidjcralph) - Lead development, photographer
+[Alex Sparkes](https://github.com/alexsparkes) - Name, lead design, photographer
+[Isaac Saunders](https://github.com/eartharoid) - QA, development, photographer
+[Wessel Tip](https://github.com/Wessel) - Development
### Translators -[Wessel Tip](https://github.com/Wessel) - Dutch - -[Alex Sparkes](https://github.com/alexsparkes), [Maxime](https://github.com/exiam) - French - -[Anders](https://github.com/FuryingFox) - Norwegian - -[Pronin Egor](https://github.com/MrZillaGold) - Russian - -[Vicente](https://github.com/Vicente015) - Spanish - -[Austin Huang](https://github.com/austinhuang0131) - Chinese (Simplified) +[Wessel Tip](https://github.com/Wessel), [Heimen Stoffels](https://github.com/Vistaus) - Dutch
+[Alex Sparkes](https://github.com/alexsparkes), [Maxime](https://github.com/exiam) - French
+[Anders](https://github.com/FuryingFox) - Norwegian
+[Pronin Egor](https://github.com/MrZillaGold) - Russian
+[Vicente](https://github.com/Vicente015) - Spanish
+[Austin Huang](https://github.com/austinhuang0131) - Chinese (Simplified)
+[FreeFun](https://github.com/xXFreeFunXx) - German
+### Contributors +Many thanks to [Highholding](https://discord.bio/p/highholding), [Noa Shapira](#), [Roee Lupo](https://github.com/RoeeLupo), [Jeroen](#), [Gio](#), [Anders](https://github.com/FuryingFox), [Oded Shapira](https://twitter.com/dondishdev), Jacob Tyrrell and [Nikka Lai](#) for letting us use their wonderful photographs. +And finally, a big thank you to all the other [contributors](https://github.com/mue/mue/graphs/contributors)! ### Resources -[Pexels](https://pexels.com) - Stock photos used for offline mode - -[Opera Forum](https://forums.opera.com/topic/25046/how-to-disable-completely-the-speed-dial/14) - Portions of code to add Opera support - -Many thanks to [Highholding](https://discord.bio/p/highholding), [Noa Shapira](#), [Roee Lupo](https://github.com/RoeeLupo), [Jeroen](#), [Glasvegas](https://twitter.com/_glasvegas), [Anders](https://github.com/FuryingFox), [Oded Shapira](https://twitter.com/dondishdev), Jacob Tyrrell and [Nikka Lai](#) for letting us use their wonderful photographs. - -And finally, a big thank you to all the [contributors](https://github.com/mue/mue/graphs/contributors)! +[Pexels](https://pexels.com) - Stock photos used for offline mode
+[Opera Forum](https://forums.opera.com/topic/25046/how-to-disable-completely-the-speed-dial/14) - Portions of code to add Opera support
diff --git a/babel.config.js b/babel.config.js new file mode 100644 index 00000000..d1e0c34d --- /dev/null +++ b/babel.config.js @@ -0,0 +1,6 @@ +module.exports = { + presets: ['@babel/preset-env', ['@babel/preset-react', { + 'runtime': 'automatic' + }]], + plugins: ['@babel/plugin-proposal-class-properties', '@babel/transform-runtime', 'babel-plugin-transform-react-class-to-function', '@babel/plugin-transform-react-constant-elements'] +}; diff --git a/manifest/background-opera.js b/manifest/background-opera.js deleted file mode 100644 index 52809ac0..00000000 --- a/manifest/background-opera.js +++ /dev/null @@ -1,14 +0,0 @@ -/* eslint-disable no-undef */ -// Original code sourced from https://forums.opera.com/topic/25046/how-to-disable-completely-the-speed-dial/14 - -chrome.tabs.onCreated.addListener((tab) => { - if (tab.status === 'complete' && tab.url === 'chrome://startpage/') chrome.tabs.update(tab.id, { - url: chrome.extension.getURL('index.html') - }); -}); - -chrome.tabs.onUpdated.addListener((tabId, changeInfo, tab) => { - if (changeInfo.status === 'complete' && tab.url === 'chrome://startpage/') chrome.tabs.update(tabId, { - url: chrome.extension.getURL('index.html') - }); -}); \ No newline at end of file diff --git a/manifest/chrome.json b/manifest/chrome.json index d79c7e33..e9358e66 100644 --- a/manifest/chrome.json +++ b/manifest/chrome.json @@ -1,18 +1,18 @@ { - "manifest_version": 2, - "offline_enabled": true, - "name": "Mue", - "description": "Fast, open and free-to-use new tab page for most modern browsers.", - "version": "4.2.1", - "browser_action": { - "default_icon": "icons/128x128.png" - }, - "chrome_url_overrides": { - "newtab": "index.html" - }, - "icons": { - "16": "icons/16x16.png", - "48": "icons/48x48.png", - "128": "icons/128x128.png" - } -} \ No newline at end of file + "manifest_version": 2, + "offline_enabled": true, + "name": "Mue", + "description": "Fast, open and free-to-use new tab page for most modern browsers.", + "version": "5.0.0", + "browser_action": { + "default_icon": "icons/128x128.png" + }, + "chrome_url_overrides": { + "newtab": "index.html" + }, + "icons": { + "16": "icons/16x16.png", + "48": "icons/48x48.png", + "128": "icons/128x128.png" + } +} diff --git a/manifest/firefox.json b/manifest/firefox.json index 78fac847..d63e01e5 100644 --- a/manifest/firefox.json +++ b/manifest/firefox.json @@ -1,15 +1,15 @@ { - "manifest_version": 2, - "name": "Mue", - "description": "Fast, open and free-to-use new tab page for most modern browsers.", - "version": "4.2.1", - "browser_action": { - "default_icon": "icons/128x128.png" - }, - "chrome_url_overrides": { - "newtab": "index.html" - }, - "chrome_settings_overrides": { - "homepage": "index.html" - } + "manifest_version": 2, + "name": "Mue", + "description": "Fast, open and free-to-use new tab page for most modern browsers.", + "version": "5.0.0", + "browser_action": { + "default_icon": "icons/128x128.png" + }, + "chrome_url_overrides": { + "newtab": "index.html" + }, + "chrome_settings_overrides": { + "homepage": "index.html" + } } diff --git a/manifest/opera.json b/manifest/opera.json deleted file mode 100644 index d8c21ad8..00000000 --- a/manifest/opera.json +++ /dev/null @@ -1,17 +0,0 @@ -{ - "manifest_version": 2, - "name": "Mue", - "description": "Fast, open and free-to-use new tab page for most modern browsers.", - "version": "4.2.0", - "browser_action": { - "default_icon": "icons/128x128.png" - }, - "background": { - "scripts": [ - "./background-opera.js" - ] - }, - "permissions": [ - "tabs" - ] -} \ No newline at end of file diff --git a/package.json b/package.json index eab712b9..027b599a 100644 --- a/package.json +++ b/package.json @@ -1,7 +1,7 @@ { "name": "mue", "private": true, - "author": "David \"ohlookitsderpy\" Ralph (https://derpyenterprises.org)", + "author": "David \"ohlookitsderpy\" Ralph (https://davidjcralph.co.uk)", "description": "Fast, open and free-to-use new tab page for modern browsers.", "repository": { "url": "github:mue/mue" @@ -9,35 +9,52 @@ "homepage": "https://muetab.com", "bugs": "https://github.com/mue/mue/issues/new?assignees=&labels=bug&template=bug-report.md&title=%5BBUG%5D", "license": "BSD-3-Clause", - "version": "4.2.1", + "version": "5.0.0", "dependencies": { + "@fontsource/lexend-deca": "^4.2.3", + "@fontsource/montserrat": "^4.2.2", "@material-ui/core": "4.11.3", "@material-ui/icons": "4.11.2", - "@muetab/quotes": "^1.0.0", - "fontsource-lexend-deca": "^3.0.10", - "fontsource-roboto": "^3.0.3", - "lodash.merge": "4.6.2", - "react": "16.14.0", - "react-clock": "^2.4.0", - "react-color-gradient-picker": "^0.1.2", - "react-dom": "16.14.0", + "react": "17.0.2", + "react-clock": "3.0.0", + "react-color-gradient-picker": "0.1.2", + "react-day-picker": "7.4.10", + "react-device-detect": "1.17.0", + "react-dom": "17.0.2", "react-modal": "3.13.1", + "react-sortable-hoc": "2.0.0", "react-toastify": "7.0.3", - "supports-webp": "2.0.1" + "weather-icons-react": "^1.2.0" }, "devDependencies": { - "react-scripts": "4.0.3", - "node-sass": "^5.0.0" + "@babel/core": "^7.13.15", + "@babel/eslint-parser": "^7.13.14", + "@babel/plugin-proposal-class-properties": "^7.13.0", + "@babel/plugin-transform-react-constant-elements": "^7.13.13", + "@babel/plugin-transform-runtime": "^7.13.15", + "@babel/preset-env": "^7.13.15", + "@babel/preset-react": "^7.13.13", + "babel-loader": "^8.2.2", + "babel-plugin-transform-react-class-to-function": "^1.2.2", + "copy-webpack-plugin": "^8.1.1", + "css-loader": "^5.2.1", + "eslint": "^7.24.0", + "eslint-config-react-app": "^6.0.0", + "eslint-webpack-plugin": "^2.5.3", + "html-webpack-plugin": "^5.3.1", + "mini-css-extract-plugin": "^1.4.1", + "sass": "^1.32.8", + "sass-loader": "^11.0.1", + "source-map-loader": "^2.0.1", + "webpack": "^5.31.2", + "webpack-cli": "^4.6.0", + "webpack-dev-server": "^3.11.2" }, "scripts": { - "start": "react-scripts start", - "build": "react-scripts build", + "start": "webpack serve", + "build": "webpack --mode=production", "chrome": "cp manifest/chrome.json build/manifest.json", - "firefox": "cp manifest/firefox.json build/manifest.json", - "opera": "cp manifest/opera.json build/manifest.json && cp manifest/background-opera.js build/" - }, - "eslintConfig": { - "extends": "react-app" + "firefox": "cp manifest/firefox.json build/manifest.json" }, "browserslist": { "production": [ diff --git a/public/icons/logo_horizontal.png b/public/icons/logo_horizontal.png new file mode 100644 index 00000000..e5c643c6 Binary files /dev/null and b/public/icons/logo_horizontal.png differ diff --git a/public/icons/mue_verified.svg b/public/icons/mue_verified.svg deleted file mode 100644 index 3db434a7..00000000 --- a/public/icons/mue_verified.svg +++ /dev/null @@ -1,10 +0,0 @@ - - - - - - - - - - diff --git a/public/icons/undraw_celebration.svg b/public/icons/undraw_celebration.svg index f0fcc804..5cce689d 100644 --- a/public/icons/undraw_celebration.svg +++ b/public/icons/undraw_celebration.svg @@ -1 +1 @@ -celebration \ No newline at end of file + \ No newline at end of file diff --git a/public/index.html b/public/index.html index dc5ffe63..10b486b1 100644 --- a/public/index.html +++ b/public/index.html @@ -9,8 +9,30 @@ - +
- - \ No newline at end of file + diff --git a/src/App.jsx b/src/App.jsx index d5340b93..25228ea1 100644 --- a/src/App.jsx +++ b/src/App.jsx @@ -1,96 +1,39 @@ import React from 'react'; -import Background from './components/widgets/Background'; -import Clock from './components/widgets/Clock'; -import Greeting from './components/widgets/Greeting'; -import Quote from './components/widgets/Quote'; -import Search from './components/widgets/Search'; -import Maximise from './components/widgets/Maximise'; -import Favourite from './components/widgets/Favourite'; +import Background from './components/widgets/background/Background'; +import Widgets from './components/widgets/Widgets'; +import Modals from './components/modals/Modals'; -import Navbar from './components/Navbar'; +import EventBus from './modules/helpers/eventbus'; +import SettingsFunctions from './modules/helpers/settings'; -import SettingsFunctions from './modules/settingsFunctions'; import { ToastContainer } from 'react-toastify'; -import Modal from 'react-modal'; -import merge from 'lodash.merge'; -import RoomIcon from '@material-ui/icons/Room'; - -// Modals are lazy loaded as the user won't use them every time they open a tab -const MainModal = React.lazy(() => import('./components/modals/MainModal')); -const Update = React.lazy(() => import('./components/modals/Update')); -//const Welcome = React.lazy(() => import('./components/modals/Welcome')); -const renderLoader = () =>
; export default class App extends React.PureComponent { - constructor(props) { - super(props); - this.state = { - mainModal: false, - updateModal: false - }; + componentDidMount() { + if (!localStorage.getItem('firstRun')) { + SettingsFunctions.setDefaultSettings(); + } + + SettingsFunctions.loadSettings(); + + EventBus.on('refresh', (data) => { + if (data === 'other') { + SettingsFunctions.loadSettings(true); + } + }); } - // Render all the components render() { - if (!localStorage.getItem('firstRun')) SettingsFunctions.setDefaultSettings(); - - let modalClassList = 'Modal'; // Modal features - let tooltipClassList = 'tooltiptext'; - if ((localStorage.getItem('brightnessTime') && new Date().getHours() > 18) || localStorage.getItem('darkTheme') === 'true') { - modalClassList = 'Modal dark'; - tooltipClassList = 'tooltiptext dark'; - } - const overlayClassList = (localStorage.getItem('animations') === 'true') ? 'Overlay modal-animation' : 'Overlay'; - - const en = require('./translations/en.json'); // User language - const language = merge(en, require(`./translations/${localStorage.getItem('language') || 'en'}.json`)); - - const theme = localStorage.getItem('theme'); // Marketplace themes (WIP) - if (theme) { - const style = document.createElement('link'); - style.href = theme; - style.rel = 'stylesheet'; - document.head.appendChild(style); - } - return ( - - - + <> + {(localStorage.getItem('background') === 'true') ? : null} +
- - this.setState({ mainModal: true })} updateModalOpen={() => this.setState({ updateModal: true })} /> - - - -
-

{language.credit}

- -
- - -
-
- - - - this.setState({ mainModal: false })} isOpen={this.state.mainModal} className={modalClassList} overlayClassName={overlayClassList} ariaHideApp={false}> - this.setState({ mainsModal: false })} /> - - this.setState({ updateModal: false })} isOpen={this.state.updateModal} className={modalClassList} overlayClassName={overlayClassList} ariaHideApp={false}> - this.setState({ updateModal: false })} /> - - {/* this.setState({ welcomeModal: false })} isOpen={this.state.welcomeModal} className={modalClassList} overlayClassName='Overlay' ariaHideApp={false}> - this.setState({ welcomeModal: false })} /> - */ } - + +
- + ); } } diff --git a/src/components/Navbar.jsx b/src/components/Navbar.jsx deleted file mode 100644 index d3e666c3..00000000 --- a/src/components/Navbar.jsx +++ /dev/null @@ -1,24 +0,0 @@ -import React from 'react'; -import RefreshIcon from '@material-ui/icons/Refresh'; -import Gear from '@material-ui/icons/Settings'; -import NewReleases from '@material-ui/icons/NewReleases'; - -export default class Navbar extends React.PureComponent { - render() { - let refreshHTML =
window.location.reload()} />
; - const refresh = localStorage.getItem('refresh'); - if (refresh === 'false') refreshHTML = ''; - - return ( -
-
- -
- {refreshHTML} -
- -
-
- ); - } -} \ No newline at end of file diff --git a/src/components/modals/ErrorBoundary.jsx b/src/components/modals/ErrorBoundary.jsx new file mode 100644 index 00000000..0c5b9622 --- /dev/null +++ b/src/components/modals/ErrorBoundary.jsx @@ -0,0 +1,32 @@ +import React from 'react'; + +export default class ErrorBoundary extends React.PureComponent { + constructor(props) { + super(props); + this.state = { + error: false + }; + this.language = window.language.modals.main.error_boundary; + } + + static getDerivedStateFromError(error) { + console.log(error); + return { + error: true + }; + } + + render() { + if (this.state.error) { + return ( +
+

{this.language.title}

+

{this.language.message}

+ +
+ ); + } + + return this.props.children; + } +} diff --git a/src/components/modals/MainModal.jsx b/src/components/modals/MainModal.jsx deleted file mode 100644 index 73f69978..00000000 --- a/src/components/modals/MainModal.jsx +++ /dev/null @@ -1,74 +0,0 @@ -import React from 'react'; - -import Settings from './tabs/Settings'; -import Addons from './tabs/Addons'; -import Marketplace from './tabs/Marketplace'; - -export default class MainModal extends React.PureComponent { - constructor(...args) { - super(...args); - this.state = { - tab: , - settingsActive: 'active', - addonsActive: '', - marketplaceActive: '' - }; - } - - componentDidMount() { - document.getElementById('backgroundImage').classList.toggle('backgroundEffects'); - document.getElementById('center').classList.toggle('backgroundEffects'); - } - - componentWillUnmount() { - document.getElementById('backgroundImage').classList.toggle('backgroundEffects'); - document.getElementById('center').classList.toggle('backgroundEffects'); - } - - changeEnabled(input) { - switch (input) { - case 'addons': - this.setState({ - tab: this.changeEnabled('marketplace')}/>, - addonsActive: 'active', - settingsActive: '', - marketplaceActive: '' - }); - break; - case 'settings': - this.setState({ - tab: , - settingsActive: 'active', - addonsActive: '', - marketplaceActive: '' - }); - break; - case 'marketplace': - this.setState({ - tab: , - marketplaceActive: 'active', - addonsActive: '', - settingsActive: '' - }); - break; - default: - break; - } - } - - render() { - return ( -
- × -

{this.props.language.modals.title}

-
- - - -
-
- {this.state.tab} -
- ) - } -} \ No newline at end of file diff --git a/src/components/modals/Modals.jsx b/src/components/modals/Modals.jsx new file mode 100644 index 00000000..ff12c5f4 --- /dev/null +++ b/src/components/modals/Modals.jsx @@ -0,0 +1,57 @@ +import React from 'react'; + +import Main from './main/Main'; +import Navbar from '../widgets/navbar/Navbar'; + +import Modal from 'react-modal'; + +// Modals are lazy loaded as the user won't use them every time they open a tab +const Welcome = React.lazy(() => import('./welcome/Welcome')); +const Feedback = React.lazy(() => import('./feedback/Feedback')); +const renderLoader = () => <>; + +export default class Modals extends React.PureComponent { + constructor() { + super(); + this.state = { + mainModal: false, + updateModal: false, + welcomeModal: false, + feedbackModal: false + }; + } + + componentDidMount() { + if (localStorage.getItem('showWelcome') === 'true' && window.location.search !== '?nointro=true') { + this.setState({ + welcomeModal: true + }); + } + } + + closeWelcome() { + localStorage.setItem('showWelcome', false); + this.setState({ + welcomeModal: false + }); + } + + render() { + return ( + <> + this.setState({ [modal]: true })}/> + this.setState({ mainModal: false })} isOpen={this.state.mainModal} className='Modal' overlayClassName='Overlay' ariaHideApp={false}> +
this.setState({ mainModal: false })}/> + + + this.closeWelcome()} isOpen={this.state.welcomeModal} className='Modal welcomemodal' overlayClassName='Overlay' ariaHideApp={false}> + this.closeWelcome()}/> + + this.setState({ feedbackModal: false })} isOpen={this.state.feedbackModal} className='Modal' overlayClassName='Overlay' ariaHideApp={false}> + this.setState({ feedbackModal: false })}/> + + + + ); + } +} \ No newline at end of file diff --git a/src/components/modals/Update.jsx b/src/components/modals/Update.jsx deleted file mode 100644 index 7979ae76..00000000 --- a/src/components/modals/Update.jsx +++ /dev/null @@ -1,59 +0,0 @@ -import React from 'react'; -import * as Constants from '../../modules/constants'; - -export default class Update extends React.PureComponent { - constructor(...args) { - super(...args); - this.state = { - title: this.props.language.title, - date: '???', - content: this.props.language.title, - author: 'Mue', - html: this.props.language.loading - }; - } - - async getUpdate() { - const supportText = `

${this.props.language.contactsupport}: https://muetab.xyz/contact

`; - - if (localStorage.getItem('offlineMode') === 'true') return this.setState({ - title: this.props.language.offline.title, - html: this.props.language.offline.description - }); - - try { // Get update log from the API - const data = await (await fetch(Constants.API_URL + '/getUpdate')).json(); - if (data.statusCode === 500) return this.setState({ - title: this.props.language.error.title, - html: this.props.language.error.description + supportText - }); - - this.setState({ - title: data.title, - date: data.published, - image: data.image, - author: data.author, - html: data.content + `

${this.props.language.readblog}: ${data.url}

` - }); - } catch (e) { // If it fails, we send an error - this.setState({ - title: this.props.language.error.title, - html: this.props.language.error.description + supportText - }); - } - } - - componentDidMount() { - this.getUpdate(); - } - - render() { - return
- × -

{this.state.title}

-
By {this.state.author} • {this.state.date}
- Update -

-
; - } -} \ No newline at end of file diff --git a/src/components/modals/Welcome.jsx b/src/components/modals/Welcome.jsx deleted file mode 100644 index 78ba859d..00000000 --- a/src/components/modals/Welcome.jsx +++ /dev/null @@ -1,31 +0,0 @@ -import React from 'react'; -import EmailIcon from '@material-ui/icons/Email'; - -export default class Welcome extends React.PureComponent { - render() { - return
- × -
-

Welcome to

-

Mue Tab

- celebration -

Information

-

Thank you for downloading Mue Tab,
we hope you enjoy your time with our extension.

-

Tutorials

- General Start -
- Marketplace -
- Submitting Photos -
- Settings -

Support

- {/* twitter - discord */} - -
- -
-
; - } -} \ No newline at end of file diff --git a/src/components/modals/feedback/Feedback.jsx b/src/components/modals/feedback/Feedback.jsx new file mode 100644 index 00000000..73b56590 --- /dev/null +++ b/src/components/modals/feedback/Feedback.jsx @@ -0,0 +1,93 @@ +import React from 'react'; + +import './feedback.scss'; + +export default class FeedbackModal extends React.PureComponent { + constructor() { + super(); + this.state = { + questionone: 5, + questionthree: 5, + questiontwoerror: '', + questionfourerror: '', + formsubmit: '' + }; + this.language = window.language.modals.feedback; + } + + async submitForm () { + let questiontwoerror, questionfourerror; + + if (document.getElementById('questiontwo').value.length <= 0) { + questiontwoerror = this.language.not_filled; + } + + if (document.getElementById('questionfour').value.length <= 0) { + questionfourerror = this.language.not_filled; + } + + if (questiontwoerror || questionfourerror) { + this.setState({ + questiontwoerror: questiontwoerror, + questionfourerror: questionfourerror + }); + } else { + this.setState({ + questiontwoerror: '', + questionfourerror: '' + }); + + await fetch(window.constants.FEEDBACK_FORM, { + 'method': 'POST' + }); + + this.setState({ + formsubmit: this.language.success + }); + + setTimeout(() => { + this.props.modalClose(); + }, 3000); + } + } + + render() { + return ( +
+

{this.language.title}

+ × + <> + + <> + +

+ + this.setState({ questionone: e.target.value })}/> + + +

+ <> + +