Merge branch 'feature-add-dashboard'

README.md

@@ -16,16 +16,16 @@ This is a fan website built using ReactJS and Bulma as the CSS framework.
 
 (we are looking for contributors to help build this site!)
 
-## [Check out the live site!](Http://greta.portplays.com/)
+## [Check out the live site!](Https://greta.portplays.com/)
 
 ## [Connect with Us at Facebook!](https://www.facebook.com/Greta-Thunberg-the-first-100-weeks-in-pictures-246201326553309) 
 
-![](http://greta.portplays.com/images/preview-film.gif)
+![](https://greta.portplays.com/images/preview-film.gif)
 
 ## Requirements 
 A website for Greta Thunberg Fridays For Future and for Greta's different engagements, such as award ceremonies, nominations, events and personal happenings. Practically everything about her journey. Greta Thunberg's concept is to every Friday make a protest, either outside or indoors, to let the world know about the climate and ecological crisis. One particularly important thing is the "weeks". Greta is now as-of writing on her 106'th week of protesting. By highlighting the "week" as a central organizer /, Fridays For Future have created their own time calendar era with the start at week ONE on Monday August 20 2018.
 
-![](http://greta.portplays.com/images/weeks1.png)
+![](https://greta.portplays.com/images/weeks1.png)
 
 
 ##### A website portraying this must contain following:
@@ -41,10 +41,14 @@ A website for Greta Thunberg Fridays For Future and for Greta's different engage
 
 ##### ***THIS ABOVE LIST IS IN A DRAFT STATE..****
 
-# Current version:  1.1.1
+# Current version:  1.2.6
 
 ## Change log
 
+##### App Version: 1.2.6 Build: 1608830433717 Date: (24.12.2020 18:20:33)
+CHANGES:    
+- New Dashboard with Theming. This Dashboard is an outlining of features and the next step is to implement them. So have a look around and feel free to come with code to input.
+
 ##### App Version: 1.1.1 Build: 1606246094943 Date: (24.11.2020 20:28:14)
 CHANGES:
 - FIxed the top navigation bar so it also works on mobile screens     
@@ -112,10 +116,12 @@ At Cloud Firestore enable Sign-in providers:
 - Google
 - Facebook
 - Twitter
+- E-mail
 
 That's it for now just text me from Facebook group and expect changes since it's early beta..
 
 ## TODO:
++ Continue building on the Dashboard features it's a blanks slate right now
 + Create Internationalization
 + Move json meta data to Firestore
 + The Menu header Toggle Button open a link page and all links need setup help.

package.json

@@ -1,6 +1,6 @@
 {
   "name": "greta-thunberg-fff",
-  "version": "1.1.2",
+  "version": "1.2.6",
   "private": true,
   "main": "index.js",
   "module": "dist/index.js",
@@ -9,11 +9,20 @@
     "README.md"
   ],
   "dependencies": {
+    "@material-ui/core": "^4.11.2",
+    "@material-ui/icons": "^4.11.2",
+    "@material-ui/lab": "^4.0.0-alpha.57",
+    "@material-ui/styles": "^4.11.2",
     "axios": "^0.19.2",
     "bootstrap": "^4.5.2",
     "clean-tag": "^3.1.1",
+    "clsx": "^1.1.1",
     "comma-separated-values": "^3.6.4",
     "firebase": "^7.23.0",
+    "formik": "^2.2.5",
+    "framer-motion": "^2.9.5",
+    "gsap": "^3.5.1",
+    "history": "^5.0.0",
     "lodash": "^4.17.19",
     "mammoth": "^1.4.11",
     "moment": "^2.27.0",
@@ -25,16 +34,21 @@
     "react": "^16.8.4",
     "react-activity": "^1.2.2",
     "react-bootstrap": "^1.3.0",
+    "react-chartjs-2": "^2.11.1",
     "react-data-grid": "^6.1.0",
     "react-detect-offline": "^2.4.0",
     "react-dom": "^16.8.4",
+    "react-helmet": "^6.1.0",
     "react-motion": "^0.5.2",
+    "react-perfect-scrollbar": "^1.5.8",
     "react-redux": "^7.2.1",
     "react-redux-notify": "^4.2.1",
     "react-resize-detector": "^5.0.7",
+    "react-router-dom": "^6.0.0-beta.0",
     "react-scripts": "^3.4.0",
     "react-slick": "^0.27.3",
     "react-spring": "^8.0.27",
+    "react-transition-group": "^4.4.1",
     "react-visibility-sensor": "^5.1.1",
     "rebass": "^4.0.7",
     "recompose": "^0.30.0",
@@ -48,7 +62,9 @@
     "styled-system": "^5.1.5",
     "three": "^0.85.2",
     "typescript": "^3.9.7",
-    "xlsx": "^0.10.1"
+    "uuid": "^8.3.1",
+    "xlsx": "^0.10.1",
+    "yup": "^0.32.1"
   },
   "peerDependencies": {
     "react": "^16.13.1",

public/images/favicon/browserconfig.xml

@@ -0,0 +1,9 @@
+<?xml version="1.0" encoding="utf-8"?>
+<browserconfig>
+    <msapplication>
+        <tile>
+            <square150x150logo src="./images/favicon/mstile-150x150.png"/>
+            <TileColor>#da532c</TileColor>
+        </tile>
+    </msapplication>
+</browserconfig>

public/images/favicon/site.webmanifest

@@ -0,0 +1,19 @@
+{
+    "name": "",
+    "short_name": "",
+    "icons": [
+        {
+            "src": "android-chrome-192x192.png",
+            "sizes": "192x192",
+            "type": "image/png"
+        },
+        {
+            "src": "android-chrome-256x256.png",
+            "sizes": "256x256",
+            "type": "image/png"
+        }
+    ],
+    "theme_color": "#ffffff",
+    "background_color": "#ffffff",
+    "display": "standalone"
+}

public/index.html

@@ -20,24 +20,15 @@
   <meta name="msapplication-starturl" content="/http://greta.portplays.com/">
   <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
 
-
-  <link rel="apple-touch-icon" sizes="57x57" href="./images/favicon/apple-icon-57x57.png">
-  <link rel="apple-touch-icon" sizes="60x60" href="./images/favicon/apple-icon-60x60.png">
-  <link rel="apple-touch-icon" sizes="72x72" href="./images/favicon/apple-icon-72x72.png">
-  <link rel="apple-touch-icon" sizes="76x76" href="./images/favicon/apple-icon-76x76.png">
-  <link rel="apple-touch-icon" sizes="114x114" href="./images/favicon/apple-icon-114x114.png">
-  <link rel="apple-touch-icon" sizes="120x120" href="./images/favicon/apple-icon-120x120.png">
-  <link rel="apple-touch-icon" sizes="144x144" href="./images/favicon/apple-icon-144x144.png">
-  <link rel="apple-touch-icon" sizes="152x152" href="./images/favicon/apple-icon-152x152.png">
-  <link rel="apple-touch-icon" sizes="180x180" href="./images/favicon/apple-icon-180x180.png">
-  <link rel="icon" type="image/png" sizes="192x192" href="./images/favicon/android-icon-192x192.png">
-  <link rel="icon" type="image/png" sizes="32x32" href="./images/favicon/favicon-32x32.png">
-  <link rel="icon" type="image/png" sizes="96x96" href="./images/favicon/favicon-96x96.png">
-  <link rel="icon" type="image/png" sizes="16x16" href="./images/favicon/favicon-16x16.png">
-  <link rel="manifest" href="/manifest.json">
-  <meta name="msapplication-TileColor" content="#ffffff">
-  <meta name="msapplication-TileImage" content="/ms-icon-144x144.png">
-  <meta name="theme-color" content="#ffffff">
+  <link rel="apple-touch-icon" sizes="180x180" href="./images/favicon/apple-touch-icon.png">
+<link rel="icon" type="image/png" sizes="32x32" href="./images/favicon/favicon-32x32.png">
+<link rel="icon" type="image/png" sizes="16x16" href="./images/favicon/favicon-16x16.png">
+<link rel="manifest" href="./images/favicon/site.webmanifest">
+<link rel="mask-icon" href="./images/favicon/safari-pinned-tab.svg" color="#5bbad5">
+<link rel="shortcut icon" href="./images/favicon/favicon.ico">
+<meta name="msapplication-TileColor" content="#da532c">
+<meta name="msapplication-config" content="./images/favicon/browserconfig.xml">
+<meta name="theme-color" content="#ffffff">
 
   <meta name="description" coscript.js ntent="This is a fan-site about Greta Thunberg" />
 
@@ -50,6 +41,7 @@
   />
 
   <title></title>
+  <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto+Mono|Roboto+Slab|Roboto:300,400,500,700" />
 
   <link href="https://fonts.googleapis.com/css?family=Roboto:300,400,700,900" rel="stylesheet">
   <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.min.css">

public/manifest.json

@@ -7,11 +7,9 @@
   "theme_color": "#00ff66",
   "icons": [
     {
-      "src": "http://greta.portplays.com/images/GretaThunberg-collage3.png",
-      "sizes": "800x450"
-    },
-    {
-      "sizes": "2560x1439"
+      "src": "favicon.ico",
+      "sizes": "64x64 32x32 24x24 16x16",
+      "type": "image/x-icon"
     }
   ]
 }

src/App.jsx

@@ -1,34 +1,35 @@
-import React, { Component } from 'react';
+import React, { useEffect } from 'react';
+import { AnimatePresence } from 'framer-motion';
 import { connect } from 'react-redux';
 import { compose } from 'recompose';
+import { useRoutes } from 'react-router-dom';
+import { ThemeContextProvider } from './theme/ThemeProvider';
 import { getAlbumData } from './redux/albumData/albumData.actions';
 import { getMetaData } from './redux/albumMetaData/albumMetaData.actions';
-import Header from './components/structure/Header';
-import Content from './components/structure/Content';
-import Footer from './components/structure/Footer';
-import Dashboard from './components/profile/Dashboard';
-
 import { withAuthentication } from './session';
 import './styles/index.css';
+import routes from './routes';
+
+const AnimatedSwitch = () => {
+	const routing = useRoutes(routes);
+
+	return (
+		<AnimatePresence exitBeforeEnter initial={false}>
+			<div>{routing}</div>
+		</AnimatePresence>
+	);
+};
+
+const App = props => {
+	const { getMeta, getAlbum } = props;
 
-class App extends Component {
-	componentDidMount() {
-		const { getMeta, getAlbum } = this.props;
+	useEffect(() => {
 		getMeta();
 		getAlbum();
-	}
+	}, [getMeta, getAlbum]);
 
-	render() {
-		return (
-			<div>
-				<Header />
-				<Content />
-				<Footer />
-				<Dashboard />
-			</div>
-		);
-	}
-}
+	return <ThemeContextProvider> {AnimatedSwitch()} </ThemeContextProvider>;
+};
 const mapDispatchToProps = dispatch => ({
 	getMeta: () => dispatch(getMetaData()),
 	getAlbum: () => dispatch(getAlbumData()),

src/assets/Facebook.jsx

@@ -0,0 +1,12 @@
+import React from 'react';
+import { SvgIcon } from '@material-ui/core';
+
+const Facebook = props => {
+	return (
+		<SvgIcon {...props}>
+			<path d="M9.53144612,22.005 L9.53144612,13.0552149 L6.44166667,13.0552149 L6.44166667,9.49875 L9.53144612,9.49875 L9.53144612,6.68484375 C9.53144612,5.19972656 9.95946769,4.04680661 10.8155103,3.22608401 C11.6715529,2.4053613 12.808485,1.995 14.2263057,1.995 C15.3766134,1.995 16.3129099,2.04710915 17.0351961,2.15132812 L17.0351961,5.3169726 L15.1090998,5.3169726 C14.3868137,5.3169726 13.8919142,5.47330073 13.6244006,5.78595698 C13.4103902,6.04650407 13.3033846,6.46337874 13.3033846,7.03658198 L13.3033846,9.49875 L16.71418,9.49875 L16.2326559,13.0552149 L13.3033846,13.0552149 L13.3033846,22.005 L9.53144612,22.005 Z" />
+		</SvgIcon>
+	);
+};
+
+export default Facebook;

src/assets/Google.jsx

@@ -0,0 +1,27 @@
+import React from 'react';
+import { SvgIcon } from '@material-ui/core';
+
+const Google = props => {
+	return (
+		<SvgIcon {...props} width="2443" height="2500" viewBox="0 0 256 262" preserveAspectRatio="xMidYMid">
+			<path
+				d="M255.878 133.451c0-10.734-.871-18.567-2.756-26.69H130.55v48.448h71.947c-1.45 12.04-9.283 30.172-26.69 42.356l-.244 1.622 38.755 30.023 2.685.268c24.659-22.774 38.875-56.282 38.875-96.027"
+				fill="#4285F4"
+			/>
+			<path
+				d="M130.55 261.1c35.248 0 64.839-11.605 86.453-31.622l-41.196-31.913c-11.024 7.688-25.82 13.055-45.257 13.055-34.523 0-63.824-22.773-74.269-54.25l-1.531.13-40.298 31.187-.527 1.465C35.393 231.798 79.49 261.1 130.55 261.1"
+				fill="#34A853"
+			/>
+			<path
+				d="M56.281 156.37c-2.756-8.123-4.351-16.827-4.351-25.82 0-8.994 1.595-17.697 4.206-25.82l-.073-1.73L15.26 71.312l-1.335.635C5.077 89.644 0 109.517 0 130.55s5.077 40.905 13.925 58.602l42.356-32.782"
+				fill="#FBBC05"
+			/>
+			<path
+				d="M130.55 50.479c24.514 0 41.05 10.589 50.479 19.438l36.844-35.974C195.245 12.91 165.798 0 130.55 0 79.49 0 35.393 29.301 13.925 71.947l42.211 32.783c10.59-31.477 39.891-54.251 74.414-54.251"
+				fill="#EB4335"
+			/>
+		</SvgIcon>
+	);
+};
+
+export default Google;

src/assets/twitter-logo.jsx

@@ -0,0 +1,17 @@
+import React from 'react';
+import { SvgIcon } from '@material-ui/core';
+
+const Google = props => {
+	return (
+		<SvgIcon {...props}>
+			<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 333333 333333">
+				<path
+					d="M333328 63295c-12254 5480-25456 9122-39241 10745 14123-8458 24924-21861 30080-37819-13200 7807-27871 13533-43416 16596-12499-13281-30252-21537-49919-21537-37762 0-68336 30591-68336 68330 0 5326 591 10537 1748 15562-56820-2880-107194-30081-140915-71467-6049 10435-9250 22300-9250 34367v8c0 23696 12031 44654 30389 56876-11202-333-21739-3457-30991-8519v854c0 33138 23554 60789 54852 67039-5734 1557-11787 2417-18023 2417-4417 0-8673-455-12905-1224 8742 27139 33975 46923 63857 47500-23430 18356-52858 29286-84939 29286-5537 0-10931-339-16318-984 30326 19458 66251 30727 104844 30727 125735 0 194551-104198 194551-194543 0-3002-67-5911-191-8852 13354-9553 24932-21609 34097-35333l31-31-6 4z"
+					fill="#1da1f2"
+				/>
+			</svg>
+		</SvgIcon>
+	);
+};
+
+export default Google;