remove lodash

Baplisca · Mar 4, 2023 · c6cef64 · c6cef64
1 parent 5e9dbd9
commit c6cef64
Show file tree

Hide file tree

Showing 12 changed files with 196 additions and 189 deletions.
diff --git a/.eslintrc.js b/.eslintrc.js
@@ -29,6 +29,7 @@ module.exports = {
       },
     ],
     'import/namespace': ['off'],
+    'import/no-named-as-default-member': 0,
     'import/order': [
       'error',
       {

diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -30,6 +30,7 @@
     "core-js": "3.29.0",
     "currency-formatter": "1.5.9",
     "date-time-format-timezone": "1.0.22",
+    "fast-deep-equal": "3.1.3",
     "formik": "2.2.9",
     "graphql": "16.6.0",
     "http-graceful-shutdown": "3.1.13",
@@ -40,7 +41,6 @@
     "koa-send": "5.0.1",
     "koa-session": "6.4.0",
     "koa-static": "5.0.0",
-    "lodash": "4.17.21",
     "modern-css-reset": "1.4.0",
     "react": "18.2.0",
     "react-dom": "18.2.0",
@@ -69,7 +69,6 @@
     "@types/koa-route": "3.2.5",
     "@types/koa-send": "4.1.3",
     "@types/koa-static": "4.0.2",
-    "@types/lodash": "4.14.191",
     "@types/node": "18.11.15",
     "@types/react": "18.0.24",
     "@types/react-dom": "18.0.8",

diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
diff --git a/src/client/components/feature/ProductList/ProductList.tsx b/src/client/components/feature/ProductList/ProductList.tsx
@@ -1,4 +1,4 @@
-import _ from 'lodash';
+import equal from 'fast-deep-equal';
 import type { FC } from 'react';
 import { memo } from 'react';
 
@@ -11,21 +11,24 @@ type Props = {
   featureSection: FeatureSectionFragmentResponse;
 };
 
-export const ProductList: FC<Props> = memo(({ featureSection }) => {
-  return (
-    <GetDeviceType>
-      {({ deviceType }) => {
-        switch (deviceType) {
-          case DeviceType.DESKTOP: {
-            return <ProductListSlider featureSection={featureSection} />;
+export const ProductList: FC<Props> = memo(
+  ({ featureSection }) => {
+    return (
+      <GetDeviceType>
+        {({ deviceType }) => {
+          switch (deviceType) {
+            case DeviceType.DESKTOP: {
+              return <ProductListSlider featureSection={featureSection} />;
+            }
+            case DeviceType.MOBILE: {
+              return <ProductGridList featureSection={featureSection} />;
+            }
           }
-          case DeviceType.MOBILE: {
-            return <ProductGridList featureSection={featureSection} />;
-          }
-        }
-      }}
-    </GetDeviceType>
-  );
-}, _.isEqual);
+        }}
+      </GetDeviceType>
+    );
+  },
+  (prev, next) => equal(prev, next),
+);
 
 ProductList.displayName = 'ProductList';
diff --git a/src/client/components/order/OrderForm/OrderForm.tsx b/src/client/components/order/OrderForm/OrderForm.tsx
@@ -1,5 +1,4 @@
 import { useFormik } from 'formik';
-import _ from 'lodash';
 import type { ChangeEventHandler, FC } from 'react';
 import zipcodeJa from 'zipcode-ja';
 
@@ -34,8 +33,8 @@ export const OrderForm: FC<Props> = ({ onSubmit }) => {
     formik.handleChange(event);
 
     const zipCode = event.target.value;
-    const address = [...(_.cloneDeep(zipcodeJa)[zipCode]?.address ?? [])];
-    const prefecture = address.unshift();
+    const address = [...(zipcodeJa[zipCode]?.address ?? [])];
+    const prefecture = address.shift();
     const city = address.join(' ');
 
     formik.setFieldValue('prefecture', prefecture);

diff --git a/src/client/components/order/OrderPreview/OrderPreview.tsx b/src/client/components/order/OrderPreview/OrderPreview.tsx
@@ -1,5 +1,5 @@
 import * as currencyFormatter from 'currency-formatter';
-import _ from 'lodash';
+import equal from 'fast-deep-equal';
 import type { FC } from 'react';
 import { memo } from 'react';
 
@@ -15,23 +15,26 @@ type Props = {
   onRemoveCartItem: (productId: number) => void;
 };
 
-export const OrderPreview: FC<Props> = memo(({ onRemoveCartItem, onUpdateCartItem, order }) => {
-  const { totalPrice } = useTotalPrice(order);
+export const OrderPreview: FC<Props> = memo(
+  ({ onRemoveCartItem, onUpdateCartItem, order }) => {
+    const { totalPrice } = useTotalPrice(order);
 
-  return (
-    <div className={styles.container()}>
-      <ul className={styles.itemList()}>
-        {order.items.map((item) => {
-          return (
-            <li key={item.product.id}>
-              <CartItem item={item} onRemove={onRemoveCartItem} onUpdate={onUpdateCartItem} />
-            </li>
-          );
-        })}
-      </ul>
-      <p className={styles.totalPrice()}>{currencyFormatter.format(totalPrice, { code: 'JPY', precision: 0 })}</p>
-    </div>
-  );
-}, _.isEqual);
+    return (
+      <div className={styles.container()}>
+        <ul className={styles.itemList()}>
+          {order.items.map((item) => {
+            return (
+              <li key={item.product.id}>
+                <CartItem item={item} onRemove={onRemoveCartItem} onUpdate={onUpdateCartItem} />
+              </li>
+            );
+          })}
+        </ul>
+        <p className={styles.totalPrice()}>{currencyFormatter.format(totalPrice, { code: 'JPY', precision: 0 })}</p>
+      </div>
+    );
+  },
+  (prev, next) => equal(prev, next),
+);
 
 OrderPreview.displayName = 'OrderPreview';
diff --git a/src/client/components/product/ProductHeroImage/ProductHeroImage.tsx b/src/client/components/product/ProductHeroImage/ProductHeroImage.tsx
@@ -1,7 +1,7 @@
 import CanvasKitInit from 'canvaskit-wasm';
 import CanvasKitWasmUrl from 'canvaskit-wasm/bin/canvaskit.wasm?url';
 import classNames from 'classnames';
-import _ from 'lodash';
+import equal from 'fast-deep-equal';
 import { memo, useEffect, useState } from 'react';
 import type { FC } from 'react';
 
@@ -40,58 +40,61 @@ type Props = {
   title: string;
 };
 
-export const ProductHeroImage: FC<Props> = memo(({ product, title }) => {
-  const thumbnailFile = product.media.find((productMedia) => productMedia.isThumbnail)?.file;
+export const ProductHeroImage: FC<Props> = memo(
+  ({ product, title }) => {
+    const thumbnailFile = product.media.find((productMedia) => productMedia.isThumbnail)?.file;
 
-  const [imageDataUrl, setImageDataUrl] = useState<string>();
+    const [imageDataUrl, setImageDataUrl] = useState<string>();
 
-  useEffect(() => {
-    if (thumbnailFile == null) {
-      return;
-    }
-    loadImageAsDataURL(thumbnailFile.filename).then((dataUrl) => setImageDataUrl(dataUrl));
-  }, [thumbnailFile]);
+    useEffect(() => {
+      if (thumbnailFile == null) {
+        return;
+      }
+      loadImageAsDataURL(thumbnailFile.filename).then((dataUrl) => setImageDataUrl(dataUrl));
+    }, [thumbnailFile]);
 
-  if (imageDataUrl === undefined) {
-    return null;
-  }
+    if (imageDataUrl === undefined) {
+      return null;
+    }
 
-  return (
-    <GetDeviceType>
-      {({ deviceType }) => {
-        return (
-          <WidthRestriction>
-            <Anchor href={`/product/${product.id}`}>
-              <div className={styles.container()}>
-                <AspectRatio ratioHeight={9} ratioWidth={16}>
-                  <img className={styles.image()} src={imageDataUrl} />
-                </AspectRatio>
+    return (
+      <GetDeviceType>
+        {({ deviceType }) => {
+          return (
+            <WidthRestriction>
+              <Anchor href={`/product/${product.id}`}>
+                <div className={styles.container()}>
+                  <AspectRatio ratioHeight={9} ratioWidth={16}>
+                    <img className={styles.image()} src={imageDataUrl} />
+                  </AspectRatio>
 
-                <div className={styles.overlay()}>
-                  <p
-                    className={classNames(styles.title(), {
-                      [styles.title__desktop()]: deviceType === DeviceType.DESKTOP,
-                      [styles.title__mobile()]: deviceType === DeviceType.MOBILE,
-                    })}
-                  >
-                    {title}
-                  </p>
-                  <p
-                    className={classNames(styles.description(), {
-                      [styles.description__desktop()]: deviceType === DeviceType.DESKTOP,
-                      [styles.description__mobile()]: deviceType === DeviceType.MOBILE,
-                    })}
-                  >
-                    {product.name}
-                  </p>
+                  <div className={styles.overlay()}>
+                    <p
+                      className={classNames(styles.title(), {
+                        [styles.title__desktop()]: deviceType === DeviceType.DESKTOP,
+                        [styles.title__mobile()]: deviceType === DeviceType.MOBILE,
+                      })}
+                    >
+                      {title}
+                    </p>
+                    <p
+                      className={classNames(styles.description(), {
+                        [styles.description__desktop()]: deviceType === DeviceType.DESKTOP,
+                        [styles.description__mobile()]: deviceType === DeviceType.MOBILE,
+                      })}
+                    >
+                      {product.name}
+                    </p>
+                  </div>
                 </div>
-              </div>
-            </Anchor>
-          </WidthRestriction>
-        );
-      }}
-    </GetDeviceType>
-  );
-}, _.isEqual);
+              </Anchor>
+            </WidthRestriction>
+          );
+        }}
+      </GetDeviceType>
+    );
+  },
+  (prev, next) => equal(prev, next),
+);
 
 ProductHeroImage.displayName = 'ProductHeroImage';