Refractor

components/ui/Modal/Modal.tsx

@@ -27,15 +27,13 @@ const Modal: FC<ModalProps> = ({ children, onClose }) => {
   )
 
   useEffect(() => {
-    const modal = ref.current
-
-    if (modal) {
-      disableBodyScroll(modal, { reserveScrollBarGap: true })
+    if (ref.current) {
+      disableBodyScroll(ref.current, { reserveScrollBarGap: true })
       window.addEventListener('keydown', handleKey)
     }
     return () => {
-      if (modal) {
-        enableBodyScroll(modal)
+      if (ref && ref.current) {
+        enableBodyScroll(ref.current)
       }
       clearAllBodyScrollLocks()
       window.removeEventListener('keydown', handleKey)

components/ui/Rating/Rating.tsx

@@ -1,4 +1,4 @@
-import { FC, memo } from 'react'
+import React, { FC } from 'react'
 import rangeMap from '@lib/range-map'
 import { Star } from '@components/icons'
 import cn from 'classnames'
@@ -7,19 +7,21 @@ export interface RatingProps {
   value: number
 }
 
-const Quantity: FC<RatingProps> = ({ value = 5 }) => (
-  <div className="flex flex-row py-6 text-accent-9">
-    {rangeMap(5, (i) => (
-      <span
-        key={`star_${i}`}
-        className={cn('inline-block ml-1 ', {
-          'text-accent-5': i >= Math.floor(value),
-        })}
-      >
-        <Star />
-      </span>
-    ))}
-  </div>
-)
+const Quantity: React.FC<RatingProps> = React.memo(({ value = 5 }) => {
+  return (
+    <div className="flex flex-row py-6 text-accent-9">
+      {rangeMap(5, (i) => (
+        <span
+          key={`star_${i}`}
+          className={cn('inline-block ml-1 ', {
+            'text-accent-5': i >= Math.floor(value),
+          })}
+        >
+          <Star />
+        </span>
+      ))}
+    </div>
+  )
+})
 
-export default memo(Quantity)
+export default Quantity

components/ui/Sidebar/Sidebar.tsx

@@ -16,14 +16,13 @@ const Sidebar: FC<SidebarProps> = ({ children, onClose }) => {
   const ref = useRef() as React.MutableRefObject<HTMLDivElement>
 
   useEffect(() => {
-    const sidebar = ref.current
-
-    if (sidebar) {
-      disableBodyScroll(sidebar, { reserveScrollBarGap: true })
+    if (ref.current) {
+      disableBodyScroll(ref.current, { reserveScrollBarGap: true })
     }
-
     return () => {
-      if (sidebar) enableBodyScroll(sidebar)
+      if (ref && ref.current) {
+        enableBodyScroll(ref.current)
+      }
       clearAllBodyScrollLocks()
     }
   }, [])

components/ui/context.tsx

@@ -15,7 +15,7 @@ const initialState = {
   displayDropdown: false,
   displayModal: false,
   modalView: 'LOGIN_VIEW',
-  sidebarView: 'CART_VIEW',
+  sidebarView: 'CHECKOUT_VIEW',
   userAvatar: '',
 }