update dependencies

awran5 · Sep 12, 2021 · 207638d · 207638d
1 parent e8124ff
commit 207638d
Show file tree

Hide file tree

Showing 16 changed files with 3,072 additions and 2,854 deletions.
diff --git a/.editorconfig b/.editorconfig
@@ -0,0 +1,9 @@
+root = true
+
+[*]
+charset = utf-8
+indent_style = space
+indent_size = 2
+end_of_line = lf
+insert_final_newline = true
+trim_trailing_whitespace = true
diff --git a/.eslintrc.js b/.eslintrc.js
@@ -0,0 +1,50 @@
+module.exports = {
+  env: {
+    browser: true,
+    es2021: true
+  },
+  extends: ['plugin:react/recommended', 'plugin:react-hooks/recommended', 'airbnb', 'prettier'],
+  parser: '@typescript-eslint/parser',
+  parserOptions: {
+    ecmaFeatures: {
+      jsx: true
+    },
+    ecmaVersion: 12,
+    sourceType: 'module'
+  },
+  plugins: ['react', '@typescript-eslint'],
+  rules: {
+    'react/jsx-filename-extension': [1, { extensions: ['.js', '.jsx', '.ts', '.tsx'] }],
+    'import/extensions': [
+      'error',
+      'always',
+      {
+        js: 'never',
+        jsx: 'never',
+        ts: 'never',
+        tsx: 'never'
+      }
+    ],
+    'no-console': 0,
+    'import/no-extraneous-dependencies': ['error', { devDependencies: true }],
+    'no-use-before-define': 'off',
+    'no-unused-vars': 'warn',
+    'import/prefer-default-export': 0,
+    'no-shadow': 1,
+    'prefer-const': 1,
+    'prefer-spread': 1,
+    'no-unused-expressions': ['error', { allowShortCircuit: true, allowTernary: true }],
+    'no-undef': 0,
+    'arrow-body-style': 0,
+    'react/jsx-fragments': 0,
+    'react/prop-types': 0,
+    'react/require-default-props': 0
+  },
+  settings: {
+    'import/resolver': {
+      node: {
+        extensions: ['.js', '.jsx', '.ts', '.tsx']
+      }
+    }
+  }
+}
diff --git a/.prettierrc b/.prettierrc
@@ -0,0 +1,11 @@
+{
+  "singleQuote": true,
+  "jsxSingleQuote": true,
+  "semi": false,
+  "tabWidth": 2,
+  "printWidth": 120,
+  "bracketSpacing": true,
+  "jsxBracketSameLine": false,
+  "arrowParens": "always",
+  "trailingComma": "none"
+}
diff --git a/LICENSE b/LICENSE
@@ -1,6 +1,6 @@
 MIT License
 
-Copyright (c) 2020 Ahmed Khalil 
+Copyright (c) 2020-present awran5
 
 Permission is hereby granted, free of charge, to any person obtaining a copy
 of this software and associated documentation files (the "Software"), to deal
@@ -18,4 +18,4 @@ FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
 AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
 LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
 OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
-SOFTWARE.
+SOFTWARE.
diff --git a/package.json b/package.json
@@ -1,35 +1,28 @@
 {
   "name": "react-firebase-dashboard",
-  "version": "0.1.0",
+  "version": "0.2.0",
   "private": true,
   "dependencies": {
-    "@material-ui/core": "^4.11.0",
-    "@material-ui/icons": "^4.9.1",
-    "@types/node": "^14.14.7",
-    "@types/react": "^16.9.56",
-    "@types/react-dom": "^16.9.9",
-    "@types/react-router-dom": "^5.1.6",
-    "firebase": "^8.0.2",
-    "react": "^17.0.1",
-    "react-dom": "^17.0.1",
-    "react-firebase-hooks": "^2.2.0",
-    "react-router-dom": "^5.2.0",
-    "react-scripts": "4.0.0",
-    "typescript": "^4.0.5"
+    "@material-ui/core": "^4.12.3",
+    "@material-ui/icons": "^4.11.2",
+    "@types/node": "^16.9.1",
+    "@types/react": "^17.0.20",
+    "@types/react-dom": "^17.0.9",
+    "@types/react-router-dom": "^5.1.8",
+    "clsx": "^1.1.1",
+    "firebase": "^9.0.2",
+    "react": "^17.0.2",
+    "react-dom": "^17.0.2",
+    "react-firebase-hooks": "^3.0.4",
+    "react-router-dom": "^5.3.0",
+    "react-scripts": "4.0.3",
+    "typescript": "^4.4.3"
   },
   "scripts": {
     "start": "react-scripts start",
     "build": "react-scripts build",
-    "test": "react-scripts test",
     "eject": "react-scripts eject"
   },
-  "eslintConfig": {
-    "extends": "react-app",
-    "rules": {
-      "react-hooks/rules-of-hooks": "error",
-      "react-hooks/exhaustive-deps": "warn"
-    }
-  },
   "browserslist": {
     "production": [
       ">0.2%",
@@ -41,5 +34,18 @@
       "last 1 firefox version",
       "last 1 safari version"
     ]
+  },
+  "devDependencies": {
+    "@typescript-eslint/eslint-plugin": "^4.31.0",
+    "@typescript-eslint/parser": "^4.31.0",
+    "eslint": "^7.32.0",
+    "eslint-config-airbnb": "^18.2.1",
+    "eslint-config-prettier": "^8.3.0",
+    "eslint-plugin-import": "^2.24.2",
+    "eslint-plugin-jsx-a11y": "^6.4.1",
+    "eslint-plugin-prettier": "^4.0.0",
+    "eslint-plugin-react": "^7.25.1",
+    "eslint-plugin-react-hooks": "^4.2.0",
+    "prettier": "^2.4.0"
   }
 }
