persist middleware

src/Components/LoggedIn/Content/Discounts/index.tsx

@@ -108,15 +108,7 @@ const Discounts: React.FC = () =>  {
   };
 
 
-  let { discountsArray, discountsArraySet } = useStore<StoreState>((state) => state);
+  const { discountsArray, discountsArraySet } = useStore<StoreState>((state) => state);
-
-  const getDiscounts = localStorage.getItem("discounts");
-  const store = useStore( (state) => state );
-
-  if( getDiscounts && !store.discountsArray.length )   { 
-    const rows:Array<DiscountProps> = JSON.parse(getDiscounts); 
-    if( rows.length )   { store.discountsArraySet( rows ); };
-  }
 
   const { discountsActiveArray, discountsActiveArraySet } = useStore<StoreState>((state) => state);
   let discountsActiveArrayUpdated:Array<number>;
@@ -132,19 +124,11 @@ const Discounts: React.FC = () =>  {
 
     if( JSON.stringify(discountsActiveArray) != JSON.stringify(discountsActiveArrayUpdated) )   {
       discountsActiveArraySet( discountsActiveArrayUpdated );
-      localStorage.setItem("activeDiscounts", JSON.stringify( discountsActiveArrayUpdated ));
     }
   }
 
   findActiveDiscounts();
 
-  const getActiveDiscounts = localStorage.getItem("activeDiscounts");
-
-  if( getActiveDiscounts && !store.discountsArray.length )   { 
-    const rows:Array<number> = JSON.parse(getActiveDiscounts); 
-    if( rows.length )   { store.discountsActiveArraySet( rows ); };
-  }
-
   const discountsArrayConverted = discountsArray.map( (item) => {
     const dateFrom = item.from ? new Date( Number(item.from) ) : "";
     const dateDueTo = item.from ? new Date( Number(item.dueTo) ) : "";
@@ -172,7 +156,7 @@ const Discounts: React.FC = () =>  {
     }
   } );
 
