Merge pull request weaponsforge#107 from weaponsforge/dev

v3.0.5

client/components/common/ui/smartnotification/index.js

@@ -27,10 +27,10 @@ function SmartNotification () {
       {(open && notification !== '') &&
       <Snackbar
         open={open}
-        autoHideDuration={3000}
+        autoHideDuration={4000}
         onClose={() => dispatch(resetMessage())}
         sx={{
-          minWidth: '300px',
+          maxWidth: '600px',
           '& .MuiPaper-root': {
             width: '100%'
           }

client/features/authentication/components/withcmsauth/index.js

@@ -1,8 +1,9 @@
 import { useEffect } from 'react'
 import { useRouter } from 'next/router'
+import { useDispatch } from 'react-redux'
 
 import { useAuth } from '@/features/authentication'
-import useInitStore from '@/hooks/useinitstore'
+import { loadedReceived } from '@/store/app/appSlice'
 
 import LoadingCover from '@/components/common/layout/loadingcover'
 import { AdminDrawer } from '@/features/cms'
@@ -19,10 +20,12 @@ import { AdminDrawer } from '@/features/cms'
 function WithCMSAuth (Component) {
   function AuthListener (props) {
     const router = useRouter()
+    const dispatch = useDispatch()
     const { authLoading, authError, authUser } = useAuth()
 
-    // Fetch Posts
-    useInitStore(authUser?.uid ?? undefined)
+    useEffect(() => {
+      dispatch(loadedReceived(true))
+    }, [dispatch])
 
     useEffect(() => {
       if (!authLoading && !authUser) {

client/features/filecards/components/cardpreview/index.js

@@ -4,14 +4,25 @@ import Link from 'next/link'
 
 import CardPreviewComponent from './cardpreview'
 
-import usePictureFile from '../../hooks/usepicturefile'
 import useDownloadFile from '../../hooks/usedownloafile'
+import useGlobalFile from '../../hooks/useglobalfile'
+
+import {
+  STORE_PHOTO_LOCAL_URL,
+  STORE_OBJECT
+} from '../../constants/variables'
 
 function CardPreview () {
   const [selectedUrl, setSelectedUrl] = useState(null)
   const card = useSelector(state => state.cards.card)
 
-  const { pictureImage } = usePictureFile(card?.picture_url)
+  const { fileSource: pictureImage } = useGlobalFile(
+    card?.picture_url,
+    null,
+    STORE_OBJECT,
+    STORE_PHOTO_LOCAL_URL
+  )
+
   const { loading } = useDownloadFile({ fileUrl: selectedUrl })
 
   useEffect(() => {

client/features/filecards/components/formitemsinput/formitemsinput.js

@@ -11,8 +11,10 @@ import FileUploadSelector from '@/components/common/ui/fileuploadselector'
 import forminputlabels from '../../constants/forminputlabels.json'
 import MIME_TYPES_DEF from '../../constants/mimetypes.json'
 
-import { FILE_INPUT_ID } from '../../hooks/useattachfile'
-import { PICTURE_FILE_INPUT_ID } from '../../hooks/usepicturefile'
+import {
+  INPUT_FILE_ID,
+  INPUT_PHOTO_FILE_ID
+} from '../../constants/variables'
 
 function FormItemsInputComponent ({
   handleSubmit,
@@ -65,7 +67,7 @@ function FormItemsInputComponent ({
                   <FileUploadSelector
                     file={pictureImageFile}
                     fileSelectedCallback={setPictureData}
-                    inputDomID={PICTURE_FILE_INPUT_ID}
+                    inputDomID={INPUT_PHOTO_FILE_ID}
                     acceptFiles='.jpg, .jpeg, .png, image/*'
                   />
               }}
@@ -94,7 +96,7 @@ function FormItemsInputComponent ({
                   <FileUploadSelector
                     file={fileObject}
                     fileSelectedCallback={setFileData}
-                    inputDomID={FILE_INPUT_ID}
+                    inputDomID={INPUT_FILE_ID}
                     acceptFiles='*.*'
                   />
               }}

client/features/filecards/components/formitemsinput/index.js

@@ -2,16 +2,25 @@ import { useState, useEffect, useRef, useMemo } from 'react'
 import { useDispatch } from 'react-redux'
 import PropTypes from 'prop-types'
 
-import usePictureFile from '../../hooks/usepicturefile'
-import useAttachFile from '../../hooks/useattachfile'
+import useGlobalFile from '../../hooks/useglobalfile'
 import { cardReceived } from '@/store/cards/cardSlice'
+import { cardFileReceived } from '@/store/cards/cardSlice'
+import { cardPictureReceived } from '@/store/cards/cardSlice'
 
 import forminputlabels from '../../constants/forminputlabels.json'
 import { getMimeSelectOptionBy, getAllowedFileTypes } from '../../utils/mimetypes'
 
 import FormItemsInputComponent from './formitemsinput'
 import { MESSAGE_SEVERITY, notificationReceived } from '@/store/app/appSlice'
 
+import {
+  INPUT_FILE_ID,
+  INPUT_PHOTO_FILE_ID,
+  STORE_PHOTO_LOCAL_URL,
+  STORE_FILE_LOCAL_URL,
+  STORE_OBJECT
+} from '../../constants/variables'
+
 function FormItemsInput ({
   handleSubmit,
   card,
@@ -21,14 +30,27 @@ function FormItemsInput ({
   const [fileUrl, setFileUrl] = useState('***')
   const [mimeType, setMimeType] = useState(undefined)
 
-  const { pictureImageFile, setPictureFileName } = usePictureFile()
-  const { fileObject, setFileName } = useAttachFile()
+  const { fileObject: pictureImageFile, setFileName: setPictureFileName } = useGlobalFile(
+    null,
+    INPUT_PHOTO_FILE_ID,
+    STORE_OBJECT,
+    STORE_PHOTO_LOCAL_URL,
+    cardPictureReceived
+  )
+
+  const { fileObject, setFileName} = useGlobalFile(
+    null,
+    INPUT_FILE_ID,
+    STORE_OBJECT,
+    STORE_FILE_LOCAL_URL,
+    cardFileReceived
+  )
 
   const formRef = useRef(null)
   const dispatch = useDispatch()
 
   useEffect(() => {
-    if (card !== null && pictureFileUrl === '***' && fileUrl === '***') {
+    if (pictureFileUrl === '***' && fileUrl === '***') {
       setPictureFileUrl(card?.picture_url ?? '')
       setFileUrl(card?.download_url ?? '')
     }

client/features/filecards/constants/variables.js

@@ -0,0 +1,16 @@
+// DOM "id" attribute names for <input /> elements
+const INPUT_FILE_ID = 'attachmentfile'
+const INPUT_PHOTO_FILE_ID = 'picturefile'
+
+// Global local URLs. See the cardSlice file for reference.
+const STORE_PHOTO_LOCAL_URL = 'picturelocalurl'
+const STORE_FILE_LOCAL_URL = 'attachmentfilename'
+const STORE_OBJECT = 'cards'
+
+export {
+  INPUT_FILE_ID,
+  INPUT_PHOTO_FILE_ID,
+  STORE_PHOTO_LOCAL_URL,
+  STORE_FILE_LOCAL_URL,
+  STORE_OBJECT
+}

client/features/filecards/containers/createcard/index.js

@@ -1,14 +1,20 @@
 import { useEffect, useState } from 'react'
-import { useDispatch } from 'react-redux'
+import { useDispatch, useSelector } from 'react-redux'
 
 import { cardsReset } from '@/store/cards/cardSlice'
 import { _createCard } from '@/store/cards/cardThunks'
 import { notificationReceived, MESSAGE_SEVERITY } from '@/store/app/appSlice'
 import { useAuth } from '@/features/authentication'
-import usePictureFile from '../../hooks/usepicturefile'
-import useAttachFile from '../../hooks/useattachfile'
+import useGlobalFile from '../../hooks/useglobalfile'
 
 import { getMimeSelectOptionBy } from '../../utils/mimetypes'
+import {
+  INPUT_FILE_ID,
+  INPUT_PHOTO_FILE_ID,
+  STORE_PHOTO_LOCAL_URL,
+  STORE_FILE_LOCAL_URL,
+  STORE_OBJECT
+} from '../../constants/variables'
 
 import CreateCardForm from '../../components/createcardform'
 
@@ -28,12 +34,27 @@ const defaultSaveStatus = { isOpenDialog: false, saveSuccess: false }
 function CreateCard () {
   const [details, setDetails] = useState(defaultState)
   const [saveState, setSaveStatus] = useState(defaultSaveStatus)
-  const { pictureImageFile } = usePictureFile()
-  const { fileObject } = useAttachFile()
+  const card = useSelector(state => state.cards.card)
 
   const { authUser } = useAuth()
   const dispatch = useDispatch()
 
+  // Picture image
+  const { fileObject: pictureImageFile } = useGlobalFile(
+    null,
+    INPUT_PHOTO_FILE_ID,
+    STORE_OBJECT,
+    STORE_PHOTO_LOCAL_URL
+  )
+
+  // File attachment
+  const { fileObject } = useGlobalFile(
+    null,
+    INPUT_FILE_ID,
+    STORE_OBJECT,
+    STORE_FILE_LOCAL_URL
+  )
+
   useEffect(() => {
     dispatch(cardsReset())
   }, [dispatch])
@@ -96,10 +117,19 @@ function CreateCard () {
         }))
       })
       .catch((error) => {
+        let errMsg = error
         setSaveStatus({ ...saveState, isOpenDialog: false })
 
+        if (errMsg.includes('storage/unauthorized')) {
+          errMsg = 'File upload failed. Please verify that the photo you are uploading is less than 4 MB in file size. Only .bmp, .jpeg, .jpg, .png, .gif, .svg, and .webp files are supported. You may not have sufficient user permissions if this error continues.'
+        }
+
+        if (errMsg.includes('Missing or insufficient permissions')) {
+          errMsg = 'Please check your input. You may not have sufficient user permissions if this error continues.'
+        }
+
         dispatch(notificationReceived({
-          notification: error ?? 'Sorry, something went wrong while creating the File Card.',
+          notification: errMsg,
           severity: MESSAGE_SEVERITY.ERROR
         }))
       })
@@ -112,6 +142,7 @@ function CreateCard () {
       toggleDialog={() => setSaveStatus(prev => ({ ...prev, isOpenDialog: !prev.isOpenDialog }))}
       saveState={saveState}
       mode='create'
+      card={card}
       dialogSettings={{
         dialogTitle: 'Create a New File Card',
         dialogText: 'Would you like to create a new File Card?',

client/features/filecards/containers/editcard/index.js

@@ -5,13 +5,19 @@ import { useDispatch, useSelector } from 'react-redux'
 import { _updateCard } from '@/store/cards/cardThunks'
 import { notificationReceived, MESSAGE_SEVERITY } from '@/store/app/appSlice'
 import { useAuth } from '@/features/authentication'
-import usePictureFile from '../../hooks/usepicturefile'
-import useAttachFile from '../../hooks/useattachfile'
-
 import useFetchCard from '../../hooks/usefetchcard'
+import useGlobalFile from '../../hooks/useglobalfile'
+
 import CreateCardForm from '../../components/createcardform'
 import { getMimeSelectOptionBy } from '../../utils/mimetypes'
 import { ADAPTER_STATES } from '@/store/constants'
+import {
+  INPUT_FILE_ID,
+  INPUT_PHOTO_FILE_ID,
+  STORE_PHOTO_LOCAL_URL,
+  STORE_FILE_LOCAL_URL,
+  STORE_OBJECT
+} from '../../constants/variables'
 
 const defaultState = {
   title: '',
@@ -29,13 +35,27 @@ const defaultSaveStatus = { isOpenDialog: false, saveSuccess: false, docId: null
 function EditCard () {
   const [details, setDetails] = useState(defaultState)
   const [saveState, setSaveStatus] = useState(defaultSaveStatus)
-  const { pictureImageFile } = usePictureFile()
-  const { fileObject } = useAttachFile()
 
   const { authUser } = useAuth()
   const dispatch = useDispatch()
   const router = useRouter()
 
+  // Picture image
+  const { fileObject: pictureImageFile } = useGlobalFile(
+    null,
+    INPUT_PHOTO_FILE_ID,
+    STORE_OBJECT,
+    STORE_PHOTO_LOCAL_URL
+  )
+
+  // File attachment
+  const { fileObject } = useGlobalFile(
+    null,
+    INPUT_FILE_ID,
+    STORE_OBJECT,
+    STORE_FILE_LOCAL_URL
+  )
+
   const card = useSelector(state => state.cards.card)
   const status = useSelector(state => state.cards.status)
 
@@ -97,7 +117,8 @@ function EditCard () {
       cardIconFile: pictureImageFile,
       documentPath: `users/${authUser.uid}/cards/${docId}`,
       params: {
-        ...details
+        ...details,
+        uid: authUser.uid,
       }
     }))
       .unwrap()
@@ -110,10 +131,19 @@ function EditCard () {
         }))
       })
       .catch((error) => {
+        let errMsg = error
         setSaveStatus({ ...saveState, isOpenDialog: false })
 
+        if (errMsg.includes('storage/unauthorized')) {
+          errMsg = 'File upload failed. Please verify that the photo you are uploading is less than 4 MB in file size. Only .bmp, .jpeg, .jpg, .png, .gif, .svg, and .webp files are supported. You may not have sufficient user permissions if this error continues.'
+        }
+
+        if (errMsg.includes('Missing or insufficient permissions')) {
+          errMsg = 'Please check your input. You may not have sufficient user permissions if this error continues.'
+        }
+
         dispatch(notificationReceived({
-          notification: error ?? 'Sorry, something went wrong while updating the File Card.',
+          notification: errMsg,
           severity: MESSAGE_SEVERITY.ERROR
         }))
       })

client/features/filecards/containers/list/index.js

@@ -4,7 +4,10 @@ import { useRouter } from 'next/router'
 
 import { useAuth } from '@/features/authentication'
 import useDeleteCard from '../../hooks/usedeletecard'
+import useInitStore from '@/hooks/useinitstore'
 import { cardsReset } from '@/store/cards/cardSlice'
+import { _getCards } from '@/store/cards/cardThunks'
+
 
 import Button from '@mui/material/Button'
 import ButtonGroup from '@mui/material/ButtonGroup'
@@ -29,6 +32,14 @@ function FileCardsList () {
     dispatch(cardsReset())
   }, [dispatch])
 
+  // Fetch all Cards store items just once
+  useInitStore({
+    uid: authUser?.uid ?? undefined,
+    storeName: 'cards',
+    fetchThunk: _getCards,
+    collectionPath: `users/${authUser?.uid}/cards`
+  })
+
   const navigateToPostActionPage = (action, docId) => {
     router.push(`/cms/filecards/${action}?id=${docId}`)
   }