Merge pull request #190 from 0101oak/add/create-stores

Add/create stores

package.json

@@ -106,6 +106,7 @@
     "stream-browserify": "^3.0.0",
     "swiper": "^11.1.14",
     "uuid": "^11.0.3",
-    "yup": "^1.4.0"
+    "yup": "^1.4.0",
+    "zustand": "^5.0.2"
   }
 }

src/components/common/productPickerModal.tsx

@@ -1,8 +1,9 @@
 import { Button, Checkbox } from '@mui/material';
-import { getDictionary, getProductsPaged } from 'api/admin';
+import { getProductsPaged } from 'api/admin';
 
-import { GetProductsPagedRequest, common_Category, common_Product } from 'api/proto-http/admin';
+import { GetProductsPagedRequest, common_Product } from 'api/proto-http/admin';
 import { defaultProductFilterSettings } from 'constants/initialFilterStates';
+import { useDictionaryStore } from 'lib/stores/store';
 import {
   MaterialReactTable,
   useMaterialReactTable,
@@ -29,7 +30,7 @@ export const ProductPickerModal: FC<ProductsPickerData> = ({
   const [allProducts, setAllProducts] = useState<common_Product[]>([]);
   const [selectedProducts, setSelectedProducts] = useState<common_Product[]>([]);
   const [data, setData] = useState(allProducts);
-  const [categories, setCategories] = useState<common_Category[]>([]);
+  const categories = useDictionaryStore((state) => state.dictionary?.categories || []);
 
   const [currentPage, setCurrentPage] = useState(1);
   const [filter, setFilter] = useState<GetProductsPagedRequest>(defaultProductFilterSettings);
@@ -61,14 +62,6 @@ export const ProductPickerModal: FC<ProductsPickerData> = ({
     }
   }, [open, currentPage, filter, newLimit, offset]);
 
-  useEffect(() => {
-    const fetchDictionary = async () => {
-      const response = await getDictionary({});
-      setCategories(response.dictionary?.categories ? response.dictionary?.categories : []);
-    };
-    fetchDictionary();
-  }, []);
-
   useEffect(() => {
     // Filter allProducts based on selectedProductIds
     setData(allProducts);

src/components/managers/hero/entities/common-entity/common-entity.tsx

@@ -7,7 +7,6 @@ import styles from 'styles/hero.scss';
 import { Props } from '../interface/interface';
 
 export function CommonEntity({
-  type,
   title,
   prefix,
   link,

src/components/managers/hero/entities/entities.tsx

@@ -157,7 +157,6 @@ export const Entities: FC<EntitiesProps> = ({ entityRefs, entities, arrayHelpers
                     size={{ xs: 12 }}
                     aspectRatio={['16:9']}
                     onSaveMedia={(media: common_MediaFull[]) => saveMedia(media, 'main', index)}
-                    type={entity.type}
                   />
                   <Box component='div' className={styles.fields}>
                     <Field

src/components/managers/hero/entities/featured-products-(tags)/heroProductsTable.tsx

@@ -4,10 +4,10 @@ import DeleteIcon from '@mui/icons-material/Delete';
 import { Checkbox } from '@mui/material';
 import IconButton from '@mui/material/IconButton';
 import { useNavigate } from '@tanstack/react-location';
-import { getDictionary } from 'api/admin';
-import { common_Category, common_HeroFullInsert, common_Product } from 'api/proto-http/admin';
+import { common_HeroFullInsert, common_Product } from 'api/proto-http/admin';
 import { ROUTES } from 'constants/routes';
 import { useFormikContext } from 'formik';
+import { useDictionaryStore } from 'lib/stores/store';
 import {
   MRT_TableContainer,
   useMaterialReactTable,
@@ -28,8 +28,7 @@ export const HeroProductTable: FC<
   }
 > = ({ products, id, onReorder, isFeaturedProducts }) => {
   const { setFieldValue } = useFormikContext<common_HeroFullInsert>();
-  const [categories, setCategories] = useState<common_Category[]>([]);
-
+  const categories = useDictionaryStore((state) => state.dictionary?.categories || []);
   const navigate = useNavigate();
 
   const [data, setData] = useState(products);
@@ -38,14 +37,6 @@ export const HeroProductTable: FC<
     setData(products);
   }, [products]);
 
-  useEffect(() => {
-    const fetchDictionary = async () => {
-      const response = await getDictionary({});
-      setCategories(response.dictionary?.categories ? response.dictionary?.categories : []);
-    };
-    fetchDictionary();
-  }, []);
-
   const moveRow = useCallback(
     (fromIndex: number, toIndex: number) => {
       if (toIndex >= 0 && toIndex < data.length) {
@@ -151,7 +142,7 @@ export const HeroProductTable: FC<
         enableResizing: true,
         Cell: ({ cell }) => {
           const categoryId = cell.getValue() as number; // get the current row's categoryId
-          const category = categories.find((c) => c.id === categoryId); // find the category in the state
+          const category = categories?.find((c) => c.id === categoryId); // find the category in the state
           return <span>{category ? category.name!.replace('CATEGORY_ENUM_', '') : 'Unknown'}</span>; // return the category name or 'Unknown'
         },
       },

src/components/managers/hero/entities/interface/interface.ts

@@ -9,7 +9,6 @@ export interface EntitiesProps {
 }
 
 export interface Props {
-    type?: any;
     title: string;
     prefix: string;
     link: string;

src/components/managers/orders/interfaces/interface.ts

@@ -10,7 +10,6 @@ export interface SearchFilters {
 }
 
 export interface FilterProps {
-    dictionary: common_Dictionary | undefined;
     loading: boolean;
     onSearch: (filters: SearchFilters) => void;
 }

src/components/managers/orders/order-details/components/shipping-buyer.tsx

@@ -1,12 +1,12 @@
 import { Grid2 as Grid, Typography } from '@mui/material';
-import { common_Dictionary, common_OrderFull } from 'api/proto-http/frontend';
+import { common_OrderFull } from 'api/proto-http/frontend';
+import { useDictionaryStore } from 'lib/stores/store';
 import { Buyer } from './shipping-buyer-information/buyer';
 import { Shipping } from './shipping-buyer-information/shipping';
 import { TrackingNumber } from './shipping-buyer-information/tracking-number';
 
 interface Props {
   orderDetails: common_OrderFull | undefined;
-  dictionary: common_Dictionary | undefined;
   isPrinting: boolean;
   orderStatus: string | undefined;
   isEdit: boolean;
@@ -18,7 +18,6 @@ interface Props {
 
 export function ShippingBuyer({
   orderDetails,
-  dictionary,
   isPrinting,
   orderStatus,
   isEdit,
@@ -27,6 +26,7 @@ export function ShippingBuyer({
   handleTrackingNumberChange,
   saveTrackingNumber,
 }: Props) {
+  const { dictionary } = useDictionaryStore();
   const shipping = orderDetails?.shipping?.addressInsert;
   const buyer = orderDetails?.buyer?.buyerInsert;
 

src/components/managers/orders/order-details/page.tsx

@@ -102,7 +102,6 @@ export function OrderDetails() {
         <Grid size={{ xs: 12 }}>
           <ShippingBuyer
             orderDetails={orderDetails}
-            dictionary={dictionary}
             isPrinting={isPrinting}
             orderStatus={orderStatus}
             isEdit={isEdit}

src/components/managers/orders/orders-components/filter.tsx

@@ -9,10 +9,12 @@ import {
   TextField,
 } from '@mui/material';
 import { common_OrderStatusEnum, common_PaymentMethodNameEnum } from 'api/proto-http/admin';
+import { useDictionaryStore } from 'lib/stores/store';
 import { useState } from 'react';
 import { FilterProps } from '../interfaces/interface';
 
-export function Filter({ dictionary, loading, onSearch }: FilterProps) {
+export function Filter({ loading, onSearch }: FilterProps) {
+  const { dictionary } = useDictionaryStore();
   const [status, setStatus] = useState('');
   const [paymentMethod, setPaymentMethod] = useState('');
   const [orderId, setOrderId] = useState('');

src/components/managers/orders/orders.tsx

@@ -1,11 +1,10 @@
 import { Button, Grid2 as Grid } from '@mui/material';
 import { DataGrid } from '@mui/x-data-grid';
 import { useNavigate } from '@tanstack/react-location';
-import { getDictionary } from 'api/admin';
-import { common_Dictionary } from 'api/proto-http/admin';
 import { Layout } from 'components/login/layout';
 import { ROUTES } from 'constants/routes';
-import { FC, useEffect, useState } from 'react';
+import { useDictionaryStore } from 'lib/stores/store';
+import { FC, useEffect } from 'react';
 import { SearchFilters } from './interfaces/interface';
 import { Filter } from './orders-components/filter';
 import { orderData } from './orders-components/orders-data';
@@ -20,16 +19,10 @@ const searchFilters: SearchFilters = {
 
 export const Orders: FC = () => {
   const { rows, loading, newSearch, loadMore, loadMoreVisible } = useOrders();
-  const [dictionary, setDictionary] = useState<common_Dictionary>();
+  const { dictionary } = useDictionaryStore();
   const navigate = useNavigate();
 
   useEffect(() => {
-    const initializeData = async () => {
-      const response = await getDictionary({});
-      setDictionary(response.dictionary);
-    };
-
-    initializeData();
     newSearch(searchFilters);
   }, [searchFilters]);
 
@@ -41,7 +34,7 @@ export const Orders: FC = () => {
     <Layout>
       <Grid container spacing={2} marginTop='2%'>
         <Grid size={{ xs: 12 }} justifyContent='center'>
-          <Filter dictionary={dictionary} loading={loading} onSearch={newSearch} />
+          <Filter loading={loading} onSearch={newSearch} />
         </Grid>
         <Grid size={{ xs: 12 }}>
           <DataGrid

src/components/managers/orders/utility/use-order-details.ts

@@ -1,10 +1,11 @@
-import { getDictionary } from "api/admin";
 import { deliveredOrderUpdate, getOrderByUUID, refundOrderUpdate, setTrackingNumberUpdate } from "api/orders";
+import { useDictionaryStore } from "lib/stores/store";
 import { useEffect, useState } from "react";
 import { OrderDetailsState } from "../interfaces/interface";
 import { getOrderStatusName } from "../utility";
 
 export const useOrderDetails = (uuid: string) => {
+    const { dictionary } = useDictionaryStore();
     const [state, setState] = useState<OrderDetailsState>({
         orderDetails: undefined,
         dictionary: undefined,
@@ -19,16 +20,12 @@ export const useOrderDetails = (uuid: string) => {
     async function fetchOrderDetails() {
         setState(prev => ({ ...prev, isLoading: true }));
         try {
-            const [order, dictionary] = await Promise.all([
-                getOrderByUUID({ orderUuid: uuid }),
-                getDictionary({})
-            ])
-
+            const order = await getOrderByUUID({ orderUuid: uuid });
             setState(prev => ({
                 ...prev,
                 orderDetails: order.order,
-                dictionary: dictionary.dictionary,
-                orderStatus: getOrderStatusName(dictionary.dictionary, order.order?.order?.orderStatusId)
+                dictionary: dictionary,
+                orderStatus: getOrderStatusName(dictionary, order.order?.order?.orderStatusId)
             }))
         } catch (error) {
             console.error('Error fetching order details:', error);
@@ -39,7 +36,7 @@ export const useOrderDetails = (uuid: string) => {
 
     useEffect(() => {
         fetchOrderDetails()
-    }, [uuid])
+    }, [uuid, dictionary])
 
     useEffect(() => {
         const beforePrint = () => setIsPrinting(true);

src/components/managers/products/genericProductComponent/basicFields/basicFields.tsx

@@ -17,6 +17,7 @@ import { colors } from 'constants/colors';
 import { generateOrUpdateSKU, generateSKU } from 'features/utilitty/dynamicGenerationOfSku';
 import { findInDictionary } from 'features/utilitty/findInDictionary';
 import { ErrorMessage, Field, getIn, useFormikContext } from 'formik';
+import { useDictionaryStore } from 'lib/stores/store';
 import React, { FC, useCallback, useEffect, useMemo, useState } from 'react';
 import CountryList from 'react-select-country-list';
 import { v4 as uuidv4 } from 'uuid';
@@ -28,12 +29,12 @@ import { genderOptions } from '../utility/dictionaryConst';
 import { formatWellKnownTimestamp, parseWellKnownTimestamp } from '../utility/preorderTime';
 
 export const BasicFields: FC<BasicProductFieldsInterface> = ({
-  dictionary,
   product,
   isEditMode,
   isAddingProduct,
   isCopyMode,
 }) => {
+  const { dictionary } = useDictionaryStore();
   const { values, setFieldValue, errors, touched } = useFormikContext<common_ProductNew>();
   const countries = useMemo(() => CountryList().getData() as Country[], []);
   const [showPreorder, setShowPreorder] = useState(true);

src/components/managers/products/genericProductComponent/genericProductComponent.tsx

@@ -3,6 +3,7 @@ import { useNavigate } from '@tanstack/react-location';
 import { common_ProductNew, common_SizeWithMeasurementInsert } from 'api/proto-http/admin';
 import { ROUTES } from 'constants/routes';
 import { Field, Form, Formik, FormikHelpers } from 'formik';
+import { useDictionaryStore } from 'lib/stores/store';
 import { FC, useCallback, useEffect, useMemo, useState } from 'react';
 import { BasicFields } from './basicFields/basicFields';
 import { GenericProductFormInterface } from './interface/interface';
@@ -17,11 +18,11 @@ export const GenericProductForm: FC<GenericProductFormInterface> = ({
   isEditMode = false,
   isAddingProduct = false,
   isCopyMode,
-  dictionary,
   product,
   onSubmit,
   onEditModeChange,
 }) => {
+  const { dictionary } = useDictionaryStore();
   const [isFormChanged, setIsFormChanged] = useState(false);
   const [clearMediaPreview, setClearMediaPreview] = useState(false);
   const initialValues = useMemo(() => initialProductState, [initialProductState]);
@@ -143,7 +144,7 @@ export const GenericProductForm: FC<GenericProductFormInterface> = ({
                     <Field
                       component={BasicFields}
                       name='product.productBody'
-                      {...{ product, dictionary, isEditMode, isAddingProduct, isCopyMode }}
+                      {...{ product, isEditMode, isAddingProduct, isCopyMode }}
                     />
                   </Grid>
                   <Grid size={{ xs: 12 }}>

src/components/managers/products/genericProductComponent/interface/interface.ts

@@ -1,4 +1,4 @@
-import { common_Dictionary, common_ProductFull, common_ProductNew } from "api/proto-http/admin";
+import { common_ProductFull, common_ProductNew } from "api/proto-http/admin";
 
 export interface Country {
     value: string;
@@ -11,8 +11,6 @@ export interface GenericProductFormInterface {
     isEditMode?: boolean;
     isAddingProduct?: boolean;
     isCopyMode: boolean;
-    dictionary?: common_Dictionary;
-
     onSubmit: (
         values: common_ProductNew,
         actions: { setSubmitting: (isSubmitting: boolean) => void; resetForm: () => void },
@@ -21,7 +19,6 @@ export interface GenericProductFormInterface {
 }
 
 export interface BasicProductFieldsInterface {
-    dictionary?: common_Dictionary;
     product?: common_ProductFull;
     isEditMode?: boolean;
     isAddingProduct: boolean;
@@ -38,7 +35,6 @@ export interface MediaViewInterface {
 
 export interface ProductSizesAndMeasurementsInterface {
     isEditMode?: boolean;
-    dictionary?: common_Dictionary;
     isAddingProduct: boolean;
 }
 

src/components/managers/products/genericProductComponent/sizesAndMeasurements/sizesAndMeasurements.tsx

@@ -18,6 +18,7 @@ import {
 import { sortItems } from 'features/filterForSizesAndMeasurements/filter';
 import { findInDictionary } from 'features/utilitty/findInDictionary';
 import { useFormikContext } from 'formik';
+import { useDictionaryStore } from 'lib/stores/store';
 import React, { FC, useCallback, useEffect, useState } from 'react';
 import styles from 'styles/addProd.scss';
 import { ProductSizesAndMeasurementsInterface } from '../interface/interface';
@@ -26,8 +27,8 @@ import { categoryMeasurementsMapping } from './mappingMeasurementsForCategories'
 export const SizesAndMeasurements: FC<ProductSizesAndMeasurementsInterface> = ({
   isEditMode = true,
   isAddingProduct,
-  dictionary,
 }) => {
+  const { dictionary } = useDictionaryStore();
   const { values, setFieldValue, errors, touched } = useFormikContext<common_ProductNew>();
   const [lastSizeNonZero, setLastSizeNonZero] = useState(false);
   const [hasChangedSize, setHasChangedSize] = useState<{ [key: number]: boolean }>({});