chore: initialize and implement project estimate store

makeplane · Dec 18, 2023 · 73e36ce · 73e36ce
1 parent 34e4b6e
commit 73e36ce
Show file tree

Hide file tree

Showing 16 changed files with 368 additions and 178 deletions.
diff --git a/web/components/core/activity.tsx b/web/components/core/activity.tsx
@@ -1,10 +1,8 @@
 import { useRouter } from "next/router";
 import { useEffect } from "react";
 import { observer } from "mobx-react-lite";
-// hooks
-import { useLabel } from "hooks/store";
-// hook
-import useEstimateOption from "hooks/use-estimate-option";
+// store hooks
+import { useEstimate, useLabel } from "hooks/store";
 // icons
 import { Tooltip, BlockedIcon, BlockerIcon, RelatedIcon, LayersIcon, DiceIcon } from "@plane/ui";
 import {
@@ -76,7 +74,7 @@ const UserLink = ({ activity }: { activity: IIssueActivity }) => {
 const LabelPill = observer(({ labelId, workspaceSlug }: { labelId: string; workspaceSlug: string }) => {
   // store hooks
   const {
-    workspaceLabel: { workspaceLabels, fetchWorkspaceLabels },
+    workspace: { workspaceLabels, fetchWorkspaceLabels },
   } = useLabel();
 
   useEffect(() => {
@@ -94,16 +92,21 @@ const LabelPill = observer(({ labelId, workspaceSlug }: { labelId: string; works
   );
 });
 
-const EstimatePoint = ({ point }: { point: string }) => {
-  const { estimateValue, isEstimateActive } = useEstimateOption(Number(point));
+const EstimatePoint = observer((props: { point: string }) => {
+  const { point } = props;
+  const { areEstimatesEnabledForCurrentProject, getEstimatePointValue } = useEstimate();
   const currentPoint = Number(point) + 1;
 
+  const estimateValue = getEstimatePointValue(Number(point));
+
   return (
     <span className="font-medium text-custom-text-100">
-      {isEstimateActive ? estimateValue : `${currentPoint} ${currentPoint > 1 ? "points" : "point"}`}
+      {areEstimatesEnabledForCurrentProject
+        ? estimateValue
+        : `${currentPoint} ${currentPoint > 1 ? "points" : "point"}`}
     </span>
   );
-};
+});
 
 const activityDetails: {
   [key: string]: {

diff --git a/web/components/estimates/create-update-estimate-modal.tsx b/web/components/estimates/create-update-estimate-modal.tsx
@@ -2,11 +2,9 @@ import React, { useEffect } from "react";
 import { useRouter } from "next/router";
 import { Controller, useForm } from "react-hook-form";
 import { Dialog, Transition } from "@headlessui/react";
-
-// store
 import { observer } from "mobx-react-lite";
-import { useMobxStore } from "lib/mobx/store-provider";
-// hooks
+// store hooks
+import { useEstimate } from "hooks/store";
 import useToast from "hooks/use-toast";
 // ui
 import { Button, Input, TextArea } from "@plane/ui";
@@ -36,16 +34,14 @@ type FormValues = typeof defaultValues;
 
 export const CreateUpdateEstimateModal: React.FC<Props> = observer((props) => {
   const { handleClose, data, isOpen } = props;
-
   // router
   const router = useRouter();
   const { workspaceSlug, projectId } = router.query;
-
-  // store
-  const {
-    projectEstimates: { createEstimate, updateEstimate },
-  } = useMobxStore();
-
+  // store hooks
+  const { createEstimate, updateEstimate } = useEstimate();
+  // form info
+  // toast alert
+  const { setToastAlert } = useToast();
   const {
     formState: { errors, isSubmitting },
     handleSubmit,
@@ -60,8 +56,6 @@ export const CreateUpdateEstimateModal: React.FC<Props> = observer((props) => {
     reset();
   };
 
-  const { setToastAlert } = useToast();
-
   const handleCreateEstimate = async (payload: IEstimateFormData) => {
     if (!workspaceSlug || !projectId) return;
 
@@ -299,8 +293,8 @@ export const CreateUpdateEstimateModal: React.FC<Props> = observer((props) => {
                             ? "Updating Estimate..."
                             : "Update Estimate"
                           : isSubmitting
-                            ? "Creating Estimate..."
-                            : "Create Estimate"}
+                          ? "Creating Estimate..."
+                          : "Create Estimate"}
                       </Button>
                     </div>
                   </form>

diff --git a/web/components/estimates/delete-estimate-modal.tsx b/web/components/estimates/delete-estimate-modal.tsx
@@ -1,15 +1,13 @@
 import React, { useEffect, useState } from "react";
 import { useRouter } from "next/router";
 import { Dialog, Transition } from "@headlessui/react";
-// store
 import { observer } from "mobx-react-lite";
-import { useMobxStore } from "lib/mobx/store-provider";
-// hooks
+import { AlertTriangle } from "lucide-react";
+// store hooks
+import { useEstimate } from "hooks/store";
 import useToast from "hooks/use-toast";
 // types
 import { IEstimate } from "types";
-// icons
-import { AlertTriangle } from "lucide-react";
 // ui
 import { Button } from "@plane/ui";
 
@@ -21,27 +19,22 @@ type Props = {
 
 export const DeleteEstimateModal: React.FC<Props> = observer((props) => {
   const { isOpen, handleClose, data } = props;
-
+  // states
+  const [isDeleteLoading, setIsDeleteLoading] = useState(false);
   // router
   const router = useRouter();
   const { workspaceSlug, projectId } = router.query;
-
-  // store
-  const { projectEstimates: projectEstimatesStore } = useMobxStore();
-
-  // states
-  const [isDeleteLoading, setIsDeleteLoading] = useState(false);
-
-  // hooks
+  // store hooks
+  const { deleteEstimate } = useEstimate();
+  // toast alert
   const { setToastAlert } = useToast();
 
   const handleEstimateDelete = () => {
     if (!workspaceSlug || !projectId) return;
 
     const estimateId = data?.id!;
 
-    projectEstimatesStore
-      .deleteEstimate(workspaceSlug.toString(), projectId.toString(), estimateId)
+    deleteEstimate(workspaceSlug.toString(), projectId.toString(), estimateId)
       .then(() => {
         setIsDeleteLoading(false);
         handleClose();

diff --git a/web/components/estimates/estimates-list.tsx b/web/components/estimates/estimates-list.tsx
@@ -1,40 +1,36 @@
 import React, { useState } from "react";
 import { useRouter } from "next/router";
-// store
 import { observer } from "mobx-react-lite";
+import { Plus } from "lucide-react";
+// store hooks
+import { useEstimate } from "hooks/store";
 import { useMobxStore } from "lib/mobx/store-provider";
+import useToast from "hooks/use-toast";
 // components
 import { CreateUpdateEstimateModal, DeleteEstimateModal, EstimateListItem } from "components/estimates";
-//hooks
-import useToast from "hooks/use-toast";
 // ui
 import { Button, Loader } from "@plane/ui";
 import { EmptyState } from "components/common";
-// icons
-import { Plus } from "lucide-react";
 // images
 import emptyEstimate from "public/empty-state/estimate.svg";
 // types
 import { IEstimate } from "types";
 
 export const EstimatesList: React.FC = observer(() => {
+  // states
+  const [estimateFormOpen, setEstimateFormOpen] = useState(false);
+  const [estimateToDelete, setEstimateToDelete] = useState<string | null>(null);
+  const [estimateToUpdate, setEstimateToUpdate] = useState<IEstimate | undefined>();
   // router
   const router = useRouter();
   const { workspaceSlug, projectId } = router.query;
-
-  // store
+  // store hooks
   const {
     project: { currentProjectDetails, updateProject },
-    projectEstimates: { projectEstimates, getProjectEstimateById },
   } = useMobxStore();
-  // states
-  const [estimateFormOpen, setEstimateFormOpen] = useState(false);
-  const [estimateToDelete, setEstimateToDelete] = useState<string | null>(null);
-  const [estimateToUpdate, setEstimateToUpdate] = useState<IEstimate | undefined>();
-  // hooks
+  const { projectEstimates, getProjectEstimateById } = useEstimate();
+  // toast alert
   const { setToastAlert } = useToast();
-  // derived values
-  const estimatesList = projectEstimates;
 
   const editEstimate = (estimate: IEstimate) => {
     setEstimateFormOpen(true);
@@ -96,10 +92,10 @@ export const EstimatesList: React.FC = observer(() => {
         </div>
       </section>
 
-      {estimatesList ? (
-        estimatesList.length > 0 ? (
+      {projectEstimates ? (
+        projectEstimates.length > 0 ? (
           <section className="h-full overflow-y-auto bg-custom-background-100">
-            {estimatesList.map((estimate) => (
+            {projectEstimates.map((estimate) => (
               <EstimateListItem
                 key={estimate.id}
                 estimate={estimate}

diff --git a/web/components/issues/select/estimate.tsx b/web/components/issues/select/estimate.tsx
@@ -1,21 +1,22 @@
 import React from "react";
-
+import { observer } from "mobx-react-lite";
+import { Triangle } from "lucide-react";
+// store hooks
+import { useEstimate } from "hooks/store";
 // ui
 import { CustomSelect } from "@plane/ui";
-// icons
-import { Triangle } from "lucide-react";
-// fetch-keys
-import useEstimateOption from "hooks/use-estimate-option";
 
 type Props = {
   value: number | null;
   onChange: (value: number | null) => void;
 };
 
-export const IssueEstimateSelect: React.FC<Props> = ({ value, onChange }) => {
-  const { isEstimateActive, estimatePoints } = useEstimateOption();
+export const IssueEstimateSelect: React.FC<Props> = observer((props) => {
+  const { value, onChange } = props;
 
-  if (!isEstimateActive) return null;
+  const { areEstimatesEnabledForCurrentProject, activeEstimateDetails } = useEstimate();
+
+  if (!areEstimatesEnabledForCurrentProject) return null;
 
   return (
     <CustomSelect
@@ -24,7 +25,7 @@ export const IssueEstimateSelect: React.FC<Props> = ({ value, onChange }) => {
         <div className="flex items-center justify-center gap-1 text-xs">
           <Triangle className={`h-3 w-3 ${value !== null ? "text-custom-text-200" : "text-custom-text-300"}`} />
           <span className={value !== null ? "text-custom-text-200" : "text-custom-text-300"}>
-            {estimatePoints?.find((e) => e.key === value)?.value ?? "Estimate"}
+            {activeEstimateDetails?.points?.find((e) => e.key === value)?.value ?? "Estimate"}
           </span>
         </div>
       }
@@ -40,8 +41,8 @@ export const IssueEstimateSelect: React.FC<Props> = ({ value, onChange }) => {
           None
         </>
       </CustomSelect.Option>
-      {estimatePoints &&
-        estimatePoints.map((point) => (
+      {activeEstimateDetails?.points &&
+        activeEstimateDetails.points?.map((point) => (
           <CustomSelect.Option key={point.key} value={point.key}>
             <>
               <span>
@@ -53,4 +54,4 @@ export const IssueEstimateSelect: React.FC<Props> = ({ value, onChange }) => {
         ))}
     </CustomSelect>
   );
-};
+});
diff --git a/web/components/issues/sidebar-select/estimate.tsx b/web/components/issues/sidebar-select/estimate.tsx
@@ -1,22 +1,24 @@
 import React from "react";
-
-// hooks
-import useEstimateOption from "hooks/use-estimate-option";
+import { observer } from "mobx-react-lite";
+import { Triangle } from "lucide-react";
+// store hooks
+import { useEstimate } from "hooks/store";
 // ui
 import { CustomSelect } from "@plane/ui";
-// icons
-import { Triangle } from "lucide-react";
 
 type Props = {
   value: number | null;
   onChange: (val: number | null) => void;
   disabled?: boolean;
 };
 
-export const SidebarEstimateSelect: React.FC<Props> = ({ value, onChange, disabled = false }) => {
-  const { estimatePoints } = useEstimateOption();
+export const SidebarEstimateSelect: React.FC<Props> = observer((props) => {
+  const { value, onChange, disabled = false } = props;
+
+  const { activeEstimateDetails, getEstimatePointValue } = useEstimate();
+
+  const currentEstimate = getEstimatePointValue(value);
 
-  const currentEstimate = estimatePoints?.find((e) => e.key === value)?.value;
   return (
     <CustomSelect
       value={value}
@@ -43,8 +45,8 @@ export const SidebarEstimateSelect: React.FC<Props> = ({ value, onChange, disabl
           None
         </>
       </CustomSelect.Option>
-      {estimatePoints &&
-        estimatePoints.map((point) => (
+      {activeEstimateDetails?.points &&
+        activeEstimateDetails?.points?.map((point) => (
           <CustomSelect.Option key={point.key} value={point.key}>
             <>
               <span>
@@ -56,4 +58,4 @@ export const SidebarEstimateSelect: React.FC<Props> = ({ value, onChange, disabl
         ))}
     </CustomSelect>
   );
-};
+});