Merge pull request #2 from mrowe009/admin-overhaul

Admin overhaul

.prettierrc

@@ -1,5 +1,7 @@
 {
-  semi: false,
+  "semi": false,
   "printWidth": 120,
-  "singleQuote": true
+  "singleQuote": true,
+  "trailingComma": "none",
+  "arrowParens": "avoid"
 }

README.md

@@ -1,3 +1,6 @@
 ### TODO:
+
 - (Feature): Enhance toolbar to scroll away animate
-- (Feature): Edit transactions - long hold
+- (Feature): Edit transactions - long hold
+- (Feature): Auto refresh user info when user added into group
+- (Bug): Log user out when session expires during graphql request

package.json

@@ -10,6 +10,9 @@
     "android:copy": "ionic capacitor copy android",
     "android:initial": "ionic capacitor add android"
   },
+  "hooks": {
+    "pre-commit": "pretty-quick --staged"
+  },
   "repository": {
     "type": "git",
     "url": "git+https://github.com/mrowe009/FinanceApp.git"
@@ -46,6 +49,7 @@
   },
   "devDependencies": {
     "@capacitor/cli": "2.0.1",
+    "husky": "^4.2.5",
     "prettier": "^2.0.4",
     "pretty-quick": "^2.0.1"
   },

src/App.js

@@ -29,6 +29,9 @@ const client = new ApolloClient({
       }
     })
   }
+  // onError: ({ graphQLErrors }) => {
+  //   // handle when session expires during GraphQL request
+  // }
 })
 
 const App = () => (

src/components/AuthorizedRoute.js

@@ -9,13 +9,13 @@ import { useAuthentication, useUser } from 'modules/authentication'
 
 export const AuthorizedRoute = ({ path, admin, component }) => {
   const { isAuthenticated } = useAuthentication()
-  const { role } = useUser()
+  const { isAdmin } = useUser()
 
   if (!isAuthenticated) {
     return <Redirect to={routes.login} />
   }
 
-  if (admin && role !== 'ADMIN') {
+  if (admin && !isAdmin) {
     return <Redirect to={routes.home} />
   }
 

src/components/FullPageLoader.js

@@ -51,4 +51,4 @@ export const RelativeLoader = () => {
       </div>
     </IonContent>
   )
-}
+}

src/components/Transaction.js

@@ -10,7 +10,7 @@ const useTransactionStyles = createUseStyles(theme => ({
   transaction: {
     marginBottom: theme.spacing(2),
     borderRadius: theme.spacing(1),
-    boxShadow: '0px 2px 5px -2px var(--black)',
+    boxShadow: '0px 2px 5px -2px var(--black)'
   },
   label: {
     display: 'flex',
@@ -41,14 +41,18 @@ export const TransactionEntry = ({ id, amount, description, createdAt, onCheckbo
       <IonLabel>
         <span className={classes.label}>
           <span>
-            <p>{description || (<span color="textSecondary">(blank)</span>)}</p>
+            <p>{description || <span color="textSecondary">(blank)</span>}</p>
             <p color="textSecondary" variant="caption">
               {formatDate(createdAt)}
             </p>
           </span>
           <span>
             <p>${(amount / 100).toFixed(2)}</p>
-            {group && <p color="textSecondary" variant="caption" align="right">group</p>}
+            {group && (
+              <p color="textSecondary" variant="caption" align="right">
+                group
+              </p>
+            )}
           </span>
         </span>
       </IonLabel>

src/elements/Input.js

@@ -37,7 +37,9 @@ const useAutoFocus = autoFocus => {
 export const Input = ({ className, onChange, onBlur, autoFocus, ...rest }) => {
   const classes = useInputStyles()
   const element = useAutoFocus(autoFocus)
-  return <input ref={element} className={clsx(className, classes.input)} onBlur={onBlur} onChange={onChange} {...rest} />
+  return (
+    <input ref={element} className={clsx(className, classes.input)} onBlur={onBlur} onChange={onChange} {...rest} />
+  )
 }
 
 Input.propTypes = {
@@ -63,7 +65,14 @@ export const MaskedInput = ({ className, onChange, onBlur, format, value, autoFo
   )
 
   return (
-    <input ref={element} className={clsx(className, classes.input)} onBlur={onBlur} onChange={_onChange} value={_value} {...rest} />
+    <input
+      ref={element}
+      className={clsx(className, classes.input)}
+      onBlur={onBlur}
+      onChange={_onChange}
+      value={_value}
+      {...rest}
+    />
   )
 }
 

src/modules/admin/util.js

@@ -33,4 +33,4 @@ export const useUsersTabStyles = createUseStyles(theme => ({
   wrapper: {
     margin: theme.spacing(2, 2, 0)
   }
-}))
+}))