chore(web): minor clean-ups

* chore: use proper default value for useDebounce * docs: updated useIntersection url to mantine repository * chore: HOF to avoid repetitions * fix: useQueue 'remove' fn return type * chore: unused imports and vars clean-up * chore: React synthetic default import * chore: consistency between react hooks usage syntax * chore: change html title tag :peepolove:
overextended · Feb 17, 2024 · 3f70927 · 3f70927
1 parent 60751ea
commit 3f70927
Show file tree

Hide file tree

Showing 17 changed files with 53 additions and 63 deletions.
diff --git a/web/index.html b/web/index.html
@@ -6,7 +6,7 @@
     <link rel="preconnect" href="https://fonts.googleapis.com" />
     <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
     <link href="https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500;700&display=swap" rel="stylesheet" />
-    <title>NUI React Boilerplate</title>
+    <title>Ox Inventory</title>
   </head>
   <body>
     <div id="root"></div>

diff --git a/web/src/components/inventory/InventoryGrid.tsx b/web/src/components/inventory/InventoryGrid.tsx
@@ -1,4 +1,4 @@
-import React, { useRef } from 'react';
+import React, { useEffect, useMemo, useRef, useState } from 'react';
 import { Inventory } from '../../typings';
 import WeightBar from '../utils/WeightBar';
 import InventorySlot from './InventorySlot';
