From 1b28f0d3d2974e8dc3b1c865a9df2df2c2539b2d Mon Sep 17 00:00:00 2001 From: Thomas Lund Fagermyr <35408743+thomaslf97@users.noreply.github.com> Date: Mon, 28 Oct 2024 12:57:43 +0100 Subject: [PATCH] Feat/implement global state (#354) * chore: Added waiting status to cancel functionality * feat: Added zustand to library * feat: Added hook for global state * feat: Rewritten admin access to hook * fix: Rewritten admin/user access check to use hook --- package.json | 3 +- .../AddCaseButtons/AddCaseButtons.tsx | 12 ++--- .../CaseCardComponent/CaseCardComponent.tsx | 3 -- .../GrossDepositionEnviromentGroup.tsx | 8 ++-- .../OutcropAnalogueGroup.tsx | 8 ++-- .../StratigrapicGroups/StratigrapicGroups.tsx | 8 ++-- .../CaseGroup/CaseButtons/CaseButtons.tsx | 27 ++++++------ src/features/Compute/CaseGroup/CaseGroup.tsx | 10 ++--- .../Compute/CaseGroup/CaseRow/CaseRow.tsx | 8 ---- .../CaseSettingSelects/CaseSettingSelect.tsx | 6 +-- .../CaseSettingSelects/ModelAreaSelect.tsx | 6 +-- .../VariogramSettingSelect.tsx | 8 ---- .../ModelView/DeleteButton/DeleteModel.tsx | 10 ++--- .../ModelAreaCoordinates.tsx | 6 +-- .../ModelMetadataView/ModelMetadataView.tsx | 12 ++--- .../ModelNameFrame/ModelNameFrame.tsx | 15 ++++--- src/features/ModelView/ModelView.tsx | 14 +----- src/hooks/GlobalState.tsx | 44 +++++++++++++++++++ .../useIsOwnerOrAdmin.tsx} | 9 ++-- src/pages/Browse/Browse.tsx | 7 +-- .../Compute/ComputeObject/ComputeObject.tsx | 9 ---- .../ComputeVariogram/ComputeVariogram.tsx | 18 +++----- src/pages/ModelPages/Model/Model.tsx | 12 ++++- yarn.lock | 5 +++ 24 files changed, 138 insertions(+), 130 deletions(-) create mode 100644 src/hooks/GlobalState.tsx rename src/{utils/IsOwnerOrAdmin.tsx => hooks/useIsOwnerOrAdmin.tsx} (56%) diff --git a/package.json b/package.json index df8accba..e3f1ccce 100644 --- a/package.json +++ b/package.json @@ -36,7 +36,8 @@ "styled-components": "6.1.13", "typescript": "^5.5.4", "web-vitals": "^2.1.0", - "zod": "^3.23.8" + "zod": "^3.23.8", + "zustand": "^5.0.0" }, "scripts": { "start": "env-cmd -f .env.local react-scripts start", diff --git a/src/components/AddCaseButtons/AddCaseButtons.tsx b/src/components/AddCaseButtons/AddCaseButtons.tsx index 080cf9ad..e42eeea7 100644 --- a/src/components/AddCaseButtons/AddCaseButtons.tsx +++ b/src/components/AddCaseButtons/AddCaseButtons.tsx @@ -1,18 +1,18 @@ import { Button, Icon } from '@equinor/eds-core-react'; import { add as ADD } from '@equinor/eds-icons'; import { ComputeCaseDto } from '../../api/generated'; +import { useIsOwnerOrAdmin } from '../../hooks/useIsOwnerOrAdmin'; export const AddCaseButtons = ({ title, localList, addCase, - isOwner, }: { title: string; localList?: ComputeCaseDto[]; addCase?: (methodType: string) => void; - isOwner: () => boolean; }) => { + const isOwnerOrAdmin = useIsOwnerOrAdmin(); const filerLocalList = (methodType: string) => { if (!localList) return []; const methodFileter = @@ -26,7 +26,7 @@ export const AddCaseButtons = ({ diff --git a/src/components/OutcropAnalogue/OutcropAnalogueGroup/OutcropAnalogueGroup.tsx b/src/components/OutcropAnalogue/OutcropAnalogueGroup/OutcropAnalogueGroup.tsx index 705414f1..87737d3a 100644 --- a/src/components/OutcropAnalogue/OutcropAnalogueGroup/OutcropAnalogueGroup.tsx +++ b/src/components/OutcropAnalogue/OutcropAnalogueGroup/OutcropAnalogueGroup.tsx @@ -17,6 +17,7 @@ import { useOutcropAnalouge } from '../../../hooks/useOutcropAnalogue'; import * as StyledDialog from '../../../styles/addRowDialog/AddRowDialog.styled'; import { OutcropSelect } from '../OutcropSelect/OutcropSelect'; import * as Styled from './OutcropAnalogueGroup.styled'; +import { useIsOwnerOrAdmin } from '../../../hooks/useIsOwnerOrAdmin'; export interface OutcropType { outcropId?: string; @@ -42,13 +43,12 @@ export const OutcropAnalogueGroup = ({ modelIdParent, defaultMetadata, outcropGroup, - hideContent, }: { modelIdParent?: string; defaultMetadata: AnalogueModelDetail; outcropGroup: OutcropDto[]; - hideContent: () => boolean; }) => { + const isOwnerOrAdmin = useIsOwnerOrAdmin(); const [showOutcropDialog, setShowOutcropDialog] = useState(false); const [errors, setErrors] = useState({}); const [outcropObject, setOutcropObject] = @@ -117,7 +117,7 @@ export const OutcropAnalogueGroup = ({ {outcropGroup.map((row) => ( - {hideContent() && ( + {isOwnerOrAdmin && ( diff --git a/src/components/StrategraphicColumn/StratigrapicGroups/StratigrapicGroups.tsx b/src/components/StrategraphicColumn/StratigrapicGroups/StratigrapicGroups.tsx index 9b756d17..20b057b5 100644 --- a/src/components/StrategraphicColumn/StratigrapicGroups/StratigrapicGroups.tsx +++ b/src/components/StrategraphicColumn/StratigrapicGroups/StratigrapicGroups.tsx @@ -26,6 +26,7 @@ import * as StyledDialog from '../../../styles/addRowDialog/AddRowDialog.styled' import { StratigraphicColumnSelect } from '../StratigraphicColumnSelect/StratigraphicColumnSelect'; import { validateInput } from './StratigrapicGroups.hooks'; import * as Styled from './StratigrapicGroups.styled'; +import { useIsOwnerOrAdmin } from '../../../hooks/useIsOwnerOrAdmin'; export interface StratColumnType { country?: CountryDto; @@ -58,7 +59,6 @@ export const StratigrapicGroups = ({ defaultMetadata, stratColumnGroups, deleteStratColRow, - hideContent, }: { modelIdParent?: string; defaultMetadata: AnalogueModelDetail; @@ -66,8 +66,8 @@ export const StratigrapicGroups = ({ deleteStratColRow: ( stratigraphicGroupId: string, ) => Promise; - hideContent: () => boolean; }) => { + const isOwnerOrAdmin = useIsOwnerOrAdmin(); const [stratColumnObject, setStratColumnObject] = useState( defaultStratColumnData, ); @@ -171,7 +171,7 @@ export const StratigrapicGroups = ({ {stratColumnGroups.map((row) => ( - {hideContent() && ( + {isOwnerOrAdmin && ( diff --git a/src/features/Compute/CaseGroup/CaseButtons/CaseButtons.tsx b/src/features/Compute/CaseGroup/CaseButtons/CaseButtons.tsx index c6a1c1fb..aa842ab0 100644 --- a/src/features/Compute/CaseGroup/CaseButtons/CaseButtons.tsx +++ b/src/features/Compute/CaseGroup/CaseButtons/CaseButtons.tsx @@ -14,6 +14,7 @@ import { } from '../../../../api/generated'; import { ConfirmDialog } from '../../../../components/ConfirmDialog/ConfirmDialog'; import * as Styled from './CaseButtons.styled'; +import { useIsOwnerOrAdmin } from '../../../../hooks/useIsOwnerOrAdmin'; export const CaseButtons = ({ id, @@ -21,7 +22,6 @@ export const CaseButtons = ({ saved, isProcessed, caseStatus, - isOwner, hasUnsavedCase, saveCase, runCase, @@ -34,7 +34,6 @@ export const CaseButtons = ({ saved: boolean; isProcessed?: boolean; caseStatus: ComputeJobStatus; - isOwner: () => boolean; hasUnsavedCase: boolean; runCase?: () => void; saveCase: () => void; @@ -44,6 +43,7 @@ export const CaseButtons = ({ setAlertMessage: (message: string) => void; duplicateCase: () => void; }) => { + const isOwnerOrAdmin = useIsOwnerOrAdmin(); const [deleteConfirm, setDeleteConfirm] = useState(false); const [saveConfirm, setSaveConfirm] = useState(false); const navigate = useNavigate(); @@ -61,19 +61,20 @@ export const CaseButtons = ({ }; const deleteTooltip = () => { - if (!isOwner()) return 'Can not delete because you are not owner or admin.'; + if (!isOwnerOrAdmin) + return 'Can not delete because you are not owner or admin.'; return 'Can not delete unsaved case.'; }; const duplicateTooltip = () => { - if (!isOwner()) + if (!isOwnerOrAdmin) return 'Can not duplicate because you are not owner or admin.'; return 'Can not duplicate unsaved case.'; }; return ( - {id.length < 3 || !isOwner() ? ( + {id.length < 3 || !isOwnerOrAdmin ? ( diff --git a/src/features/ModelView/ModelMetadataView/ModelMetadataView.tsx b/src/features/ModelView/ModelMetadataView/ModelMetadataView.tsx index 10ffaea4..c6ecbf86 100644 --- a/src/features/ModelView/ModelMetadataView/ModelMetadataView.tsx +++ b/src/features/ModelView/ModelMetadataView/ModelMetadataView.tsx @@ -25,7 +25,7 @@ import { useFetchModel } from '../../../hooks/useFetchModel'; import { EditNameDescription } from '../EditNameDescription/EditNameDescription'; import * as Styled from './ModelMetadataView.styled'; import { getAnalogueModelImage } from '../../../api/custom/getAnalogueModelImageById'; -import { isOwnerOrAdmin } from '../../../utils/IsOwnerOrAdmin'; +import { useIsOwnerOrAdmin } from '../../../hooks/useIsOwnerOrAdmin'; export const ModelMetadataView = ({ modelIdParent, @@ -34,6 +34,7 @@ export const ModelMetadataView = ({ modelIdParent?: string; uploadingProgress?: number; }) => { + const isOwnerOrAdmin = useIsOwnerOrAdmin(); const { isLoading, data } = useFetchModel( modelIdParent ? modelIdParent : undefined, ); @@ -244,10 +245,6 @@ export const ModelMetadataView = ({ } }; - const hideContent = () => { - return isOwnerOrAdmin(data?.data.createdBy); - }; - if (isLoading || !data?.success) return

Loading ...

; return ( @@ -264,7 +261,7 @@ export const ModelMetadataView = ({ )} - {hideContent() && ( + {isOwnerOrAdmin && ( diff --git a/src/pages/ModelPages/Compute/ComputeObject/ComputeObject.tsx b/src/pages/ModelPages/Compute/ComputeObject/ComputeObject.tsx index ffdf0081..e67a5413 100644 --- a/src/pages/ModelPages/Compute/ComputeObject/ComputeObject.tsx +++ b/src/pages/ModelPages/Compute/ComputeObject/ComputeObject.tsx @@ -10,8 +10,6 @@ import { ComputeHeader } from '../../../../features/Compute/ComputeHeader/Comput import { useFetchCases } from '../../../../hooks/useFetchCases'; import * as Styled from '../Compute.styled'; import { CaseInfoTyoe } from '../ComputeVariogram/ComputeVariogram'; -import { isOwnerOrAdmin } from '../../../../utils/IsOwnerOrAdmin'; -import { useFetchModel } from '../../../../hooks/useFetchModel'; const ObjectCaseInfo: CaseInfoTyoe = { type: 'Channel', @@ -24,7 +22,6 @@ const ObjectCaseInfo: CaseInfoTyoe = { export const ComputeObject = () => { const [showAlert, setAlert] = useState(); const { modelId } = useParams<{ modelId: string }>(); - const model = useFetchModel(); function clearStatus() { setAlert(undefined); @@ -35,10 +32,6 @@ export const ComputeObject = () => { const { data } = useFetchCases(); - const isOwner = () => { - return isOwnerOrAdmin(model?.data?.data.createdBy); - }; - const computeObject = useMutation({ mutationFn: JobsService.postApiJobsComputeObjectEstimations, onSuccess: () => { @@ -78,7 +71,6 @@ export const ComputeObject = () => { methodName="Channel" setAlertMessage={setAlertMessage} runCase={runComputeObject} - isOwner={isOwner} /> { methodName="Mouthbar" setAlertMessage={setAlertMessage} runCase={runComputeObject} - isOwner={isOwner} /> { + const isOwnerOrAdmin = useIsOwnerOrAdmin(); const [showAlert, setAlert] = useState(); const [triggerAddCase, setTriggerAddCase] = useState(); const [localCaseList, setLocalCaseList] = useState>([]); const { modelId } = useParams<{ modelId: string }>(); - const model = useFetchModel(); - - const isOwner = () => { - return isOwnerOrAdmin(model?.data?.data.createdBy); - }; const updateLocalCaseList = (type: string, add: boolean) => { if (add) { @@ -110,7 +105,7 @@ export const ComputeVariogram = () => { disabled={ triggerAddCase?.includes('Indicator') || localCaseList?.includes('Indicator') || - !isOwner() + !isOwnerOrAdmin } > @@ -122,7 +117,7 @@ export const ComputeVariogram = () => { disabled={ triggerAddCase?.includes('Net-To-Gross') || localCaseList?.includes('Net-To-Gross') || - !isOwner() + !isOwnerOrAdmin } > @@ -134,7 +129,7 @@ export const ComputeVariogram = () => { disabled={ triggerAddCase?.includes('ContiniousParameter') || localCaseList?.includes('ContiniousParameter') || - !isOwner() + !isOwnerOrAdmin } > @@ -165,7 +160,6 @@ export const ComputeVariogram = () => { setAlertMessage={setAlertMessage} updateLocalCaseList={updateLocalCaseList} runCase={runComputeVariogram} - isOwner={isOwner} /> { setAlertMessage={setAlertMessage} updateLocalCaseList={updateLocalCaseList} runCase={runComputeVariogram} - isOwner={isOwner} /> { setAlertMessage={setAlertMessage} updateLocalCaseList={updateLocalCaseList} runCase={runComputeVariogram} - isOwner={isOwner} /> { const { data, isLoading, failureReason } = useFetchModel(); + const { setAnalogueModel } = usePepmContextStore(); + + useEffect(() => { + if (data) { + setAnalogueModel(data.data); + console.log('setting global state'); + } + }, [data, setAnalogueModel]); if (failureReason) return ( @@ -52,7 +62,7 @@ export const Model = () => { - + diff --git a/yarn.lock b/yarn.lock index 7c47d0bf..6ca1b2de 100644 --- a/yarn.lock +++ b/yarn.lock @@ -11551,3 +11551,8 @@ zrender@5.6.0: integrity sha512-uzgraf4njmmHAbEUxMJ8Oxg+P3fT04O+9p7gY+wJRVxo8Ge+KmYv0WJev945EH4wFuc4OY2NLXz46FZrWS9xJg== dependencies: tslib "2.3.0" + +zustand@^5.0.0: + version "5.0.0" + resolved "https://registry.yarnpkg.com/zustand/-/zustand-5.0.0.tgz#71f8aaecf185592a3ba2743d7516607361899da9" + integrity sha512-LE+VcmbartOPM+auOjCCLQOsQ05zUTp8RkgwRzefUk+2jISdMMFnxvyTjA4YNWr5ZGXYbVsEMZosttuxUBkojQ==