Merge pull request #44 from weaponsforge/dev

v1.0.6

client/components/counter/index.js

@@ -1,3 +1,4 @@
+import PropTypes from 'prop-types'
 import Link from 'next/link'
 import { useSelector } from 'react-redux'
 
@@ -58,4 +59,11 @@ function Counter (props) {
   )
 }
 
+Counter.propTypes = {
+  /** Increment the counter */
+  handleIncrement: PropTypes.func,
+  /** Decrement the counter */
+  handleDecrement: PropTypes.func
+}
+
 export default Counter

client/components/layout/appframe/index.js

@@ -0,0 +1,46 @@
+import Link from 'next/link'
+import PropTypes from 'prop-types'
+
+// Layout
+import AppContainer from '@/components/layout/appcontainer'
+import AppCard from '@/layout/appcard'
+import SimpleContainer from '@/layout/simplecontainer'
+
+function AppFrame ({
+  children,
+  navigation = [],
+  maxWidth = 'sm'
+}) {
+  return (
+    <AppContainer maxWidth={maxWidth}>
+      <AppCard>
+        { children }
+      </AppCard>
+
+      {navigation.length > 0 &&
+      <SimpleContainer>
+        {navigation.map((item, index) => {
+          const link = (index < navigation.length - 1)
+            ? <span key={index}>
+              <Link href={item.href}>{item.name}</Link> &nbsp; | &nbsp;
+            </span>
+            : <Link key={index} href={item.href}>{item.name}</Link>
+
+          return link
+        })}
+      </SimpleContainer>
+      }
+    </AppContainer>
+  )
+}
+
+AppFrame.propTypes = {
+  /** React/DOM elements */
+  children: PropTypes.node,
+  /** Array of navigation links i.e, [{ href: '/', name: 'Home' },... ] */
+  navigation: PropTypes.array,
+  /** MUI maxWidth xs, sm, md, lg, xl */
+  maxWidth: PropTypes.string
+}
+
+export default AppFrame

client/components/layout/apploading/index.js

@@ -1,3 +1,4 @@
+import PropTypes from 'prop-types'
 import Box from '@mui/material/Box'
 import CircularProgress from '@mui/material/CircularProgress'
 import Typography from '@mui/material/Typography'
@@ -26,4 +27,9 @@ function AppLoading ({ msgLoading = 'Loading...' }) {
   )
 }
 
+AppLoading.propTypes = {
+  /** Loading message text */
+  msgLoading: PropTypes.string
+}
+
 export default AppLoading

client/components/layout/appmodal/index.js

@@ -1,3 +1,4 @@
+import PropTypes from 'prop-types'
 import { useState, useEffect } from 'react'
 import Button from '@mui/material/Button'
 import Dialog from '@mui/material/Dialog'
@@ -79,4 +80,20 @@ function AppModal ({
   )
 }
 
+AppModal.propTypes = {
+  /** Toggle the modal display on/off */
+  isOpen: PropTypes.bool,
+  /** Modal window title */
+  titleText: PropTypes.string,
+  /** Modal content text */
+  contentText: PropTypes.string,
+  /** Indicates if the calling component is doing some async process.
+   * Disables buttons on the modal */
+  loading: PropTypes.bool,
+  /** Callback function for the cancel button */
+  handleCancelCB: PropTypes.func,
+  /** Callback function for the confirm button */
+  handleConfirmCB: PropTypes.func
+}
+
 export default AppModal

client/components/todo/index.js

@@ -1,6 +1,5 @@
 import { useSelector } from 'react-redux'
 import { useRouter } from 'next/router'
-import Link from 'next/link'
 
 // MUI
 import Box from '@mui/material/Box'
@@ -9,9 +8,7 @@ import Typography from '@mui/material/Typography'
 import { DataGrid } from '@mui/x-data-grid'
 
 // Layout