diff --git a/src/App.css b/src/App.css
@@ -1,20 +1,3 @@
-*,
-::after,
-::before {
-  box-sizing: border-box;
-}
-body {
-  margin: 0;
-  font-family: Roboto, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, 'Noto Sans',
-    sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji';
-  font-size: 0.9375rem;
-  font-weight: 400;
-  line-height: 1.6;
-  color: #7f808c;
-  text-align: left;
-  background-color: #fff;
-}
-
 .loader {
   width: 100vw;
   height: 100vh;

diff --git a/src/App.tsx b/src/App.tsx
@@ -1,16 +1,16 @@
-import React, { useContext } from 'react'
-import { AppContext } from './Context'
+import React from 'react'
+import { CssBaseline } from '@material-ui/core'
 import { useAuthState } from 'react-firebase-hooks/auth'
-
 import CircularProgress from '@material-ui/core/CircularProgress'
+
 import SignIn from './Components/SignIn'
 import Dashboard from './Components/Dashboard'
 
+import { auth } from './Firebase'
 import './App.css'
 
 const App = () => {
-  const { Auth } = useContext(AppContext)
-  const [user, loading, error] = useAuthState(Auth)
+  const [user, loading, error] = useAuthState(auth)
   if (error) return <h1>Error: {error}</h1>
   if (loading)
     return (
@@ -19,7 +19,12 @@ const App = () => {
       </div>
     )
 
-  return <div className='App'>{user ? <Dashboard /> : <SignIn />}</div>
+  return (
+    <div className='App'>
+      <CssBaseline />
+      {user ? <Dashboard /> : <SignIn />}
+    </div>
+  )
 }
 
 export default App
diff --git a/src/Components/Dashboard.tsx b/src/Components/Dashboard.tsx
@@ -1,9 +1,7 @@
-import React, { useContext, useState } from 'react'
-import { AppContext } from '../Context'
+import React, { useState } from 'react'
+import { BrowserRouter as Router, Switch, Route, Redirect } from 'react-router-dom'
 import { useAuthState } from 'react-firebase-hooks/auth'
-import clsx from 'clsx'
 import { makeStyles } from '@material-ui/core/styles'
-import CssBaseline from '@material-ui/core/CssBaseline'
 import Drawer from '@material-ui/core/Drawer'
 import Box from '@material-ui/core/Box'
 import AppBar from '@material-ui/core/AppBar'
@@ -20,107 +18,109 @@ import Grid from '@material-ui/core/Grid'
 import MenuIcon from '@material-ui/icons/Menu'
 import ChevronLeftIcon from '@material-ui/icons/ChevronLeft'
 import NotificationsIcon from '@material-ui/icons/Notifications'
+import clsx from 'clsx'
 import { mainListItems, secondaryListItems } from './listItems'
 import SignOut from './SignOut'
 import Footer from './Footer'
 import Title from './Title'
-import { BrowserRouter as Router, Switch, Route, Redirect } from 'react-router-dom'
+
+import { auth } from '../Firebase'
 
 const drawerWidth = 240
 
 const useStyles = makeStyles((theme) => ({
   root: {
-    display: 'flex',
+    display: 'flex'
   },
   toolbar: {
-    paddingRight: 24, // keep right padding when drawer closed
+    paddingRight: 24 // keep right padding when drawer closed
   },
   toolbarIcon: {
     display: 'flex',
     alignItems: 'center',
     justifyContent: 'flex-end',
     padding: '0 8px',
-    ...theme.mixins.toolbar,
+    ...theme.mixins.toolbar
   },
   appBar: {
     zIndex: theme.zIndex.drawer + 1,
     transition: theme.transitions.create(['width', 'margin'], {
       easing: theme.transitions.easing.sharp,
-      duration: theme.transitions.duration.leavingScreen,
-    }),
+      duration: theme.transitions.duration.leavingScreen
+    })
   },
   appBarShift: {
     marginLeft: drawerWidth,
     width: `calc(100% - ${drawerWidth}px)`,
     transition: theme.transitions.create(['width', 'margin'], {
       easing: theme.transitions.easing.sharp,
-      duration: theme.transitions.duration.enteringScreen,
-    }),
+      duration: theme.transitions.duration.enteringScreen
+    })
   },
   menuButton: {
-    marginRight: 36,
+    marginRight: 36
   },
   menuButtonHidden: {
-    display: 'none',
+    display: 'none'
   },
   title: {
-    flexGrow: 1,
+    flexGrow: 1
   },
   button: {
     margin: theme.spacing(1, 1.5),
     borderColor: '#fff',
-    color: '#fff',
+    color: '#fff'
   },
   drawerPaper: {
     position: 'relative',
     whiteSpace: 'nowrap',
     width: drawerWidth,
     transition: theme.transitions.create('width', {
       easing: theme.transitions.easing.sharp,
-      duration: theme.transitions.duration.enteringScreen,
-    }),
+      duration: theme.transitions.duration.enteringScreen
+    })
   },
   drawerPaperClose: {
     overflowX: 'hidden',
     transition: theme.transitions.create('width', {
       easing: theme.transitions.easing.sharp,
-      duration: theme.transitions.duration.leavingScreen,
+      duration: theme.transitions.duration.leavingScreen
     }),
     width: theme.spacing(7),
     [theme.breakpoints.up('sm')]: {
-      width: theme.spacing(9),
-    },
+      width: theme.spacing(9)
+    }
   },
   appBarSpacer: theme.mixins.toolbar,
   content: {
     flexGrow: 1,
     height: '100vh',
-    overflow: 'auto',
+    overflow: 'auto'
   },
   container: {
     paddingTop: theme.spacing(4),
-    paddingBottom: theme.spacing(4),
+    paddingBottom: theme.spacing(4)
   },
   paper: {
     padding: theme.spacing(2),
     display: 'flex',
     overflow: 'auto',
-    flexDirection: 'column',
+    flexDirection: 'column'
   },
   fixedHeight: {
-    height: 240,
+    height: 240
   },
   avatar: {
     width: theme.spacing(4),
     height: theme.spacing(4),
-    margin: theme.spacing(0, 3),
-  },
+    margin: theme.spacing(0, 3)
+  }
 }))
 
 export default function Dashboard() {
   const classes = useStyles()
-  const { Auth } = useContext(AppContext)
-  const [currentUser] = useAuthState(Auth)
+
+  const [currentUser] = useAuthState(auth)
   const [open, setOpen] = useState(true)
 
   const fixedHeightPaper = clsx(classes.paper, classes.fixedHeight)
@@ -129,7 +129,6 @@ export default function Dashboard() {
   return (
     <Router>
       <div className={classes.root}>
-        <CssBaseline />
         <AppBar position='absolute' className={clsx(classes.appBar, open && classes.appBarShift)}>
           <Toolbar className={classes.toolbar}>
             <IconButton
@@ -157,7 +156,7 @@ export default function Dashboard() {
         <Drawer
           variant='permanent'
           classes={{
-            paper: clsx(classes.drawerPaper, !open && classes.drawerPaperClose),
+            paper: clsx(classes.drawerPaper, !open && classes.drawerPaperClose)
           }}
           open={open}
         >

diff --git a/src/Components/Footer.tsx b/src/Components/Footer.tsx
@@ -10,7 +10,6 @@ const Footer: FC<{}> = () => {
         Your Website
       </Link>{' '}
       {new Date().getFullYear()}
-      {'.'}
     </Typography>
   )
 }