Merge pull request #32 from ciatph/dev

v1.0.8

Author: ciatph

client/.gitignore

@@ -21,4 +21,6 @@
 npm-debug.log*
 yarn-debug.log*
 yarn-error.log*
-.firebase
+.firebase
+firebase.config.dev.js
+firebase.config.prod.js

client/src/App.js

@@ -16,29 +16,10 @@ function App (props) {
         <Routes>
           {routes.filter(route => route.component)
             .map(({ path, isProtected, component: Component }, idx) => {
-              const SettledRoute = () => {
-                if (isProtected) {
-                  return <PrivateRoute
-                    Component={Component}
-                    isProtected={isProtected}
-                    idx={idx}
-                    {...props}
-                  />
-                } else {
-                  return <PublicRoute
-                    Component={Component}
-                    idx={idx}
-                    path={path}
-                    {...props}
-                  />
-                }
-              }
-
-              return <Route
-                key={idx}
-                path={path}
-                element={SettledRoute()}
-              />
+              const FinalRoute = (isProtected)
+                ? <PrivateRoute idx={idx} Component={Component} {...props} />
+                : <PublicRoute idx={idx} Component={Component} path={path} {...props} />
+              return <Route key={idx} path={path} element={FinalRoute} />
             })}
         </Routes>
       </Router>

client/src/components/dashboard/index.js

@@ -59,7 +59,7 @@ function Dashboard ({ currentUser, users, loadstatus, onBtnClick, onBtnEditClick
                 }
               </span>
             </div>
-            <Box>
+            <Box sx={styles.buttons}>
               <Button
                 variant='contained'
                 size='small'
@@ -68,7 +68,6 @@ function Dashboard ({ currentUser, users, loadstatus, onBtnClick, onBtnEditClick
               >Delete</Button>
 
               <Button
-                sx={styles.buttons}
                 variant='contained'
                 size='small'
                 disabled={loadstatus.isLoading}

client/src/components/dashboard/styles.js

@@ -5,6 +5,10 @@ const styles = {
   cardcontent: {
     width: '100%',
     display: 'flex',
+    flexDirection: {
+      xs: 'column',
+      sm: 'row'
+    },
     justifyContent: 'space-between',
     '& span': {
       fontSize: '14px'
@@ -13,8 +17,10 @@ const styles = {
   buttons: {
     display: 'flex',
     flexDirection: 'column',
-    marginTop: (theme) => theme.spacing(1),
-    width: '100%'
+    gap: (theme) => theme.spacing(1),
+    '& button': {
+      width: '100%'
+    }
   }
 }
 

client/src/containers/routes/privateroute/index.js

@@ -3,22 +3,19 @@ import { Navigate } from 'react-router-dom'
 
 // Redirect protected routes to /login if no user auth data is available
 // Display the protected routes if user auth data is available
-function PrivateRoute ({ Component, isProtected, idx, ...props }) {
+function PrivateRoute ({ Component, idx, ...props }) {
   if (!props.currentUser) {
-    return <Navigate
-      key={idx}
+    return <Navigate key={idx}
       to={{
         pathname: '/login',
         state: { from: props.location }
       }} />
-  } else {
-    return <Component {...props} />
   }
+  return <Component {...props} />
 }
 
 PrivateRoute.propTypes = {
   Component: PropTypes.elementType,
-  isProtected: PropTypes.bool,
   idx: PropTypes.number,
   currentUser: PropTypes.object,
   location: PropTypes.object

client/src/containers/routes/publicroute/index.js

@@ -6,18 +6,15 @@ import { Navigate } from 'react-router-dom'
 function PublicRoute ({ Component, idx, path, ...props }) {
   if (props.currentUser) {
     if (['/login'].includes(path)) {
-      return <Navigate
-        key={idx}
+      return <Navigate key={idx}
         to={{
           pathname: '/dashboard',
           state: { from: props.location }
         }} />
-    } else {
-      return <Component {...props} />
     }
-  } else {
     return <Component {...props} />
   }
+  return <Component {...props} />
 }
 
 PublicRoute.propTypes = {

server/.env.example

@@ -1,4 +1,4 @@
-ALLOWED_ORIGINS=http://localhost,http://mywebsite.com,http://yourwebsite.com
+ALLOWED_ORIGINS=http://localhost,http://localhost:3000,http://mywebsite.com,http://yourwebsite.com
 FIREBASE_SERVICE_ACC=YOUR-FIREBASE-PROJ-SERVICE-ACCOUNT-JSON-CREDENTIALS-ONE-LINER-NO-SPACES
 FIREBASE_PRIVATE_KEY=PRIVATE-KEY-FROM-FIREBASE-SERVICE-ACCOUNT-JSON-WITH-DOUBLE-QUOTES
 EMAIL_WHITELIST=[email protected]

server/.gitignore

@@ -1,4 +1,6 @@
 node_modules/
+src/public/
 .env
+.env.dev
+.env.prod
 .vscode
-src/public/

server/src/controllers/user.js

@@ -6,11 +6,8 @@ const {
   listusers
 } = require('../classes/user')
 
-const { EMAIL_WHITELIST } = require('../utils/constants')
-
-module.exports.createUser = async (req, res) => {
+module.exports.createUser = async (req, res, next) => {
   const { email, displayname, account_level, emailverified, disabled } = req.body
-
   if (!email || !displayname || !account_level) {
     return res.status(500).send('Missing parameter/s.')
   }
@@ -22,12 +19,12 @@ module.exports.createUser = async (req, res) => {
 
     return res.status(200).json(user)
   } catch (err) {
-    return res.status(500).send(err.message)
+    next(new Error(err))
   }
 }
 
 // Update a user's information by email or UID
-module.exports.updateUser = async (req, res) => {
+module.exports.updateUser = async (req, res, next) => {
   const { uid } = req.body
 
   if (!uid) {
@@ -38,12 +35,12 @@ module.exports.updateUser = async (req, res) => {
     const user = await updateuser(req.body)
     return res.status(200).json(user)
   } catch (err) {
-    return res.status(500).send(err.message)
+    next(new Error(err))
   }
 }
 
 // Delete a user by UID
-module.exports.deleteUser = async (req, res) => {
+module.exports.deleteUser = async (req, res, next) => {
   const { uid } = req.params
 
   if (!uid) {
@@ -56,12 +53,12 @@ module.exports.deleteUser = async (req, res) => {
       message: `User ${uid} deleted.`
     })
   } catch (err) {
-    return res.status(500).send(err.message)
+    next(new Error(err))
   }
 }
 
 // Get user information by user's email or UID
-module.exports.getUser = async (req, res) => {
+module.exports.getUser = async (req, res, next) => {
   const { uid, email } = req.query
 
   if (!uid && !email) {
@@ -72,16 +69,16 @@ module.exports.getUser = async (req, res) => {
     const user = await getuser({ uid, email })
     return res.status(200).json(user)
   } catch (err) {
-    return res.status(500).send(err.message)
+    next(new Error(err))
   }
 }
 
 // List all users
-module.exports.listUsers = async (req, res) => {
+module.exports.listUsers = async (req, res, next) => {
   try {
     const users = await listusers()
     return res.status(200).json(users)
   } catch (err) {
-    return res.status(500).send(err.message)
+    next(new Error(err))
   }
 }

server/src/index.js

@@ -6,20 +6,22 @@ const app = express()
 const PORT = process.env.PORT || 3001
 
 const controllers = require('./controllers')
-const { whitelist } = require('./utils/whitelist-cors')
+const { corsOptions } = require('./utils/whitelist-cors')
 
 app.use(express.json())
 app.use(express.urlencoded({ extended: false }))
 app.use(cookieParser())
 app.use(express.static(path.resolve(__dirname, 'public')))
-app.use(cors({
-  origin: whitelist
-}))
+app.use(cors(corsOptions))
 
 app.use('/api', controllers)
 
 app.get('*', (req, res) => {
-  res.sendFile(path.resolve(__dirname, 'public', 'index.html'))
+  return res.sendFile(path.resolve(__dirname, 'public', 'index.html'))
+})
+
+app.use((err, req, res, next) => {
+  res.status(500).send(err.message)
 })
 
 app.listen(PORT, () => {