-import AppContainer from '@/components/layout/appcontainer'
-import AppCard from '@/layout/appcard'
-import SimpleContainer from '@/layout/simplecontainer'
+import AppFrame from '@/layout/appframe'
 
 function Todo () {
   const todos = useSelector((state) => state.todos)
@@ -24,72 +21,71 @@ function Todo () {
     { field: 'updatedAt', headerName: 'Updated', width: 180 }
   ]
 
+  const navigation = [{
+    href: '/', name: 'Home'
+  }]
+
   return (
-    <AppContainer maxWidth='md'>
-      <AppCard>
-        <h1>Todo List</h1>
+    <AppFrame
+      maxWidth='md'
+      navigation={navigation}
+    >
+      <h1>Todo List</h1>
+
+      <Box sx={{ height: '100%', width: '100%', textAlign: 'left' }}>
+        <Button
+          variant='outlined'
+          disableElevation
+          onClick={() => {
+            router.push('/todo/create')
+          }}
+          sx={{
+            marginBottom: (theme) => theme.spacing(2)
+          }}
+        >
+          Create Todo
+        </Button>
 
-        <Box sx={{ height: '100%', width: '100%', textAlign: 'left' }}>
-          <Button
-            variant='outlined'
-            disableElevation
-            onClick={() => {
-              router.push('/todo/create')
+        <Box sx={{ height: 450, width: '100%', textAlign: 'left' }}>
+          <DataGrid
+            rows={Object.values(todos.entities).map(x => ({
+              ...x,
+              createdAt: new Date(x.createdAt).toDateString(),
+              updatedAt: new Date(x.updatedAt).toDateString()
+            }))}
+            columns={columns}
+            getRowId={(row) => row._id}
+            disableDensitySelector
+            pageSize={7}
+            rowsPerPageOptions={[7, 10, 20]}
+            checkboxSelection
+            disableSelectionOnClick
+            loading={todos.loading === 'pending'}
+            rowHeight={48}
+            initialState={{
+              columns: {
+                columnVisibilityModel: { _id: false }
+              }
             }}
-            sx={{
-              marginBottom: (theme) => theme.spacing(2)
+            components={{
+              NoRowsOverlay: () => (
+                <Box
+                  sx={{ display: 'grid', width: '100%', height: '100%', placeContent: 'center' }}
+                  style={{ color: (todos.error !== '') ? 'red' : '#000' }}>
+                  {todos.error !== ''
+                    ? <Typography variant='caption'>{todos.error}</Typography>
+                    : <Typography variant='caption'>No rows available</Typography>
+                  }
+                </Box>
+              )
             }}
-          >
-            Create Todo
-          </Button>
-
-          <Box sx={{ height: 450, width: '100%', textAlign: 'left' }}>
-            <DataGrid
-              rows={Object.values(todos.entities).map(x => ({
-                ...x,
-                createdAt: new Date(x.createdAt).toDateString(),
-                updatedAt: new Date(x.updatedAt).toDateString()
-              }))}
-              columns={columns}
-              getRowId={(row) => row._id}
-              // autoHeight={rows.length >= 3}
-              disableDensitySelector
-              // pagination
-              pageSize={7}
-              rowsPerPageOptions={[3, 10, 20]}
-              checkboxSelection
-              disableSelectionOnClick
-              loading={todos.loading === 'pending'}
-              rowHeight={48}
-              initialState={{
-                columns: {
-                  columnVisibilityModel: { _id: false }
-                }
-              }}
-              components={{
-                NoRowsOverlay: () => (
-                  <Box
-                    sx={{ display: 'grid', width: '100%', height: '100%', placeContent: 'center' }}
-                    style={{ color: (todos.error !== '') ? 'red' : '#000' }}>
-                    {todos.error !== ''
-                      ? <Typography variant='caption'>{todos.error}</Typography>
-                      : <Typography variant='caption'>No rows available</Typography>
-                    }
-                  </Box>
-                )
-              }}
-              onRowClick={({ id }) => {
-                router.push(`/todo/${id}`)
-              }}
-            />
-          </Box>
+            onRowClick={({ id }) => {
+              router.push(`/todo/${id}`)
+            }}
+          />
         </Box>
-      </AppCard>
-
-      <SimpleContainer>
-        <Link href='/'>Home</Link>
-      </SimpleContainer>
-    </AppContainer>
+      </Box>
+    </AppFrame>
   )
 }