@@ -9,16 +9,16 @@ import { useIntersection } from '../../hooks/useIntersection';
 const PAGE_SIZE = 30;
 
 const InventoryGrid: React.FC<{ inventory: Inventory }> = ({ inventory }) => {
-  const weight = React.useMemo(
+  const weight = useMemo(
     () => (inventory.maxWeight !== undefined ? Math.floor(getTotalWeight(inventory.items) * 1000) / 1000 : 0),
     [inventory.maxWeight, inventory.items]
   );
-  const [page, setPage] = React.useState(0);
+  const [page, setPage] = useState(0);
   const containerRef = useRef(null);
   const { ref, entry } = useIntersection({ threshold: 0.5 });
   const isBusy = useAppSelector((state) => state.inventory.isBusy);
 
-  React.useEffect(() => {
+  useEffect(() => {
     if (entry && entry.isIntersecting) {
       setPage((prev) => ++prev);
     }

diff --git a/web/src/components/inventory/InventorySlot.tsx b/web/src/components/inventory/InventorySlot.tsx
@@ -1,4 +1,4 @@
-import React, { useRef } from 'react';
+import React, { useCallback, useRef } from 'react';
 import { DragSource, Inventory, InventoryType, Slot, SlotWithItem } from '../../typings';
 import { useDrag, useDragDropManager, useDrop } from 'react-dnd';
 import { useAppDispatch } from '../../store';
@@ -31,7 +31,7 @@ const InventorySlot: React.ForwardRefRenderFunction<HTMLDivElement, SlotProps> =
   const dispatch = useAppDispatch();
   const timerRef = useRef<NodeJS.Timer | null>(null);
 
-  const canDrag = React.useCallback(() => {
+  const canDrag = useCallback(() => {
     return canPurchaseItem(item, { type: inventoryType, groups: inventoryGroups }) && canCraftItem(item, inventoryType);
   }, [item, inventoryType, inventoryGroups]);
 

diff --git a/web/src/components/inventory/index.tsx b/web/src/components/inventory/index.tsx
@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { useState } from 'react';
 import useNuiEvent from '../../hooks/useNuiEvent';
 import InventoryControl from './InventoryControl';
 import InventoryHotbar from './InventoryHotbar';
@@ -15,7 +15,7 @@ import { closeContextMenu } from '../../store/contextMenu';
 import Fade from '../utils/transitions/Fade';
 
 const Inventory: React.FC = () => {
-  const [inventoryVisible, setInventoryVisible] = React.useState(false);
+  const [inventoryVisible, setInventoryVisible] = useState(false);
   const dispatch = useAppDispatch();
 
   useNuiEvent<boolean>('setInventoryVisible', setInventoryVisible);

diff --git a/web/src/components/utils/ItemNotifications.tsx b/web/src/components/utils/ItemNotifications.tsx
@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { useContext } from 'react';
 import { createPortal } from 'react-dom';
 import { TransitionGroup } from 'react-transition-group';
 import useNuiEvent from '../../hooks/useNuiEvent';
@@ -19,7 +19,7 @@ export const ItemNotificationsContext = React.createContext<{
 } | null>(null);
 
 export const useItemNotifications = () => {
-  const itemNotificationsContext = React.useContext(ItemNotificationsContext);
+  const itemNotificationsContext = useContext(ItemNotificationsContext);
   if (!itemNotificationsContext) throw new Error(`ItemNotificationsContext undefined`);
   return itemNotificationsContext;
 };

diff --git a/web/src/components/utils/Tooltip.tsx b/web/src/components/utils/Tooltip.tsx
@@ -1,15 +1,10 @@
-import React, { useRef } from 'react';
 import { flip, FloatingPortal, offset, shift, useFloating, useTransitionStyles } from '@floating-ui/react';
+import React, { useEffect } from 'react';
 import { useAppSelector } from '../../store';
 import SlotTooltip from '../inventory/SlotTooltip';
-import { useDebounce } from '../../hooks/useDebounce';
 
 const Tooltip: React.FC = () => {
   const hoverData = useAppSelector((state) => state.tooltip);
-  const debounce = useDebounce(hoverData.open, 500);
-  const [open, setOpen] = React.useState(false);
-  const openTimer = useRef<NodeJS.Timer | null>(null);
-  const canOpen = useRef(false);
 
   const { refs, context, floatingStyles } = useFloating({
     middleware: [flip(), shift(), offset({ mainAxis: 10, crossAxis: 10 })],
@@ -38,7 +33,7 @@ const Tooltip: React.FC = () => {
     });
   };
 
-  React.useEffect(() => {
+  useEffect(() => {
     window.addEventListener('mousemove', handleMouseMove);
 
     return () => {

diff --git a/web/src/components/utils/WeightBar.tsx b/web/src/components/utils/WeightBar.tsx
@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { useMemo } from 'react';
 
 const colorChannelMixer = (colorChannelA: number, colorChannelB: number, amountToMix: number) => {
   let channelA = colorChannelA * amountToMix;
@@ -21,7 +21,7 @@ const COLORS = {
 };
 
 const WeightBar: React.FC<{ percent: number; durability?: boolean }> = ({ percent, durability }) => {
-  const color = React.useMemo(
+  const color = useMemo(
     () =>
       durability
         ? percent < 50

diff --git a/web/src/components/utils/menu/Menu.tsx b/web/src/components/utils/menu/Menu.tsx
@@ -28,7 +28,7 @@ import {
   useTransitionStyles,
   useTypeahead,
 } from '@floating-ui/react';
-import * as React from 'react';
+import React, { useContext, useEffect, useRef, useState } from 'react';
 import { useAppSelector } from '../../../store';
 
 const MenuContext = React.createContext<{
@@ -54,13 +54,13 @@ interface MenuProps {
 export const MenuComponent = React.forwardRef<HTMLButtonElement, MenuProps & React.HTMLProps<HTMLButtonElement>>(
   ({ children, label, ...props }, forwardedRef) => {
     const menu = useAppSelector((state) => state.contextMenu);
-    const [isOpen, setIsOpen] = React.useState(false);
-    const [hasFocusInside, setHasFocusInside] = React.useState(false);
-    const [activeIndex, setActiveIndex] = React.useState<number | null>(null);
+    const [isOpen, setIsOpen] = useState(false);
+    const [hasFocusInside, setHasFocusInside] = useState(false);
+    const [activeIndex, setActiveIndex] = useState<number | null>(null);
 
-    const elementsRef = React.useRef<Array<HTMLButtonElement | null>>([]);
-    const labelsRef = React.useRef<Array<string | null>>([]);
-    const parent = React.useContext(MenuContext);
+    const elementsRef = useRef<Array<HTMLButtonElement | null>>([]);
+    const labelsRef = useRef<Array<string | null>>([]);
+    const parent = useContext(MenuContext);
 
     const tree = useFloatingTree();
     const nodeId = useFloatingNodeId();
@@ -80,7 +80,7 @@ export const MenuComponent = React.forwardRef<HTMLButtonElement, MenuProps & Rea
 
     const { isMounted, styles } = useTransitionStyles(context);
 
-    React.useEffect(() => {
+    useEffect(() => {
       if (isNested) return;
       if (menu.coords) {
         refs.setPositionReference({
@@ -142,7 +142,7 @@ export const MenuComponent = React.forwardRef<HTMLButtonElement, MenuProps & Rea
     // Event emitter allows you to communicate across tree components.
     // This effect closes all menus when an item gets clicked anywhere
     // in the tree.
-    React.useEffect(() => {
+    useEffect(() => {
       if (!tree) return;
 
       function handleTreeClick() {
@@ -164,7 +164,7 @@ export const MenuComponent = React.forwardRef<HTMLButtonElement, MenuProps & Rea
       };
     }, [tree, nodeId, parentId]);
 
-    React.useEffect(() => {
+    useEffect(() => {
       if (isOpen && tree) {
         tree.events.emit('menuopen', { parentId, nodeId });
       }
@@ -242,7 +242,7 @@ export const MenuItem = React.forwardRef<
   HTMLButtonElement,
   MenuItemProps & React.ButtonHTMLAttributes<HTMLButtonElement>
 >(({ label, disabled, ...props }, forwardedRef) => {
-  const menu = React.useContext(MenuContext);
+  const menu = useContext(MenuContext);
   const item = useListItem({ label: disabled ? null : label });
   const tree = useFloatingTree();
   const isActive = item.index === menu.activeIndex;

diff --git a/web/src/components/utils/transitions/Fade.tsx b/web/src/components/utils/transitions/Fade.tsx
@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { useRef } from 'react';
 import { CSSTransition } from 'react-transition-group';
 
 interface Props {
@@ -7,7 +7,7 @@ interface Props {
 }
 
 const Fade: React.FC<Props> = (props) => {
-  const nodeRef = React.useRef(null);
+  const nodeRef = useRef(null);
 
   return (
     <CSSTransition in={props.in} nodeRef={nodeRef} classNames="transition-fade" timeout={200} unmountOnExit>

diff --git a/web/src/components/utils/transitions/SlideUp.tsx b/web/src/components/utils/transitions/SlideUp.tsx
@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { useRef } from 'react';
 import { CSSTransition } from 'react-transition-group';
 
 interface Props {
@@ -7,7 +7,7 @@ interface Props {
 }
 
 const SlideUp: React.FC<Props> = (props) => {
-  const nodeRef = React.useRef(null);
+  const nodeRef = useRef(null);
 
   return (
     <CSSTransition nodeRef={nodeRef} in={props.in} timeout={200} classNames="transition-slide-up" unmountOnExit>

diff --git a/web/src/helpers/index.ts b/web/src/helpers/index.ts
@@ -1,4 +1,3 @@
-//import { Items } from "../store/items";
 import { Inventory, InventoryType, ItemData, Slot, SlotWithItem, State } from '../typings';
 import { isEqual } from 'lodash';
 import { store } from '../store';

diff --git a/web/src/hooks/useDebounce.ts b/web/src/hooks/useDebounce.ts
@@ -1,10 +1,12 @@
 import { useEffect, useState } from 'react';
 
-export function useDebounce<T>(value: T, delay?: number): T {
+export function useDebounce<T>(value: T, delay: number = 500): T {
   const [debouncedValue, setDebouncedValue] = useState<T>(value);
 
   useEffect(() => {
-    const timer = setTimeout(() => setDebouncedValue(value), delay || 500);
+    const timer = setTimeout(() => {
+      setDebouncedValue(value);
+    }, delay);
 
     return () => {
       clearTimeout(timer);

diff --git a/web/src/hooks/useIntersection.ts b/web/src/hooks/useIntersection.ts
@@ -1,4 +1,4 @@
-// https://github.com/mantinedev/mantine/blob/master/src/mantine-hooks/src/use-intersection/use-intersection.ts
+// https://github.com/mantinedev/mantine/blob/master/packages/%40mantine/hooks/src/use-intersection/use-intersection.ts
 
 import { useCallback, useRef, useState } from 'react';
 

diff --git a/web/src/hooks/useKeyPress.ts b/web/src/hooks/useKeyPress.ts
@@ -1,27 +1,22 @@
-import React from 'react';
+import { useCallback, useEffect, useState } from 'react';
 
 export const useKeyPress = (targetKey: KeyboardEvent['key']) => {
-  const [keyPressed, setKeyPressed] = React.useState(false);
+  const [keyPressed, setKeyPressed] = useState(false);
 
-  const downHandler = React.useCallback(
-    ({ key }: KeyboardEvent) => {
-      if (key === targetKey) {
-        setKeyPressed(true);
-      }
-    },
+  const keyToggler = useCallback(
+    (toggle: boolean) =>
+      ({ key }: KeyboardEvent) => {
+        if (key === targetKey) {
+          setKeyPressed(toggle);
+        }
+      },
     [targetKey]
   );
 
-  const upHandler = React.useCallback(
-    ({ key }: KeyboardEvent) => {
-      if (key === targetKey) {
-        setKeyPressed(false);
-      }
-    },
-    [targetKey]
-  );
+  const downHandler = keyToggler(true);
+  const upHandler = keyToggler(false);
 
-  React.useEffect(() => {
+  useEffect(() => {
     window.addEventListener('keydown', downHandler);
     window.addEventListener('keyup', upHandler);
 

diff --git a/web/src/hooks/useQueue.ts b/web/src/hooks/useQueue.ts
@@ -2,7 +2,7 @@ import { useState } from 'react';
 
 export interface QueueMethods<T> {
   add: (item: T) => void;
-  remove: () => void;
+  remove: () => T | undefined;
   first: T;
   last: T;
   values: T[];
@@ -16,12 +16,12 @@ const useQueue = <T>(initialValue: T[] = []): QueueMethods<T> => {
       set((queue) => [...queue, value]);
     },
     remove: () => {
-      let result;
+      let removed;
       set(([first, ...rest]) => {
-        result = first;
+        removed = first;
         return rest;
       });
-      return result;
+      return removed;
     },
     get values() {
       return state;

diff --git a/web/src/reducers/refreshSlots.ts b/web/src/reducers/refreshSlots.ts
@@ -1,9 +1,8 @@
 import { CaseReducer, PayloadAction } from '@reduxjs/toolkit';
 import { itemDurability } from '../helpers';
+import { inventorySlice } from '../store/inventory';
 import { Items } from '../store/items';
 import { InventoryType, Slot, State } from '../typings';
-import { inventorySlice } from '../store/inventory';
-import RightInventory from '../components/inventory/RightInventory';
 
 export type ItemsPayload = { item: Slot; inventory?: InventoryType };
 

diff --git a/web/src/store/inventory.ts b/web/src/store/inventory.ts
@@ -1,13 +1,13 @@
 import { createSlice, current, isFulfilled, isPending, isRejected, PayloadAction } from '@reduxjs/toolkit';
 import type { RootState } from '.';
-import { Slot, State } from '../typings';
 import {
   moveSlotsReducer,
   refreshSlotsReducer,
   setupInventoryReducer,
   stackSlotsReducer,
   swapSlotsReducer,
 } from '../reducers';
+import { State } from '../typings';
 
 const initialState: State = {
   leftInventory: {