feat(Splash Screen): add splash screen, add new translations, update …

…README

README.md

@@ -1,4 +1,33 @@
-This project was bootstrapped with [Create React App](https://github.com/facebook/create-react-app).
+# React App + Firebase Auth & Realtime Database
+
+This project built with [Create React App](https://github.com/facebook/create-react-app) allows you to add / modify / delete character sheets for novels. This application uses Firebase for authentication and database.
+
+## :fire: Prerequisite (Environment variables)
+
+To use this app, you need to create an `.env` file at the root of the project in which you add the app's Firebase configuration (Realtime Database). Here is an example below:
+
+:warning: **These are dummy data, do not copy them as they are in your project.**
+
+```#!/bin/bash
+# .env
+
+REACT_APP_FIREBASE_API_KEY=ffa6eeb0-3ba7-4091-bd0b-98011315365a
+REACT_APP_FIREBASE_AUTH_DOMAIN=auth-domain.firebaseapp.com
+REACT_APP_FIREBASE_DATABASE_URL=https://database-url.firebaseio.com
+REACT_APP_FIREBASE_PROJECT_ID=project-id-name
+REACT_APP_FIREBASE_STORAGE_BUCKET=storage-bucket.appspot.com
+REACT_APP_FIREBASE_MESSAGING_SENDER_ID=497108424
+REACT_APP_FIREBASE_APP_ID=9:497108424:web:96ba329da5b0
+```
+
+## Resources: Frameworks & libraries
+
+* React
+* Typescript
+* Material UI
+* Firebase Realtime Database
+* React Router
+* React i18next (translations)
 
 ## Available Scripts
 
@@ -36,9 +65,3 @@ If you aren’t satisfied with the build tool and configuration choices, you can
 Instead, it will copy all the configuration files and the transitive dependencies (webpack, Babel, ESLint, etc) right into your project so you have full control over them. All of the commands except `eject` will still work, but they will point to the copied scripts so you can tweak them. At this point you’re on your own.
 
 You don’t have to ever use `eject`. The curated feature set is suitable for small and middle deployments, and you shouldn’t feel obligated to use this feature. However we understand that this tool wouldn’t be useful if you couldn’t customize it when you are ready for it.
-
-## Learn More
-
-You can learn more in the [Create React App documentation](https://facebook.github.io/create-react-app/docs/getting-started).
-
-To learn React, check out the [React documentation](https://reactjs.org/).

package.json

@@ -5,6 +5,7 @@
   "dependencies": {
     "@material-ui/core": "^4.11.0",
     "@material-ui/icons": "^4.9.1",
+    "@material-ui/lab": "^4.0.0-alpha.56",
     "@react-firebase/auth": "^0.2.10",
     "@testing-library/jest-dom": "^4.2.4",
     "@testing-library/react": "^9.3.2",

src/App.tsx

@@ -11,6 +11,7 @@ import { firebaseConfig } from './config/config';
 
 import SignIn from './components/login/SignIn';
 import Dashboard from './components/Dashboard';
+import WithSplashScreen from './components/splash-screen/WithSplashScreen';
 
 const App = () => {
   const signInWithGoogle = React.useCallback(async () => {
@@ -44,4 +45,4 @@ const App = () => {
   );
 };
 
-export default App;
+export default WithSplashScreen(App);

src/components/Dashboard.tsx

@@ -136,8 +136,7 @@ const Dashboard = ({ signOut }: DashboardProps) => {
   };
   const handleDrawerClose = () => {
     setOpen(false);
-  };
-  // const fixedHeightPaper = clsx(classes.paper, classes.fixedHeight);
+  };;
 
   const prefersDarkMode = useMediaQuery('(prefers-color-scheme: dark)');
 

src/components/characters-list/CharactersList.tsx

@@ -14,13 +14,13 @@ interface CharactersListProps {
 
 const CharactersList = ({ classes }: CharactersListProps) => {
     return (
-        <>
-          <Grid item xs={12}>
-              <Paper className={classes.paper}>
-                <CharactersTable />
-              </Paper>
-            </Grid>
-        </>
+      <>
+        <Grid item xs={12}>
+            <Paper className={classes.paper}>
+              <CharactersTable />
+            </Paper>
+          </Grid>
+      </>
     );
 }
 

src/components/characters-list/CharactersTable.tsx

@@ -1,6 +1,7 @@
 import React from 'react';
 import * as firebase from 'firebase';
 import { useList } from 'react-firebase-hooks/database';
+import { useTranslation } from "react-i18next";
 import Link from '@material-ui/core/Link';
 import { makeStyles } from '@material-ui/core/styles';
 import CircularProgress from '@material-ui/core/CircularProgress';
@@ -9,31 +10,9 @@ import TableBody from '@material-ui/core/TableBody';
 import TableCell from '@material-ui/core/TableCell';
 import TableHead from '@material-ui/core/TableHead';
 import TableRow from '@material-ui/core/TableRow';
-
-import { firebaseConfig } from '../../config/config';
-
 import Title from '../shared/Title';
 
-// Generate Order Data
-interface CreateDataProps {
-    id: string,
-    date: string,
-    name: string,
-    shipTo: string,
-    paymentMethod: string,
-    amount: number,
-}
-function createData(id: number, date: string, name: string, age: number, occupation: string, role: string) {
-  return { id, date, name, age, occupation, role };
-}
-
-const rows = [
-  createData(0, '16 Mar, 2019', 'Matt Suderland', 45, 'Hero', 'Master'),
-  createData(1, '16 Mar, 2019', 'Phil Rigor', 32, 'Singer', 'Major'),
-  createData(2, '16 Mar, 2019', 'Ellen Mitchell', 27, 'Journalist', 'Minor'),
-  createData(3, '16 Mar, 2019', 'Paula Cloud', 89, 'Driver', 'Master'),
-  createData(4, '15 Mar, 2019', 'Edgard Lazd', 21, 'Soldier', 'Major'),
-];
+import Alert from '@material-ui/lab/Alert';
 
 function preventDefault(event: any) {
   event.preventDefault();
@@ -50,8 +29,10 @@ const useStyles = makeStyles((theme) => ({
   },
 }));
 
-export default function Orders() {
+const CharactersTable = () => {
   const classes = useStyles();
+  const { t } = useTranslation();
+
   const [initializeApp, setInitializeApp] = React.useState(false);
   const [characters, setCharacters] = React.useState({});
 
@@ -78,42 +59,51 @@ export default function Orders() {
   const [snapshots, loading, error] = useList(charactersRef);
 
   return (
-    <React.Fragment>
-      <Title>Recent Characters</Title>
+    <>
+      <Title>{t('characters.title')}</Title>
+      {error &&
+        <Alert variant="filled" severity="error">
+          Error: {error}
+        </Alert>
+      }
       {loading &&
         <div className={classes.loading}>
           <CircularProgress />
         </div>
       }
       {!loading && snapshots &&
-        <Table size="small">
-          <TableHead>
-            <TableRow>
-              <TableCell>Date</TableCell>
-              <TableCell>Name</TableCell>
-              <TableCell>Age</TableCell>
-              <TableCell>Occupation</TableCell>
-              <TableCell align="right">Role</TableCell>
-            </TableRow>
-          </TableHead>
-          <TableBody>
-            {snapshots.map((row) => (
-              <TableRow key={row.val().id}>
-                <TableCell>{row.val().createdAt}</TableCell>
-                <TableCell>{row.val().name}</TableCell>
-                <TableCell>{row.val().age}</TableCell>
-                <TableCell>{row.val().occupation}</TableCell>
-                <TableCell align="right">{row.val().role}</TableCell>
+        <>
+          <Table size="small">
+            <TableHead>
+              <TableRow>
+                <TableCell>{t('characters.tablehead.date')}</TableCell>
+                <TableCell>{t('characters.tablehead.name')}</TableCell>
+                <TableCell>{t('characters.tablehead.age')}</TableCell>
+                <TableCell>{t('characters.tablehead.occupation')}</TableCell>
+                <TableCell align="right">{t('characters.tablehead.role')}</TableCell>
               </TableRow>
-            ))}
-          </TableBody>
-        </Table>
+            </TableHead>
+            <TableBody>
+              {snapshots.map((row) => (
+                <TableRow key={row.val().id}>
+                  <TableCell>{row.val().createdAt}</TableCell>
+                  <TableCell>{row.val().name}</TableCell>
+                  <TableCell>{row.val().age}</TableCell>
+                  <TableCell>{row.val().occupation}</TableCell>
+                  <TableCell align="right">{row.val().role}</TableCell>
+                </TableRow>
+              ))}
+            </TableBody>
+          </Table>
+          <div className={classes.seeMore}>
+            <Link color="primary" href="#" onClick={preventDefault}>
+              {t('characters.button.seemore')}
+            </Link>
+          </div>
+        </>
       }
-      <div className={classes.seeMore}>
-        <Link color="primary" href="#" onClick={preventDefault}>
-          See more orders
-        </Link>
-      </div>
-    </React.Fragment>
+    </>
   );
 }
+
+export default CharactersTable;

src/components/login/SignIn.tsx

@@ -15,7 +15,6 @@ import Typography from '@material-ui/core/Typography';
 import { makeStyles } from '@material-ui/core/styles';
 import Container from '@material-ui/core/Container';
 
-import Launch from '../layout/Launch';
 import Copyright from '../layout/Copyright';
 import GoogleLogo from '../../styles/images/google_logo.svg';
 
@@ -57,9 +56,6 @@ const SignIn = ({ signInWithGoogle, signInAnonymously }: SignInProps) => {
 
   return (
     <>
-      {isSignedIn &&
-        <Launch />
-      }
       {!isSignedIn &&
         <Container component="main" maxWidth="xs">
           <CssBaseline />

src/components/splash-screen/WithSplashScreen.tsx

@@ -0,0 +1,40 @@
+import React, { Component } from 'react';
+import Launch from '../layout/Launch';
+
+const WithSplashScreen = <P extends object>(
+    WrappedComponent: React.ComponentType<P>
+  ) => {
+  return class extends Component<P, { loading: boolean }> {
+    constructor(props: Readonly<P>) {
+      super(props);
+      this.state = {
+        loading: true,
+      };
+    }
+
+    componentDidMount() {
+      try {
+        setTimeout(() => {
+          this.setState({
+            loading: false,
+          });
+        }, 4000)
+      } catch (err) {
+        console.log(err);
+        this.setState({
+          loading: false,
+        });
+      }
+    }
+
+    render() {
+      // while checking user session, show "loading" message
+      if (this.state.loading) return <Launch />;
+
+      // otherwise, show the desired route
+      return <WrappedComponent {...this.props} />;
+    }
+  };
+}
+
+export default WithSplashScreen;

src/db/characters.json

@@ -4,6 +4,6 @@
         { "id": 2, "createdAt": "16 Mar, 2019", "name": "Phil Rigor", "age": 32, "occupation": "Singer", "role": "Major" },
         { "id": 3, "createdAt": "16 Mar, 2019", "name": "Ellen Mitchell", "age": 27, "occupation": "Journalist", "role": "Minor" },
         { "id": 4, "createdAt": "16 Mar, 2019", "name": "Paula Cloud", "age": 58, "occupation": "Driver", "role": "Master" },
-        { "id": 5, "createdAt": "16 Mar, 2019", "name": "Edgard Lazd", "age": 21, "occupation": "Solder", "role": "Major" }
+        { "id": 5, "createdAt": "16 Mar, 2019", "name": "Edgard Lazd", "age": 21, "occupation": "Soldier", "role": "Major" }
       ]
 }

src/translations/en.json

@@ -17,5 +17,18 @@
             "signinwithgoogle": "Sign In with Google",
             "signinanon": "Sign In Anonymously"
         }
+    },
+    "characters": {
+        "title": "Recent characters",
+        "tablehead": {
+            "date": "Date",
+            "name": "Name",
+            "age": "Age",
+            "occupation": "Occupation",
+            "role": "Role"
+        },
+        "button": {
+            "seemore": "See more characters"
+        }
     }
 }

yarn.lock

@@ -1941,6 +1941,17 @@
   dependencies:
     "@babel/runtime" "^7.4.4"
 
+"@material-ui/lab@^4.0.0-alpha.56":
+  version "4.0.0-alpha.56"
+  resolved "https://registry.yarnpkg.com/@material-ui/lab/-/lab-4.0.0-alpha.56.tgz#ff63080949b55b40625e056bbda05e130d216d34"
+  integrity sha512-xPlkK+z/6y/24ka4gVJgwPfoCF4RCh8dXb1BNE7MtF9bXEBLN/lBxNTK8VAa0qm3V2oinA6xtUIdcRh0aeRtVw==
+  dependencies:
+    "@babel/runtime" "^7.4.4"
+    "@material-ui/utils" "^4.10.2"
+    clsx "^1.0.4"
+    prop-types "^15.7.2"
+    react-is "^16.8.0"
+
 "@material-ui/styles@^4.10.0":
   version "4.10.0"
   resolved "https://registry.yarnpkg.com/@material-ui/styles/-/styles-4.10.0.tgz#2406dc23aa358217aa8cc772e6237bd7f0544071"