refactor: Remove lodash

.eslintrc.json

@@ -16,6 +16,13 @@
     "react/prop-types": 0,
     "@typescript-eslint/explicit-function-return-type": 0,
     "@typescript-eslint/no-explicit-any": 0,
+    "@typescript-eslint/no-unused-vars": [
+      "error",
+      {
+        "varsIgnorePattern": "^_",
+        "argsIgnorePattern": "^_"
+      }
+    ],
     "prettier/prettier": ["error", { "singleQuote": true }],
     "react/display-name": 0
   },

src/modules/catalog/category/CategoryModalContent.tsx

@@ -1,5 +1,4 @@
 import React from 'react';
-import _ from 'lodash';
 import * as Yup from 'yup';
 import { LabeledSelect, Switch, Field } from '@tabetalt/kit';
 import { useFormik } from 'formik';
@@ -34,13 +33,13 @@ export const CategoryModalContent: React.FC<{
   const onSubmit = async (
     values: CategoryUpdateInput | CategoryCreateInput
   ) => {
-    const input = _.pick(
-      {
-        ...values,
-        parentId: values.parentId ? Number(values.parentId) : null,
-      },
-      ['status', 'title', 'showInMainMenu', 'parentId', 'tenantId']
-    );
+    const input = {
+      status: values.status,
+      title: values.title,
+      showInMainMenu: values.showInMainMenu,
+      tenantId: values.tenantId,
+      parentId: values.parentId ? Number(values.parentId) : null,
+    };
 
     if (currentCategory) {
       await updateCategory({

src/modules/catalog/product/ProductUpdate.tsx

@@ -1,14 +1,23 @@
 import React, { useCallback } from 'react';
-import _ from 'lodash';
 import { useRoutes, useParams, useNavigate } from 'react-router-dom';
 import { Box, Button, Heading } from 'theme-ui';
 import { LoaderIcon } from '@tabetalt/kit';
 import Layout from '../../../components/layout/Layout';
-import ProductBasicOptions from './components/ProductBasicOptions';
-import ProductDescription from './components/ProductDescription';
-import ProductInventory from './components/ProductInventory';
-import ProductCampaign from './components/ProductCampaign';
-import ProductVariants from './components/ProductVariants';
+import ProductBasicOptions, {
+  ProductBasicOptionsValues,
+} from './components/ProductBasicOptions';
+import ProductDescription, {
+  ProductDescriptionValues,
+} from './components/ProductDescription';
+import ProductInventory, {
+  ProductInventoryValues,
+} from './components/ProductInventory';
+import ProductCampaign, {
+  ProductCampaignValues,
+} from './components/ProductCampaign';
+import ProductVariants, {
+  ProductVariantsValues,
+} from './components/ProductVariants';
 import ProductNavigation from './components/ProductNavigation';
 import { Error } from '../../../components/common';
 import { headerLinks } from '../products';
@@ -20,8 +29,17 @@ import {
   useGetProductQuery,
   useUpdateProductMutation,
   ProductUpdateInput,
+  GetProductQuery,
 } from '../../../generated/graphql';
 
+export type Product = GetProductQuery['product'];
+export type InputProductValues =
+  | ProductBasicOptionsValues
+  | ProductDescriptionValues
+  | ProductInventoryValues
+  | ProductVariantsValues
+  | ProductCampaignValues;
+
 const ProductUpdate: React.FC = () => {
   const navigate = useNavigate();
   const params = useParams();
@@ -45,19 +63,20 @@ const ProductUpdate: React.FC = () => {
   });
 
   const onSubmit = useCallback(
-    async (values) => {
-      const input = _.omit({ tenantId: 1, ...data?.product, ...values }, [
-        'id',
-        '__typename',
-        'price',
-        'categories',
-      ]) as ProductUpdateInput;
+    async (values: Partial<ProductBasicOptionsValues>) => {
+      const { id: _id, __typename, price, categories, ...inputVars } = {
+        ...data?.product,
+        ...values,
+      };
+
+      const input = inputVars as ProductUpdateInput;
 
-      if (values.price) {
-        input.price = values.price.replace(',', '.') * 100;
+      if (values.price && typeof values.price === 'string') {
+        // TODO: This is not the way we should handle monetary values.
+        input.price = Number(values.price.replace(',', '.')) * 100;
       }
       if (values.categories) {
-        input.categories = (values.categories as TagProps[]).map(
+        input.categories = ((values.categories as unknown) as TagProps[]).map(
           ({ id, name }) => ({ id: id as number, title: name })
         );
       }

src/modules/catalog/product/components/ProductBasicOptions.tsx

@@ -1,5 +1,4 @@
 import React, { useCallback, useEffect, useState } from 'react';
-import _ from 'lodash';
 import { Box, Button } from 'theme-ui';
 import {
   Field,
@@ -36,14 +35,14 @@ interface ProductBasicOptionsProps {
   error?: boolean;
 }
 
-interface ProductBasicOptionsValues {
+export interface ProductBasicOptionsValues {
   title: string;
   slug: string;
   price: string;
   status: ProductStatus;
   isOnMainPage: boolean;
   categories?: TagProps[];
-  images?: string[];
+  images?: { url: string }[];
 }
 
 const defaultValues: ProductBasicOptionsValues = {
@@ -122,7 +121,7 @@ const ProductBasicOptions: React.FC<ProductBasicOptionsProps> = ({
 
   const uploadProductImage = useCallback(
     async (files: FileList) => {
-      _.map(Array.from(files), async ({ name, type, size }, i) => {
+      Array.from(files).map(async ({name, type, size}, i) => {
         const {
           data: {
             signedUrl: { url, accessUrl },

src/modules/catalog/product/components/ProductCampaign.tsx

@@ -16,7 +16,7 @@ interface ProductCampaignProps {
   error?: boolean;
 }
 
-interface ProductCampaignValues {
+export interface ProductCampaignValues {
   title: string;
 }
 

src/modules/catalog/product/components/ProductDescription.tsx

@@ -5,19 +5,20 @@ import * as Yup from 'yup';
 import { FormikHelpers, useFormik } from 'formik';
 import { Error } from '../../../../components/common';
 import { GetProductQuery } from '../../../../generated/graphql';
+import { InputProductValues } from '../ProductUpdate';
 
 export type Product = GetProductQuery['product'];
 
 interface ProductDescriptionProps {
   product?: Product | null;
   onSubmit: (
-    values: ProductDescriptionValues,
-    formikHelpers: FormikHelpers<ProductDescriptionValues>
+    values: InputProductValues,
+    formikHelpers: FormikHelpers<InputProductValues>
   ) => void;
   error?: boolean;
 }
 
-interface ProductDescriptionValues {
+export interface ProductDescriptionValues {
   shortDescription: string | null;
   description: string | null;
   technicalDescription: string | null;

src/modules/catalog/product/components/ProductInventory.tsx

@@ -68,4 +68,4 @@ const ProductInventory: React.FC<ProductInventoryProps> = ({
   );
 };
 
-export default ProductInventory;
+export default ProductInventory;

src/modules/catalog/product/components/ProductVariants.tsx

@@ -50,7 +50,7 @@ interface ProductVariantsProps {
   error?: boolean;
 }
 
-interface ProductVariantsValues {
+export interface ProductVariantsValues {
   title: string;
 }