Refactor currentticket state and refactor using new hook created (#175)

previously currentTicket was an independent atom from allTickets, which didn't make sense since it filters from allTickets. currentTicket depending on setAllTickets is abstracted away into its own hook, so developers don't need to worry about current ticket not being updated when setAllTickets is called (it will happen on its own by calling the hook) --------- Co-authored-by: Anson He <60114875+ansonjwhe@users.noreply.github.com>
WATonomous · Dec 26, 2023 · 1c33e83 · 1c33e83
1 parent c24055c
commit 1c33e83
Show file tree

Hide file tree

Showing 21 changed files with 124 additions and 133 deletions.
diff --git a/backend/controller/uwfinancepurchases.controller.js b/backend/controller/uwfinancepurchases.controller.js
@@ -87,7 +87,9 @@ const updateApprovalsUWFinancePurchaseController = async (req, res) => {
         .then((uwFinancePurchase) => {
             res.status(200).json(uwFinancePurchase)
         })
-        .catch((err) => res.status(500).json('Error: ' + err))
+        .catch((err) => {
+            res.status(500).json('Error: ' + err)
+        })
 }
 
 const deleteUWFinancePurchaseController = (req, res) => {

diff --git a/backend/service/fundingitems.service.js b/backend/service/fundingitems.service.js
@@ -17,7 +17,7 @@ const createFundingItem = async (body) => {
     const newFundingItem = new FundingItem(body)
     const newFI = await newFundingItem.save()
     // update the parent SF to store link to child FI
-    return SponsorshipFund.findByIdAndUpdate(
+    await SponsorshipFund.findByIdAndUpdate(
         newFI.sf_link,
         {
             $push: { fi_links: newFI._id },
@@ -26,6 +26,7 @@ const createFundingItem = async (body) => {
             new: true,
         }
     )
+    return newFI
 }
 
 const updateFundingItem = (id, body) => {

diff --git a/frontend/src/components/DeleteTicketAlertDialog.js b/frontend/src/components/DeleteTicketAlertDialog.js
@@ -16,17 +16,14 @@ import { TICKET_ENDPOINTS, TICKET_TYPES } from '../constants'
 import { useNavigate } from 'react-router-dom'
 import { axiosPreset } from '../axiosConfig'
 import { useRecoilValue, useSetRecoilState } from 'recoil'
-import {
-    allTicketsState,
-    currentTicketState,
-    currentTreeState,
-} from '../state/atoms'
+import { allTicketsState, currentTreeState } from '../state/atoms'
 import { getAllTickets } from '../utils/globalSetters'
 import { createErrorMessage } from '../utils/errorToasts'
+import { useGetCurrentTicket } from '../hooks/hooks'
 
 const DeleteTicketAlertDialog = ({ isOpen, onClose }) => {
     const navigate = useNavigate()
-    const currentTicket = useRecoilValue(currentTicketState)
+    const currentTicket = useGetCurrentTicket()
     const currentTree = useRecoilValue(currentTreeState)
     const setAllTickets = useSetRecoilState(allTicketsState)
     const [isDisabled, setIsDisabled] = useState(false)

diff --git a/frontend/src/components/TicketContent/FIContentTable.js b/frontend/src/components/TicketContent/FIContentTable.js
@@ -2,11 +2,10 @@ import { Table, Tbody, VStack } from '@chakra-ui/react'
 import React from 'react'
 import { getFormattedCurrency } from '../../utils/utils'
 import TicketContentTableRow from './TicketContentTableRow'
-import { useRecoilValue } from 'recoil'
-import { currentTicketState } from '../../state/atoms'
+import { useGetCurrentTicket } from '../../hooks/hooks'
 
 const FIContentTable = () => {
-    const currentTicket = useRecoilValue(currentTicketState)
+    const currentTicket = useGetCurrentTicket()
     return (
         <VStack>
             <Table>

diff --git a/frontend/src/components/TicketContent/PPRAdminContentTable.js b/frontend/src/components/TicketContent/PPRAdminContentTable.js
@@ -1,13 +1,14 @@
 import { Button, Center, Heading, VStack } from '@chakra-ui/react'
 import React from 'react'
-import { useRecoilValue, useSetRecoilState } from 'recoil'
-import { allTicketsState, currentTicketState } from '../../state/atoms'
+import { useSetRecoilState } from 'recoil'
+import { allTicketsState } from '../../state/atoms'
 import { axiosPreset } from '../../axiosConfig'
 import { TICKET_ENDPOINTS } from '../../constants'
 import { getAllTickets } from '../../utils/globalSetters'
+import { useGetCurrentTicket } from '../../hooks/hooks'
 
 const PPRAdminContentTable = () => {
-    const currentTicket = useRecoilValue(currentTicketState)
+    const currentTicket = useGetCurrentTicket()
     const setAllTickets = useSetRecoilState(allTicketsState)
     const handleUpdateStatus = async (nextStatus) => {
         const payload = {

diff --git a/frontend/src/components/TicketContent/PPRContentTable.js b/frontend/src/components/TicketContent/PPRContentTable.js
@@ -9,13 +9,14 @@ import {
     APPROVAL_LEVELS,
     SEEKING_APPROVAL_STATUS,
 } from '../../constants'
-import { useRecoilValue, useSetRecoilState } from 'recoil'
-import { allTicketsState, currentTicketState } from '../../state/atoms'
+import { useSetRecoilState } from 'recoil'
+import { allTicketsState } from '../../state/atoms'
 import { getAllTickets } from '../../utils/globalSetters'
+import { useGetCurrentTicket } from '../../hooks/hooks'
 
 const PPRContentTable = () => {
     const auth = useAuth()
-    const currentTicket = useRecoilValue(currentTicketState)
+    const currentTicket = useGetCurrentTicket()
     const setAllTickets = useSetRecoilState(allTicketsState)
     const [loading, setLoading] = useState(false)
 

diff --git a/frontend/src/components/TicketContent/SFAdminContentTable.js b/frontend/src/components/TicketContent/SFAdminContentTable.js
@@ -1,12 +1,11 @@
 import { Button, Center, Heading, VStack, Link } from '@chakra-ui/react'
 import React from 'react'
-import { useRecoilValue } from 'recoil'
-import { currentTicketState } from '../../state/atoms'
 import { useGetPreserveParamsHref } from '../../hooks/hooks'
+import { useGetCurrentTicket } from '../../hooks/hooks'
 
 const SFAdminContentTable = () => {
-    const currentTicket = useRecoilValue(currentTicketState)
     const getPreserveParamsHref = useGetPreserveParamsHref()
+    const currentTicket = useGetCurrentTicket()
     return (
         <VStack
             border="1px solid black"

diff --git a/frontend/src/components/TicketContent/SFContentTable.js b/frontend/src/components/TicketContent/SFContentTable.js
@@ -2,11 +2,11 @@ import { Table, Tbody, VStack } from '@chakra-ui/react'
 import React from 'react'
 import { getFormattedCurrency, getStandardizedDate } from '../../utils/utils'
 import TicketContentTableRow from './TicketContentTableRow'
-import { useRecoilValue } from 'recoil'
-import { currentTicketState } from '../../state/atoms'
+import { useGetCurrentTicket } from '../../hooks/hooks'
 
 const SFContentTable = () => {
-    const currentTicket = useRecoilValue(currentTicketState)
+    const currentTicket = useGetCurrentTicket()
+
     return (
         <VStack>
             <Table>

diff --git a/frontend/src/components/TicketContent/TicketContentTableRow.js b/frontend/src/components/TicketContent/TicketContentTableRow.js
@@ -24,7 +24,7 @@ const TicketContentTableRow = ({ heading, value, onChange, type }) => {
             >
                 {onChange ? (
                     <Input onChange={onChange} value={value} />
-                ) : type == 'URL' ? (
+                ) : type === 'URL' ? (
                     <Link color="blue.500" href={value} isExternal>
                         {value}
                     </Link>

diff --git a/frontend/src/components/TicketContent/UPRAdminContentTable.js b/frontend/src/components/TicketContent/UPRAdminContentTable.js
@@ -1,35 +1,32 @@
 import { Button, Center, Heading, Table, Tbody, VStack } from '@chakra-ui/react'
-import React from 'react'
-import { useRecoilState, useSetRecoilState } from 'recoil'
+import React, { useState } from 'react'
+import { useSetRecoilState } from 'recoil'
 import TicketContentTableRow from './TicketContentTableRow'
-import { allTicketsState, currentTicketState } from '../../state/atoms'
+import { allTicketsState } from '../../state/atoms'
 import { axiosPreset } from '../../axiosConfig'
 import { TICKET_ENDPOINTS } from '../../constants'
 import { getAllTickets } from '../../utils/globalSetters'
+import { useGetCurrentTicket } from '../../hooks/hooks'
 
 const UPRAdminContentTable = () => {
-    const [currentTicket, setCurrentTicket] = useRecoilState(currentTicketState)
+    const currentTicket = useGetCurrentTicket()
+    const [reqNum, setReqNum] = useState(currentTicket.requisition_number)
+    const [poNum, setPoNum] = useState(currentTicket.po_number)
     const [changed, setChanged] = React.useState(false)
     const setAllTickets = useSetRecoilState(allTicketsState)
     const changeReqNumber = (e) => {
-        setCurrentTicket({
-            ...currentTicket,
-            requisition_number: e.target.value,
-        })
+        setReqNum(e.target.value)
         setChanged(true)
     }
     const changePoNumber = (e) => {
-        setCurrentTicket({
-            ...currentTicket,
-            po_number: e.target.value,
-        })
+        setPoNum(e.target.value)
         setChanged(true)
     }
 
     const saveFields = async () => {
         const payload = {
-            requisition_number: currentTicket.requisition_number,
-            po_number: currentTicket.po_number,
+            requisition_number: reqNum,
+            po_number: poNum,
         }
         await axiosPreset.patch(
             `${TICKET_ENDPOINTS.UPR}/${currentTicket._id}`,
@@ -42,18 +39,14 @@ const UPRAdminContentTable = () => {
     const transitionToPurchased = async () => {
         const payload = {
             status: 'ORDERED',
-            po_number: currentTicket.po_number,
-            requisition_number: currentTicket.requisition_number,
+            po_number: poNum,
+            requisition_number: reqNum,
         }
         await axiosPreset.patch(
             `${TICKET_ENDPOINTS.UPR}/${currentTicket._id}`,
             payload
         )
         await getAllTickets(setAllTickets)
-        setCurrentTicket({
-            ...currentTicket,
-            status: 'ORDERED',
-        })
         setChanged(false)
     }
 
@@ -66,10 +59,6 @@ const UPRAdminContentTable = () => {
             payload
         )
         await getAllTickets(setAllTickets)
-        setCurrentTicket({
-            ...currentTicket,
-            status: 'PICKED_UP',
-        })
         setChanged(false)
     }
 
@@ -85,12 +74,12 @@ const UPRAdminContentTable = () => {
                 <Tbody>
                     <TicketContentTableRow
                         heading={'Purchase Order Number'}
-                        value={currentTicket?.po_number}
+                        value={poNum}
                         onChange={changePoNumber}
                     />
                     <TicketContentTableRow
                         heading={'Requisition Number'}
-                        value={currentTicket?.requisition_number}
+                        value={reqNum}
                         onChange={changeReqNumber}
                     />
                 </Tbody>
@@ -103,10 +92,7 @@ const UPRAdminContentTable = () => {
                         size="sm"
                         mr="20px"
                         onClick={transitionToPurchased}
-                        disabled={
-                            !currentTicket?.po_number ||
-                            !currentTicket?.requisition_number
-                        }
+                        disabled={!poNum || !reqNum}
                     >
                         Transition To Purchased
                     </Button>

diff --git a/frontend/src/components/TicketContent/UPRContentTable.js b/frontend/src/components/TicketContent/UPRContentTable.js
@@ -9,13 +9,14 @@ import {
     APPROVAL_LEVELS,
     SEEKING_APPROVAL_STATUS,
 } from '../../constants'
-import { useRecoilValue, useSetRecoilState } from 'recoil'
-import { allTicketsState, currentTicketState } from '../../state/atoms'
+import { useSetRecoilState } from 'recoil'
+import { allTicketsState } from '../../state/atoms'
 import { getAllTickets } from '../../utils/globalSetters'
+import { useGetCurrentTicket } from '../../hooks/hooks'
 
 const UPRContentTable = () => {
     const auth = useAuth()
-    const currentTicket = useRecoilValue(currentTicketState)
+    const currentTicket = useGetCurrentTicket()
     const setAllTickets = useSetRecoilState(allTicketsState)
     const [loading, setLoading] = useState(false)
 

diff --git a/frontend/src/components/TicketList.js b/frontend/src/components/TicketList.js
@@ -1,5 +1,5 @@
 import React, { useEffect, useState } from 'react'
-import { usePreserveParamsNavigate } from '../hooks/hooks'
+import { useGetCurrentTicket, usePreserveParamsNavigate } from '../hooks/hooks'
 import {
     Card,
     CardBody,
@@ -17,11 +17,11 @@ import { useSearchParams } from 'react-router-dom'
 import { TICKET_TYPES } from '../constants'
 import LoadingSpinner from './LoadingSpinner'
 import { useRecoilValue } from 'recoil'
-import { allTicketsState, currentTicketState } from '../state/atoms'
+import { allTicketsState } from '../state/atoms'
 
 const TicketList = ({ isLoading }) => {
     const allTickets = useRecoilValue(allTicketsState)
-    const currentTicket = useRecoilValue(currentTicketState)
+    const currentTicket = useGetCurrentTicket()
     const preserveParamsNavigate = usePreserveParamsNavigate()
     const [searchParams] = useSearchParams()
     const tickettypes = searchParams.get('tickettypes')
@@ -113,9 +113,9 @@ const TicketList = ({ isLoading }) => {
                                     preserveParamsNavigate(ticket.path)
                                 }
                                 cursor="pointer"
-                                bg={ticket == currentTicket ? 'blue.600' : ''}
+                                bg={ticket === currentTicket ? 'blue.600' : ''}
                                 color={
-                                    ticket == currentTicket ? 'white' : 'black'
+                                    ticket === currentTicket ? 'white' : 'black'
                                 }
                             >
                                 <CardBody p="8px 16px">

diff --git a/frontend/src/components/TreeView.js b/frontend/src/components/TreeView.js
@@ -1,11 +1,11 @@
 import React from 'react'
 import { Text, Box, Stack } from '@chakra-ui/react'
-import { usePreserveParamsNavigate } from '../hooks/hooks'
+import { useGetCurrentTicket, usePreserveParamsNavigate } from '../hooks/hooks'
 import { useRecoilValue } from 'recoil'
-import { currentTicketState, currentTreeState } from '../state/atoms'
+import { currentTreeState } from '../state/atoms'
 
 const TreeView = () => {
-    const currentTicket = useRecoilValue(currentTicketState)
+    const currentTicket = useGetCurrentTicket()
     const currentTree = useRecoilValue(currentTreeState)
     const preserveParamsNavigate = usePreserveParamsNavigate()
 

diff --git a/frontend/src/components/TreeViewWithLinks.js b/frontend/src/components/TreeViewWithLinks.js
@@ -1,11 +1,11 @@
 import React from 'react'
 import { Text, Box, Stack, Link } from '@chakra-ui/react'
-import { useGetPreserveParamsHref } from '../hooks/hooks'
+import { useGetCurrentTicket, useGetPreserveParamsHref } from '../hooks/hooks'
 import { useRecoilValue } from 'recoil'
-import { currentTicketState, currentTreeState } from '../state/atoms'
+import { currentTreeState } from '../state/atoms'
 
 const TreeViewWithLinks = () => {
-    const currentTicket = useRecoilValue(currentTicketState)
+    const currentTicket = useGetCurrentTicket()
     const currentTree = useRecoilValue(currentTreeState)
     const getPreserveParamsHref = useGetPreserveParamsHref()
 

diff --git a/frontend/src/components/UpdateTicketModal.js b/frontend/src/components/UpdateTicketModal.js
@@ -19,13 +19,14 @@ import {
     UWFinancePurchaseForm,
 } from './TicketForms'
 import { TICKET_ENDPOINTS, TICKET_TYPES } from '../constants'
-import { useRecoilState, useRecoilValue } from 'recoil'
-import { currentTicketState, allTicketsState } from '../state/atoms'
+import { useRecoilState } from 'recoil'
+import { allTicketsState } from '../state/atoms'
 import { getAllTickets } from '../utils/globalSetters'
 import { createErrorMessage } from '../utils/errorToasts'
+import { useGetCurrentTicket } from '../hooks/hooks'
 
 const UpdateTicketModal = ({ isOpen, onClose }) => {
-    const currentTicket = useRecoilValue(currentTicketState)
+    const currentTicket = useGetCurrentTicket()
     const [allTickets, setAllTickets] = useRecoilState(allTicketsState)
     const { control, register, handleSubmit, formState } = useForm({
         defaultValues: {

diff --git a/frontend/src/components/UploadFileModal.js b/frontend/src/components/UploadFileModal.js
@@ -15,13 +15,12 @@ import {
     useToast,
 } from '@chakra-ui/react'
 import React, { useState } from 'react'
-import { useRecoilValue } from 'recoil'
 
 import { FileUploader } from 'react-drag-drop-files'
 import { axiosPreset } from '../axiosConfig'
 import LoadingSpinner from './LoadingSpinner'
-import { currentTicketState } from '../state/atoms'
 import { createErrorMessage } from '../utils/errorToasts'
+import { useGetCurrentTicket } from '../hooks/hooks'
 
 const fileTypes = ['PNG', 'JPG', 'PDF']
 const UploadFileModal = ({
@@ -31,7 +30,7 @@ const UploadFileModal = ({
     refetchFiles,
     isSupportingDocument,
 }) => {
-    const ticket = useRecoilValue(currentTicketState)
+    const ticket = useGetCurrentTicket()
     const [filesToUpload, setFilesToUpload] = useState([])
     const [uploadedFiles, setUploadedFiles] = useState(startingUploadedFiles)
     const [filesToDelete, setFilesToDelete] = useState([])

diff --git a/frontend/src/contexts/CustomRoutes.js b/frontend/src/contexts/CustomRoutes.js
@@ -15,7 +15,9 @@ export const PrivateRoute = () => {
                 to="/login"
                 state={{
                     from:
-                        location.pathname != '/login' ? location.pathname : '/',
+                        location.pathname !== '/login'
+                            ? location.pathname
+                            : '/',
                 }}
             />
         )