-  const createDiscount = ( name:string, discount: number ) => {
+  const createDiscount = ( name:string, discount: number, addedMore: number ) => {
     const newDiscount = { 
       id: new Date().getTime(), 
       name, 
@@ -188,15 +172,21 @@ const Discounts: React.FC = () =>  {
 
     const discountsArrayUpdated = [ ...discountsArray, newDiscount ];
     discountsArraySet( discountsArrayUpdated );
-    localStorage.setItem("discounts", JSON.stringify( discountsArrayUpdated ));
   }
 
   const fieldName = React.useRef<HTMLInputElement | null>(null);
   const fieldDiscount = React.useRef<HTMLInputElement | null>(null);
+  const fieldAddedMore = React.useRef<HTMLInputElement | null>(null);
 
   const checkFields = () => {
-    if( fieldName.current != null && fieldDiscount.current != null )  {
+    if( fieldName.current != null 
-      createDiscount( fieldName.current.value, Number(fieldDiscount.current.value) );
+      && fieldDiscount.current != null 
+      && fieldAddedMore.current != null )  {
+
+      createDiscount( fieldName.current.value, 
+        Number(fieldDiscount.current.value), 
+        Number(fieldAddedMore.current.value) );
+        
     }
   }
 
@@ -225,7 +215,6 @@ const Discounts: React.FC = () =>  {
     } );
 
     discountsArraySet( discountsArray );
-    localStorage.setItem("discounts", JSON.stringify( discountsArray ));
   }
 
   return (
@@ -341,6 +330,27 @@ const Discounts: React.FC = () =>  {
             inputRef={ fieldDiscount }
           />
 
+          <TextField
+            id = "standard-basic"
+            label = { "Внесено больше" }
+            variant = "filled"
+            color = "secondary"
+            type = "number"
+            sx={{
+              marginTop: "15px"
+            }}
+            InputProps={{
+              style: {
+                backgroundColor: theme.palette.content.main,
+                color: theme.palette.secondary.main,
+              } }} 
+            InputLabelProps={{
+              style: {
+                color: theme.palette.secondary.main
+              } }} 
+            inputRef={ fieldAddedMore }
+          />
+
           <TableContainer component={Paper} sx={{ 
             width: "100%", 
             marginTop: "35px",

src/Components/LoggedIn/Content/Tariffs/DataGridElement/index.tsx

@@ -67,6 +67,12 @@ const columns: GridColDef[] = [
     width: 160,
     sortable: false,
   },
+  {
+    field: "conditions",
+    headerName: "Условия",
+    width: 110,
+    sortable: false,
+  },
 ];
 
 const rows = [
@@ -79,8 +85,6 @@ const rows = [
   ] },
 ];
 
-//localStorage.setItem("tariffs", JSON.stringify(rows));
-
 const rowz:Array<PromocodeProps> = [
   { id: 1, name: "Промокод 1", endless: false, from: "", dueTo: "", privileges: [ 
     { 
@@ -111,21 +115,6 @@ const DataGridElement: React.FC<MWProps> = ({ openModal }) =>  {
   const { discountsArray, discountsArraySet } = useStore<StoreState>((state) => state);
   const { discountsActiveArray, discountsActiveArraySet } = useStore<StoreState>((state) => state);
 
-  const getDiscounts = localStorage.getItem("discounts");
-  const store = useStore( (state) => state );
-
-  if( getDiscounts && !store.discountsArray.length )   { 
-    const rows:Array<DiscountProps> = JSON.parse(getDiscounts); 
-    if( rows.length )   { store.discountsArraySet( rows ); };
-  }
-
-  const getActiveDiscounts = localStorage.getItem("activeDiscounts");
-
-  if( getActiveDiscounts && !store.discountsArray.length )   { 
-    const rows:Array<number> = JSON.parse(getActiveDiscounts); 
-    if( rows.length )   { store.discountsActiveArraySet( rows ); };
-  }
-
   const [checkboxStates, setCheckboxStates] = React.useState(1);
 
   const checkboxToggle = () => {
@@ -159,8 +148,6 @@ const DataGridElement: React.FC<MWProps> = ({ openModal }) =>  {
     }
   } );
 
-  localStorage.setItem("tariffs", JSON.stringify(tariffsArray));
-
   const { tariffsSelectedRowsData, tariffsSelectedRowsDataSet } = useStore<StoreState>((state) => state);
   const onRowsSelectionHandler = ( ids:GridSelectionModel ) => {
     const result:Array<ArrayProps> = [];
@@ -383,7 +370,14 @@ const DataGridElement: React.FC<MWProps> = ({ openModal }) =>  {
             Корзина
           </Typography>
 
-            <FormControlLabel sx={{ marginTop: "15px", }} control={
+          <Box sx={{ 
+            display: "flex", 
+            marginTop: "15px", 
+            marginBottom: "15px",
+            width: "350px",
+            justifyContent: "space-between"
+          }}>
+            <FormControlLabel control={
               <Checkbox sx={{
                 color: theme.palette.secondary.main,
                 "&.Mui-checked": {
@@ -392,6 +386,29 @@ const DataGridElement: React.FC<MWProps> = ({ openModal }) =>  {
               }} onClick={ () => checkboxToggle() } />
             } label="НКО" />
 
+            <TextField
+              id = "standard-basic"
+              label = { "Внесено" }
+              variant = "filled"
+              size="small"
+              color = "secondary"
+              type="number"
+              sx={{
+                width: "200px"
+              }}
+              InputProps={{
+                style: {
+                  backgroundColor: theme.palette.content.main,
+                  color: theme.palette.secondary.main,
+                } }} 
+              InputLabelProps={{
+                style: {
+                  color: theme.palette.secondary.main
+                } }} 
+              //inputRef={ fieldPromocode }
+            />
+          </Box>
+          
           <List sx={{
             width: "50%",
             border: "1px solid",

src/store.ts

@@ -1,31 +1,40 @@
 import create from "zustand";
+import { persist } from "zustand/middleware"
 import { ArrayProps } from "./Components/LoggedIn/Content/Tariffs/types";
 import { PromocodeProps } from "./Components/LoggedIn/Content/Promocode/types";
 import { DiscountProps } from "./Components/LoggedIn/Content/Discounts/types";
 
 
-const useStore = create<StoreState>((set) => ({
+const useStore = create<StoreState>()(
+  persist(
+    (set, get) => ({
       tariffsArray: [],
-  tariffsArraySet: (array) => set({ tariffsArray: array }),
+      tariffsArraySet: (array:Array<ArrayProps>) => set({ tariffsArray: array }),
 
       tariffsSelectedRowsData: [],
-  tariffsSelectedRowsDataSet: (array) => set({ tariffsSelectedRowsData: array }),
+      tariffsSelectedRowsDataSet: (array:Array<ArrayProps>) => set({ tariffsSelectedRowsData: array }),
 
       cartRowsData: [],
-  cartRowsDataSet: (array) => set({ cartRowsData: array }),
+      cartRowsDataSet: (array:Array<ArrayProps>) => set({ cartRowsData: array }),
 
       promocodeArray: [],
-  promocodeArraySet: (array) => set({ promocodeArray: array }),
+      promocodeArraySet: (array:Array<PromocodeProps>) => set({ promocodeArray: array }),
 
       discountsArray: [],
-  discountsArraySet: (array) => set({ discountsArray: array }),
+      discountsArraySet: (array:Array<DiscountProps>) => set({ discountsArray: array }),
 
       discountsActiveArray: [],
-  discountsActiveArraySet: (array) => set({ discountsActiveArray: array }),
+      discountsActiveArraySet: (array:Array<number>) => set({ discountsActiveArray: array }),
 
       discountsSelectedRowsData: [],
-  discountsSelectedRowsDataSet: (array) => set({ discountsSelectedRowsData: array }),
+      discountsSelectedRowsDataSet: (array:Array<DiscountProps>) => set({ discountsSelectedRowsData: array }),
-}))
+    }),
+    {
+      name: "arrays-storage",
+      getStorage: () => localStorage,
+    }
+  )
+);
 
 export interface StoreState {
   tariffsArray: Array<ArrayProps>,