From 8fa536b4372f5dc39eac7a2ea72606f541e16c95 Mon Sep 17 00:00:00 2001 From: "Simen A. W. Olsen" Date: Tue, 29 Dec 2020 02:18:37 +0100 Subject: [PATCH] refactor: Remove lodash --- .eslintrc.json | 7 +++ .../catalog/category/CategoryModalContent.tsx | 15 +++--- src/modules/catalog/product/ProductUpdate.tsx | 51 +++++++++++++------ .../components/ProductBasicOptions.tsx | 7 ++- .../product/components/ProductCampaign.tsx | 2 +- .../product/components/ProductDescription.tsx | 7 +-- .../product/components/ProductInventory.tsx | 2 +- .../product/components/ProductVariants.tsx | 2 +- 8 files changed, 59 insertions(+), 34 deletions(-) diff --git a/.eslintrc.json b/.eslintrc.json index 62ea5f8..462a908 100644 --- a/.eslintrc.json +++ b/.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 }, diff --git a/src/modules/catalog/category/CategoryModalContent.tsx b/src/modules/catalog/category/CategoryModalContent.tsx index 3ccaf1d..ab329bd 100644 --- a/src/modules/catalog/category/CategoryModalContent.tsx +++ b/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({ diff --git a/src/modules/catalog/product/ProductUpdate.tsx b/src/modules/catalog/product/ProductUpdate.tsx index d9c092f..7834f35 100644 --- a/src/modules/catalog/product/ProductUpdate.tsx +++ b/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) => { + 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 }) ); } diff --git a/src/modules/catalog/product/components/ProductBasicOptions.tsx b/src/modules/catalog/product/components/ProductBasicOptions.tsx index 412da62..8a1c3af 100644 --- a/src/modules/catalog/product/components/ProductBasicOptions.tsx +++ b/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 = ({ 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 }, diff --git a/src/modules/catalog/product/components/ProductCampaign.tsx b/src/modules/catalog/product/components/ProductCampaign.tsx index b3c435b..d966326 100644 --- a/src/modules/catalog/product/components/ProductCampaign.tsx +++ b/src/modules/catalog/product/components/ProductCampaign.tsx @@ -16,7 +16,7 @@ interface ProductCampaignProps { error?: boolean; } -interface ProductCampaignValues { +export interface ProductCampaignValues { title: string; } diff --git a/src/modules/catalog/product/components/ProductDescription.tsx b/src/modules/catalog/product/components/ProductDescription.tsx index 351051a..58d20e9 100644 --- a/src/modules/catalog/product/components/ProductDescription.tsx +++ b/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 + values: InputProductValues, + formikHelpers: FormikHelpers ) => void; error?: boolean; } -interface ProductDescriptionValues { +export interface ProductDescriptionValues { shortDescription: string | null; description: string | null; technicalDescription: string | null; diff --git a/src/modules/catalog/product/components/ProductInventory.tsx b/src/modules/catalog/product/components/ProductInventory.tsx index 0311091..0a8d3d3 100644 --- a/src/modules/catalog/product/components/ProductInventory.tsx +++ b/src/modules/catalog/product/components/ProductInventory.tsx @@ -68,4 +68,4 @@ const ProductInventory: React.FC = ({ ); }; -export default ProductInventory; +export default ProductInventory; \ No newline at end of file diff --git a/src/modules/catalog/product/components/ProductVariants.tsx b/src/modules/catalog/product/components/ProductVariants.tsx index 8e5ef4c..d95d56e 100644 --- a/src/modules/catalog/product/components/ProductVariants.tsx +++ b/src/modules/catalog/product/components/ProductVariants.tsx @@ -50,7 +50,7 @@ interface ProductVariantsProps { error?: boolean; } -interface ProductVariantsValues { +export interface ProductVariantsValues { title: string; }