cra-template-econsor - npm Package Compare versions

Comparing version 0.1.5 to 0.1.6

package.json

 {
   "name": "cra-template-econsor",
-  "version": "0.1.5",
+  "version": "0.1.6",
   "keywords": [
@@ -5,0 +5,0 @@ "react",

template.json

@@ -30,3 +30,4 @@ {
       "commander": "^7.2.0",
-      "inquirer": "^8.1.1"
+      "inquirer": "^8.1.1",
+      "notistack": "^1.0.9"
     },
@@ -33,0 +34,0 @@ "eslintConfig": {

template/crp.config.js

@@ -1,1 +0,1 @@
-module.exports = [{"path":"/src/features/HelloWorlds/links.js","data":"module.exports = [\n\t{\n\t\tpath: '/src/config/store.ts',\n\t\taction: (data, replace) => {\n\t\t\tdata = data.replace(\n\t\t\t\t/\\nexport\\sconst\\sstore/,\n\t\t\t\treplace('import helloWorlds from \\'../features/HelloWorlds/logic/reducer\\';\\n\\nexport const store'),\n\t\t\t);\n\t\t\tdata = data.replace(/\\s},/, replace(', helloWorlds },'));\n\t\t\treturn data;\n\t\t},\n\t},\n\t{\n\t\tpath: '/src/config/router.tsx',\n\t\taction: (data, replace) => {\n\t\t\tdata = data.replace(\n\t\t\t\t/\\nfunction\\sRouter\\(\\) {/,\n\t\t\t\treplace('import HelloWorlds from \\'../features/HelloWorlds/views/HelloWorlds\\';\\n\\nfunction Router() {'),\n\t\t\t);\n\t\t\tdata = data.replace(\n\t\t\t\t/<\\/Switch>/,\n\t\t\t\treplace('\\t<Route path=\"/hello-worlds\" exact>\\n\\t\\t\\t\\t\\t<HelloWorlds />\\n\\t\\t\\t\\t</Route>\\n\\t\\t\\t</Switch>'),\n\t\t\t);\n\t\t\treturn data;\n\t\t},\n\t},\n\t{\n\t\tpath: '/src/layout/MainLayout.tsx',\n\t\taction: (data, replace) => {\n\t\t\tdata = data.replace(\n\t\t\t\t/<\\/List>/,\n\t\t\t\treplace(\n\t\t\t\t\t'\\t<ListItem button selected={/\\\\/hello-worlds\\\\/?/.test(location.pathname)} onClick={() => history.push(\\'/hello-worlds\\')}>\\n\\t\\t\\t\\t\\t<ListItemIcon>\\n\\t\\t\\t\\t\\t\\t<InboxIcon />\\n\\t\\t\\t\\t\\t</ListItemIcon>\\n\\t\\t\\t\\t\\t<ListItemText primary=\"Hello Worlds\" />\\n\\t\\t\\t\\t</ListItem>\\n\\t\\t\\t</List>',\n\t\t\t\t),\n\t\t\t);\n\t\t\treturn data;\n\t\t},\n\t},\n];\n"},{"path":"/src/features/HelloWorlds/logic/api.ts","data":"import { createAsyncThunk } from '@reduxjs/toolkit';\nimport axios from 'axios';\nimport { baseURL, HelloWorld } from '../../../config/api';\n\nconst url = baseURL.concat('/hello-worlds');\n\nexport const fetchHelloWorlds = createAsyncThunk('helloWorlds/fetchHelloWorlds', async () => {\n\ttry {\n\t\treturn (await axios(url, { method: 'GET' })).data as HelloWorld[];\n\t} catch (e) {\n\t\tconsole.log(e);\n\t}\n});\n\nexport const createHelloWorld = createAsyncThunk('helloWorlds/createHelloWorld', async (data: any) => {\n\ttry {\n\t\treturn (await axios(url, { method: 'POST', data })).data as HelloWorld;\n\t} catch (e) {\n\t\tconsole.log(e);\n\t}\n});\n\nexport const updateHelloWorld = createAsyncThunk('helloWorlds/updateHelloWorld', async (data: any) => {\n\ttry {\n\t\treturn (await axios(url.concat(`/${data.id}`), { method: 'PUT', data })).data as HelloWorld;\n\t} catch (e) {\n\t\tconsole.log(e);\n\t}\n});\n\nexport const deleteHelloWorld = createAsyncThunk('helloWorlds/deleteHelloWorld', async (id: number) => {\n\ttry {\n\t\treturn (await axios(url.concat(`/${id}`), { method: 'DELETE' })).data.id as number;\n\t} catch (e) {\n\t\tconsole.log(e);\n\t}\n});\n"},{"path":"/src/features/HelloWorlds/logic/reducer.ts","data":"import { createReducer } from '@reduxjs/toolkit';\nimport { State } from './types';\nimport { createHelloWorld, deleteHelloWorld, fetchHelloWorlds, updateHelloWorld } from './api';\n\nconst initialState: State = {\n\thelloWorlds: [],\n};\n\nconst helloWorlds = createReducer(initialState, builder => builder\n\t.addCase(fetchHelloWorlds.fulfilled, (state, action) => {\n\t\tstate.helloWorlds = action.payload!;\n\t})\n\t.addCase(createHelloWorld.fulfilled, (state, action) => {\n\t\tstate.helloWorlds.push(action.payload!);\n\t})\n\t.addCase(updateHelloWorld.fulfilled, (state, action) => {\n\t\tconst index = state.helloWorlds.findIndex(helloWorld => helloWorld.id === action.payload!.id);\n\t\tstate.helloWorlds[index] = action.payload!;\n\t})\n\t.addCase(deleteHelloWorld.fulfilled, (state, action) => {\n\t\tstate.helloWorlds = state.helloWorlds.filter(helloWorld => helloWorld.id !== action.payload);\n\t}),\n);\n\nexport default helloWorlds;\n"},{"path":"/src/features/HelloWorlds/logic/types.ts","data":"import { HelloWorld } from '../../../config/api';\n\nexport interface State {\n\thelloWorlds: HelloWorld[];\n}\n"},{"path":"/src/features/HelloWorlds/views/CreateHelloWorldDialog.tsx","data":"import { useCallback, useMemo } from 'react';\nimport { Dialog, DialogTitle } from '@material-ui/core';\nimport { FormRenderer } from '@data-driven-forms/react-form-renderer';\nimport { FormTemplate } from '@data-driven-forms/mui-component-mapper';\nimport componentMapper from '@data-driven-forms/mui-component-mapper/component-mapper';\nimport { useDispatch } from '../../../config/store';\nimport { HelloWorld } from '../../../config/api';\nimport { helloWorldSchema } from '../../../config/schemas';\nimport { createHelloWorld, updateHelloWorld } from '../logic/api';\n\ninterface Props {\n\tisDialogOpen: boolean;\n\thandleCloseDialog: () => void;\n\tediting?: boolean;\n\thelloWorld?: HelloWorld;\n}\n\nfunction CreateHelloWorldDialog({ isDialogOpen, handleCloseDialog, editing, helloWorld }: Props) {\n\tconst dispatch = useDispatch();\n\n\tconst schema = useMemo(() => {\n\t\tif (!helloWorld) return helloWorldSchema;\n\t\treturn {\n\t\t\tfields: helloWorldSchema.fields.map((field) => ({\n\t\t\t\t...field,\n\t\t\t\tinitialValue: helloWorld[field.name as keyof HelloWorld],\n\t\t\t})),\n\t\t};\n\t}, [helloWorld]);\n\n\n\tconst handleSubmit = useCallback(data => {\n\t\thandleCloseDialog();\n\t\tif (editing) dispatch(updateHelloWorld({ ...helloWorld, ...data }));\n\t\telse dispatch(createHelloWorld(data));\n\t}, [handleCloseDialog, editing, helloWorld, dispatch]);\n\n\treturn (\n\t\t<Dialog open={isDialogOpen} onClose={handleCloseDialog}>\n\t\t\t<DialogTitle>{editing ? 'Update Hello World' : 'Create New Hello World'}</DialogTitle>\n\t\t\t<div style={{ marginLeft: 24, marginRight: 10, marginBottom: 18 }}>\n\t\t\t\t<FormRenderer\n\t\t\t\t\tschema={schema}\n\t\t\t\t\tcomponentMapper={componentMapper}\n\t\t\t\t\tFormTemplate={FormTemplate}\n\t\t\t\t\tonSubmit={handleSubmit}\n\t\t\t\t\tonCancel={handleCloseDialog}\n\t\t\t\t/>\n\t\t\t</div>\n\t\t</Dialog>\n\t);\n}\n\nexport default CreateHelloWorldDialog;\n"},{"path":"/src/features/HelloWorlds/views/HelloWorldRow.tsx","data":"import { useState } from 'react';\nimport Button from '@material-ui/core/Button';\nimport Dialog from '@material-ui/core/Dialog';\nimport DialogActions from '@material-ui/core/DialogActions';\nimport DialogContent from '@material-ui/core/DialogContent';\nimport DialogContentText from '@material-ui/core/DialogContentText';\nimport DialogTitle from '@material-ui/core/DialogTitle';\nimport IconButton from '@material-ui/core/IconButton';\nimport TableCell from '@material-ui/core/TableCell';\nimport TableRow from '@material-ui/core/TableRow';\nimport Edit from '@material-ui/icons/Edit';\nimport Delete from '@material-ui/icons/Delete';\nimport { useStyles } from './HelloWorlds';\nimport CreateHelloWorldDialog from './CreateHelloWorldDialog';\nimport { useDispatch } from '../../../config/store';\nimport { HelloWorld } from '../../../config/api';\nimport { deleteHelloWorld } from '../logic/api';\nimport { helloWorldSchema } from '../../../config/schemas';\n\ninterface Props {\n\thelloWorld: HelloWorld;\n}\n\nfunction HelloWorldRow({ helloWorld }: Props) {\n\tconst dispatch = useDispatch();\n\n\tconst classes = useStyles();\n\tconst [isEditDialogOpen, setIsEditDialogOpen] = useState(false);\n\tconst [isDeleteDialogOpen, setIsDeleteDialogOpen] = useState(false);\n\n\tconst confirmDeleteDialog = (\n\t\t<Dialog open={isDeleteDialogOpen} onClose={() => setIsDeleteDialogOpen(false)}>\n\t\t\t<DialogTitle>Confirm Delete</DialogTitle>\n\t\t\t<DialogContent>\n\t\t\t\t<DialogContentText id=\"alert-dialog-description\">\n\t\t\t\t\tAre you sure you want to delete this record?\n\t\t\t\t</DialogContentText>\n\t\t\t</DialogContent>\n\t\t\t<DialogActions>\n\t\t\t\t<Button onClick={() => setIsDeleteDialogOpen(false)} color=\"primary\">\n\t\t\t\t\tCancel\n\t\t\t\t</Button>\n\t\t\t\t<Button onClick={() => dispatch(deleteHelloWorld(helloWorld.id))} color=\"primary\" autoFocus>\n\t\t\t\t\tDelete\n\t\t\t\t</Button>\n\t\t\t</DialogActions>\n\t\t</Dialog>\n\t);\n\n\treturn (\n\t\t<>\n\t\t\t<TableRow>\n\t\t\t\t{helloWorldSchema.fields.map(field => (\n\t\t\t\t\t<TableCell>{helloWorld[field.name as keyof HelloWorld]}</TableCell>\n\t\t\t\t))}\n\t\t\t\t<TableCell padding=\"none\" align=\"right\">\n\t\t\t\t\t<IconButton className={classes.action} onClick={() => setIsEditDialogOpen(true)}>\n\t\t\t\t\t\t<Edit />\n\t\t\t\t\t</IconButton>\n\t\t\t\t\t<IconButton className={classes.action} onClick={() => setIsDeleteDialogOpen(true)}>\n\t\t\t\t\t\t<Delete />\n\t\t\t\t\t</IconButton>\n\t\t\t\t</TableCell>\n\t\t\t</TableRow>\n\n\t\t\t<CreateHelloWorldDialog\n\t\t\t\tisDialogOpen={isEditDialogOpen}\n\t\t\t\thandleCloseDialog={() => setIsEditDialogOpen(false)}\n\t\t\t\tediting\n\t\t\t\thelloWorld={helloWorld}\n\t\t\t/>\n\n\t\t\t{confirmDeleteDialog}\n\t\t</>\n\t);\n}\n\nexport default HelloWorldRow;\n"},{"path":"/src/features/HelloWorlds/views/HelloWorlds.tsx","data":"import { useEffect, useState } from 'react';\nimport Fab from '@material-ui/core/Fab';\nimport Paper from '@material-ui/core/Paper';\nimport Table from '@material-ui/core/Table';\nimport TableBody from '@material-ui/core/TableBody';\nimport TableCell from '@material-ui/core/TableCell';\nimport TableContainer from '@material-ui/core/TableContainer';\nimport TableHead from '@material-ui/core/TableHead';\nimport TableRow from '@material-ui/core/TableRow';\nimport Add from '@material-ui/icons/Add';\nimport { makeStyles } from '@material-ui/core/styles';\nimport MainLayout from '../../../layout/MainLayout';\nimport CreateHelloWorldDialog from './CreateHelloWorldDialog';\nimport HelloWorldRow from './HelloWorldRow';\nimport { useDispatch, useSelector } from '../../../config/store';\nimport { helloWorldSchema } from '../../../config/schemas';\nimport { fetchHelloWorlds } from '../logic/api';\n\nexport const useStyles = makeStyles((theme) => ({\n\tcontainer: {\n\t\tminWidth: 650,\n\t},\n\tfab: {\n\t\tposition: 'fixed',\n\t\tbottom: theme.spacing(4),\n\t\tright: theme.spacing(4),\n\t},\n\taction: {\n\t\tmarginRight: 10,\n\t},\n}));\n\nfunction HelloWorlds() {\n\tconst dispatch = useDispatch();\n\n\tuseEffect(() => {\n\t\tdispatch(fetchHelloWorlds());\n\t}, [dispatch]);\n\n\tconst helloWorlds = useSelector(state => state.helloWorlds.helloWorlds);\n\n\tconst classes = useStyles();\n\tconst [isCreateDialogOpen, setIsCreateDialogOpen] = useState(false);\n\n\treturn (\n\t\t<MainLayout title=\"Hello Worlds\" authorize=\"authorized\">\n\t\t\t<TableContainer component={Paper}>\n\t\t\t\t<Table className={classes.container}>\n\t\t\t\t\t<TableHead>\n\t\t\t\t\t\t<TableRow>\n\t\t\t\t\t\t\t{helloWorldSchema.fields.map(field => (\n\t\t\t\t\t\t\t\t<TableCell>{field.label}</TableCell>\n\t\t\t\t\t\t\t))}\n\t\t\t\t\t\t\t<TableCell />\n\t\t\t\t\t\t</TableRow>\n\t\t\t\t\t</TableHead>\n\t\t\t\t\t<TableBody>\n\t\t\t\t\t\t{helloWorlds.map(helloWorld => (\n\t\t\t\t\t\t\t<HelloWorldRow key={helloWorld.id} helloWorld={helloWorld} />\n\t\t\t\t\t\t))}\n\t\t\t\t\t</TableBody>\n\t\t\t\t</Table>\n\t\t\t</TableContainer>\n\t\t\t<Fab color=\"secondary\" className={classes.fab} onClick={() => setIsCreateDialogOpen(true)}>\n\t\t\t\t<Add />\n\t\t\t</Fab>\n\t\t\t<CreateHelloWorldDialog\n\t\t\t\tisDialogOpen={isCreateDialogOpen}\n\t\t\t\thandleCloseDialog={() => setIsCreateDialogOpen(false)}\n\t\t\t/>\n\t\t</MainLayout>\n\t);\n}\n\nexport default HelloWorlds;\n"}]
+module.exports = [{ 'path': '/src/features/HelloWorlds/links.js', 'data': 'module.exports = [\n\t{\n\t\tpath: \'/src/config/store.ts\',\n\t\taction: (data, replace) => {\n\t\t\tdata = data.replace(\n\t\t\t\t/\\nexport\\sconst\\sstore/,\n\t\t\t\treplace(\'import helloWorlds from \\\'../features/HelloWorlds/logic/reducer\\\';\\n\\nexport const store\'),\n\t\t\t);\n\t\t\tdata = data.replace(/\\s},/, replace(\', helloWorlds },\'));\n\t\t\treturn data;\n\t\t},\n\t},\n\t{\n\t\tpath: \'/src/config/router.tsx\',\n\t\taction: (data, replace) => {\n\t\t\tdata = data.replace(\n\t\t\t\t/\\nfunction\\sRouter\\(\\) {/,\n\t\t\t\treplace(\'import HelloWorlds from \\\'../features/HelloWorlds/views/HelloWorlds\\\';\\n\\nfunction Router() {\'),\n\t\t\t);\n\t\t\tdata = data.replace(\n\t\t\t\t/<\\/Switch>/,\n\t\t\t\treplace(\'\\t<Route path="/hello-worlds" exact>\\n\\t\\t\\t\\t\\t<HelloWorlds />\\n\\t\\t\\t\\t</Route>\\n\\t\\t\\t</Switch>\'),\n\t\t\t);\n\t\t\treturn data;\n\t\t},\n\t},\n\t{\n\t\tpath: \'/src/layout/MainLayout.tsx\',\n\t\taction: (data, replace) => {\n\t\t\tdata = data.replace(\n\t\t\t\t/<\\/List>/,\n\t\t\t\treplace(\n\t\t\t\t\t\'\\t<ListItem button selected={/\\\\/hello-worlds\\\\/?/.test(location.pathname)} onClick={() => history.push(\\\'/hello-worlds\\\')}>\\n\\t\\t\\t\\t\\t<ListItemIcon>\\n\\t\\t\\t\\t\\t\\t<InboxIcon />\\n\\t\\t\\t\\t\\t</ListItemIcon>\\n\\t\\t\\t\\t\\t<ListItemText primary="Hello Worlds" />\\n\\t\\t\\t\\t</ListItem>\\n\\t\\t\\t</List>\',\n\t\t\t\t),\n\t\t\t);\n\t\t\treturn data;\n\t\t},\n\t},\n];\n', }, { 'path': '/src/features/HelloWorlds/logic/api.ts', 'data': 'import { createAsyncThunk } from \'@reduxjs/toolkit\';\nimport axios from \'axios\';\nimport { baseURL, HelloWorld } from \'../../../config/api\';\nimport { changeIsLoading, pushSnackbar } from \'../../Services/logic/actions\';\n\nconst url = baseURL.concat(\'/hello-worlds\');\n\nexport const fetchHelloWorlds = createAsyncThunk(\'helloWorlds/fetchHelloWorlds\', async (arg, { dispatch }) => {\n\ttry {\n\t\tdispatch(changeIsLoading(true));\n\t\tconst response = await axios(url, { method: \'GET\' });\n\t\treturn response.data;\n\t} catch (e) {\n\t\tdispatch(pushSnackbar({ variant: \'error\', message: e.message }));\n\t\treturn [];\n\t} finally {\n\t\tdispatch(changeIsLoading(false));\n\t}\n});\n\nexport const createHelloWorld = createAsyncThunk(\'helloWorlds/createHelloWorld\', async (data: any, { dispatch }) => {\n\ttry {\n\t\tdispatch(changeIsLoading(true));\n\t\tconst response = await axios(url, { method: \'POST\', data });\n\t\treturn response.data as HelloWorld;\n\t} catch (e) {\n\t\tdispatch(pushSnackbar({ variant: \'error\', message: e.message }));\n\t} finally {\n\t\tdispatch(changeIsLoading(false));\n\t}\n});\n\nexport const updateHelloWorld = createAsyncThunk(\'helloWorlds/updateHelloWorld\', async (data: any, { dispatch }) => {\n\ttry {\n\t\tdispatch(changeIsLoading(true));\n\t\tconst response = await axios(url.concat(`/${data.id}`), { method: \'PUT\', data });\n\t\treturn response.data as HelloWorld;\n\t} catch (e) {\n\t\tdispatch(pushSnackbar({ variant: \'error\', message: e.message }));\n\t} finally {\n\t\tdispatch(changeIsLoading(false));\n\t}\n});\n\nexport const deleteHelloWorld = createAsyncThunk(\'helloWorlds/deleteHelloWorld\', async (id: number, { dispatch }) => {\n\ttry {\n\t\tdispatch(changeIsLoading(true));\n\t\tconst response = await axios(url.concat(`/${id}`), { method: \'DELETE\' });\n\t\treturn response.data.id as number;\n\t} catch (e) {\n\t\tdispatch(pushSnackbar({ variant: \'error\', message: e.message }));\n\t} finally {\n\t\tdispatch(changeIsLoading(false));\n\t}\n});\n', }, { 'path': '/src/features/HelloWorlds/logic/reducer.ts', 'data': 'import { createReducer } from \'@reduxjs/toolkit\';\nimport { State } from \'./types\';\nimport { createHelloWorld, deleteHelloWorld, fetchHelloWorlds, updateHelloWorld } from \'./api\';\n\nconst initialState: State = {\n\thelloWorlds: [],\n};\n\nconst helloWorlds = createReducer(initialState, builder => builder\n\t.addCase(fetchHelloWorlds.fulfilled, (state, action) => {\n\t\tstate.helloWorlds = action.payload!;\n\t})\n\t.addCase(createHelloWorld.fulfilled, (state, action) => {\n\t\tstate.helloWorlds.push(action.payload!);\n\t})\n\t.addCase(updateHelloWorld.fulfilled, (state, action) => {\n\t\tconst index = state.helloWorlds.findIndex(helloWorld => helloWorld.id === action.payload!.id);\n\t\tstate.helloWorlds[index] = action.payload!;\n\t})\n\t.addCase(deleteHelloWorld.fulfilled, (state, action) => {\n\t\tstate.helloWorlds = state.helloWorlds.filter(helloWorld => helloWorld.id !== action.payload);\n\t}),\n);\n\nexport default helloWorlds;\n', }, { 'path': '/src/features/HelloWorlds/logic/types.ts', 'data': 'import { HelloWorld } from \'../../../config/api\';\n\nexport interface State {\n\thelloWorlds: HelloWorld[];\n}\n', }, { 'path': '/src/features/HelloWorlds/views/CreateHelloWorldDialog.tsx', 'data': 'import { useCallback, useMemo } from \'react\';\nimport { Dialog, DialogTitle } from \'@material-ui/core\';\nimport { FormRenderer } from \'@data-driven-forms/react-form-renderer\';\nimport { FormTemplate } from \'@data-driven-forms/mui-component-mapper\';\nimport componentMapper from \'@data-driven-forms/mui-component-mapper/component-mapper\';\nimport { useDispatch } from \'../../../config/store\';\nimport { HelloWorld } from \'../../../config/api\';\nimport { helloWorldSchema } from \'../../../config/schemas\';\nimport { createHelloWorld, updateHelloWorld } from \'../logic/api\';\n\ninterface Props {\n\tisDialogOpen: boolean;\n\thandleCloseDialog: () => void;\n\tediting?: boolean;\n\thelloWorld?: HelloWorld;\n}\n\nfunction CreateHelloWorldDialog({ isDialogOpen, handleCloseDialog, editing, helloWorld }: Props) {\n\tconst dispatch = useDispatch();\n\n\tconst schema = useMemo(() => {\n\t\tif (!helloWorld) return helloWorldSchema;\n\t\treturn {\n\t\t\tfields: helloWorldSchema.fields.map((field) => ({\n\t\t\t\t...field,\n\t\t\t\tinitialValue: helloWorld[field.name as keyof HelloWorld],\n\t\t\t})),\n\t\t};\n\t}, [helloWorld]);\n\n\n\tconst handleSubmit = useCallback(data => {\n\t\thandleCloseDialog();\n\t\tif (editing) dispatch(updateHelloWorld({ ...helloWorld, ...data }));\n\t\telse dispatch(createHelloWorld(data));\n\t}, [handleCloseDialog, editing, helloWorld, dispatch]);\n\n\treturn (\n\t\t<Dialog open={isDialogOpen} onClose={handleCloseDialog}>\n\t\t\t<DialogTitle>{editing ? \'Update Hello World\' : \'Create New Hello World\'}</DialogTitle>\n\t\t\t<div style={{ marginLeft: 24, marginRight: 10, marginBottom: 18 }}>\n\t\t\t\t<FormRenderer\n\t\t\t\t\tschema={schema}\n\t\t\t\t\tcomponentMapper={componentMapper}\n\t\t\t\t\tFormTemplate={FormTemplate}\n\t\t\t\t\tonSubmit={handleSubmit}\n\t\t\t\t\tonCancel={handleCloseDialog}\n\t\t\t\t/>\n\t\t\t</div>\n\t\t</Dialog>\n\t);\n}\n\nexport default CreateHelloWorldDialog;\n', }, { 'path': '/src/features/HelloWorlds/views/HelloWorldRow.tsx', 'data': 'import { useState } from \'react\';\nimport Button from \'@material-ui/core/Button\';\nimport Dialog from \'@material-ui/core/Dialog\';\nimport DialogActions from \'@material-ui/core/DialogActions\';\nimport DialogContent from \'@material-ui/core/DialogContent\';\nimport DialogContentText from \'@material-ui/core/DialogContentText\';\nimport DialogTitle from \'@material-ui/core/DialogTitle\';\nimport IconButton from \'@material-ui/core/IconButton\';\nimport TableCell from \'@material-ui/core/TableCell\';\nimport TableRow from \'@material-ui/core/TableRow\';\nimport Edit from \'@material-ui/icons/Edit\';\nimport Delete from \'@material-ui/icons/Delete\';\nimport { useStyles } from \'./HelloWorlds\';\nimport CreateHelloWorldDialog from \'./CreateHelloWorldDialog\';\nimport { useDispatch } from \'../../../config/store\';\nimport { HelloWorld } from \'../../../config/api\';\nimport { deleteHelloWorld } from \'../logic/api\';\nimport { helloWorldSchema } from \'../../../config/schemas\';\n\ninterface Props {\n\thelloWorld: HelloWorld;\n}\n\nfunction HelloWorldRow({ helloWorld }: Props) {\n\tconst dispatch = useDispatch();\n\n\tconst classes = useStyles();\n\tconst [isEditDialogOpen, setIsEditDialogOpen] = useState(false);\n\tconst [isDeleteDialogOpen, setIsDeleteDialogOpen] = useState(false);\n\n\tconst confirmDeleteDialog = (\n\t\t<Dialog open={isDeleteDialogOpen} onClose={() => setIsDeleteDialogOpen(false)}>\n\t\t\t<DialogTitle>Confirm Delete</DialogTitle>\n\t\t\t<DialogContent>\n\t\t\t\t<DialogContentText id="alert-dialog-description">\n\t\t\t\t\tAre you sure you want to delete this record?\n\t\t\t\t</DialogContentText>\n\t\t\t</DialogContent>\n\t\t\t<DialogActions>\n\t\t\t\t<Button onClick={() => setIsDeleteDialogOpen(false)} color="primary">\n\t\t\t\t\tCancel\n\t\t\t\t</Button>\n\t\t\t\t<Button onClick={() => dispatch(deleteHelloWorld(helloWorld.id))} color="primary" autoFocus>\n\t\t\t\t\tDelete\n\t\t\t\t</Button>\n\t\t\t</DialogActions>\n\t\t</Dialog>\n\t);\n\n\treturn (\n\t\t<>\n\t\t\t<TableRow>\n\t\t\t\t{helloWorldSchema.fields.map(field => (\n\t\t\t\t\t<TableCell>{helloWorld[field.name as keyof HelloWorld]}</TableCell>\n\t\t\t\t))}\n\t\t\t\t<TableCell padding="none" align="right">\n\t\t\t\t\t<IconButton className={classes.action} onClick={() => setIsEditDialogOpen(true)}>\n\t\t\t\t\t\t<Edit />\n\t\t\t\t\t</IconButton>\n\t\t\t\t\t<IconButton className={classes.action} onClick={() => setIsDeleteDialogOpen(true)}>\n\t\t\t\t\t\t<Delete />\n\t\t\t\t\t</IconButton>\n\t\t\t\t</TableCell>\n\t\t\t</TableRow>\n\n\t\t\t<CreateHelloWorldDialog\n\t\t\t\tisDialogOpen={isEditDialogOpen}\n\t\t\t\thandleCloseDialog={() => setIsEditDialogOpen(false)}\n\t\t\t\tediting\n\t\t\t\thelloWorld={helloWorld}\n\t\t\t/>\n\n\t\t\t{confirmDeleteDialog}\n\t\t</>\n\t);\n}\n\nexport default HelloWorldRow;\n', }, { 'path': '/src/features/HelloWorlds/views/HelloWorlds.tsx', 'data': 'import { useEffect, useState } from \'react\';\nimport Fab from \'@material-ui/core/Fab\';\nimport Paper from \'@material-ui/core/Paper\';\nimport Table from \'@material-ui/core/Table\';\nimport TableBody from \'@material-ui/core/TableBody\';\nimport TableCell from \'@material-ui/core/TableCell\';\nimport TableContainer from \'@material-ui/core/TableContainer\';\nimport TableHead from \'@material-ui/core/TableHead\';\nimport TableRow from \'@material-ui/core/TableRow\';\nimport Add from \'@material-ui/icons/Add\';\nimport { makeStyles } from \'@material-ui/core/styles\';\nimport MainLayout from \'../../../layout/MainLayout\';\nimport CreateHelloWorldDialog from \'./CreateHelloWorldDialog\';\nimport HelloWorldRow from \'./HelloWorldRow\';\nimport { useDispatch, useSelector } from \'../../../config/store\';\nimport { helloWorldSchema } from \'../../../config/schemas\';\nimport { fetchHelloWorlds } from \'../logic/api\';\n\nexport const useStyles = makeStyles((theme) => ({\n\tcontainer: {\n\t\tminWidth: 650,\n\t},\n\tfab: {\n\t\tposition: \'fixed\',\n\t\tbottom: theme.spacing(4),\n\t\tright: theme.spacing(4),\n\t},\n\taction: {\n\t\tmarginRight: 10,\n\t},\n}));\n\nfunction HelloWorlds() {\n\tconst dispatch = useDispatch();\n\n\tuseEffect(() => {\n\t\tdispatch(fetchHelloWorlds());\n\t}, [dispatch]);\n\n\tconst helloWorlds = useSelector(state => state.helloWorlds.helloWorlds);\n\n\tconst classes = useStyles();\n\tconst [isCreateDialogOpen, setIsCreateDialogOpen] = useState(false);\n\n\treturn (\n\t\t<MainLayout title="Hello Worlds" authorize="authorized">\n\t\t\t<TableContainer component={Paper}>\n\t\t\t\t<Table className={classes.container}>\n\t\t\t\t\t<TableHead>\n\t\t\t\t\t\t<TableRow>\n\t\t\t\t\t\t\t{helloWorldSchema.fields.map(field => (\n\t\t\t\t\t\t\t\t<TableCell>{field.label}</TableCell>\n\t\t\t\t\t\t\t))}\n\t\t\t\t\t\t\t<TableCell />\n\t\t\t\t\t\t</TableRow>\n\t\t\t\t\t</TableHead>\n\t\t\t\t\t<TableBody>\n\t\t\t\t\t\t{helloWorlds.map(helloWorld => (\n\t\t\t\t\t\t\t<HelloWorldRow key={helloWorld.id} helloWorld={helloWorld} />\n\t\t\t\t\t\t))}\n\t\t\t\t\t</TableBody>\n\t\t\t\t</Table>\n\t\t\t</TableContainer>\n\t\t\t<Fab color="secondary" className={classes.fab} onClick={() => setIsCreateDialogOpen(true)}>\n\t\t\t\t<Add />\n\t\t\t</Fab>\n\t\t\t<CreateHelloWorldDialog\n\t\t\t\tisDialogOpen={isCreateDialogOpen}\n\t\t\t\thandleCloseDialog={() => setIsCreateDialogOpen(false)}\n\t\t\t/>\n\t\t</MainLayout>\n\t);\n}\n\nexport default HelloWorlds;\n', }];

template/src/config/store.ts

 import { configureStore } from '@reduxjs/toolkit';
 import { TypedUseSelectorHook, useDispatch as useReduxDispatch, useSelector as useReduxSelector } from 'react-redux';
-import auth, { initialState } from '../features/Auth/logic/reducer';
-import services from '../features/Services/logic/reducer';
+import auth, { initialState as authInitialState } from '../features/Auth/logic/reducer';
+import services, { initialState as servicesInitialState } from '../features/Services/logic/reducer';
 
@@ -33,5 +33,8 @@ export const store = configureStore({
 	localStorage.setItem('state', JSON.stringify({
-		services: state.services,
+		services: {
+			...servicesInitialState,
+			preferredMode: state.services.preferredMode,
+		},
 		auth: {
-			...initialState,
+			...authInitialState,
 			isLoggedIn: state.auth.isLoggedIn,
@@ -38,0 +41,0 @@ user: state.auth.user,

template/src/features/Services/logic/actions.ts

 import { createAction } from '@reduxjs/toolkit';
+import { Snackbar } from './types';
 
 export const togglePreferredMode = createAction('togglePreferredMode');
 export const toggleDrawer = createAction('toggleDrawer');
+export const changeIsLoading = createAction<boolean>('changeIsLoading');
+export const pushSnackbar = createAction<Snackbar>('pushSnackbar')

template/src/features/Services/logic/reducer.ts

 import { State } from './types';
 import { createReducer } from '@reduxjs/toolkit';
-import { toggleDrawer, togglePreferredMode } from './actions';
+import { changeIsLoading, pushSnackbar, toggleDrawer, togglePreferredMode } from './actions';
 
-const initialState: State = {
+export const initialState: State = {
 	preferredMode: 'light',
 	drawerOpen: false,
+	isLoading: false,
 };
@@ -16,2 +17,8 @@
 		state.drawerOpen = !state.drawerOpen;
+	})
+	.addCase(changeIsLoading, (state, action) => {
+		state.isLoading = action.payload;
+	})
+	.addCase(pushSnackbar, (state, action) => {
+		state.snackbar = action.payload;
 	}),
@@ -18,0 +25,0 @@ );

template/src/features/Services/logic/types.ts

@@ -0,4 +1,13 @@
+import { VariantType } from 'notistack';
+
+export interface Snackbar {
+	variant: VariantType,
+	message: string;
+}
+
 export interface State {
 	preferredMode: 'light' | 'dark';
 	drawerOpen: boolean;
+	isLoading: boolean;
+	snackbar?: Snackbar;
 }

No alert changes

Improved metrics

Total package byte prevSize

89008

increased by6.68%

Lines of code

1272

increased by14.8%

No dependency changes