From eba2f15cb577f8b4bada7a2472b9202d96d19b55 Mon Sep 17 00:00:00 2001 From: 0xDEMXN <15928886+0xDEMXN@users.noreply.github.com> Date: Sun, 11 Feb 2024 15:03:49 +0100 Subject: [PATCH 1/8] chore: use proper default value for useDebounce --- web/src/hooks/useDebounce.ts | 6 ++++-- 1 file changed, 4 insertions(+), 2 deletions(-) diff --git a/web/src/hooks/useDebounce.ts b/web/src/hooks/useDebounce.ts index 4574fc6a3e..9bcb4eb9ae 100644 --- a/web/src/hooks/useDebounce.ts +++ b/web/src/hooks/useDebounce.ts @@ -1,10 +1,12 @@ import { useEffect, useState } from 'react'; -export function useDebounce(value: T, delay?: number): T { +export function useDebounce(value: T, delay: number = 500): T { const [debouncedValue, setDebouncedValue] = useState(value); useEffect(() => { - const timer = setTimeout(() => setDebouncedValue(value), delay || 500); + const timer = setTimeout(() => { + setDebouncedValue(value); + }, delay); return () => { clearTimeout(timer); From 192682219d09a1ddd29028ea2cf041fd61fa76bc Mon Sep 17 00:00:00 2001 From: 0xDEMXN <15928886+0xDEMXN@users.noreply.github.com> Date: Sun, 11 Feb 2024 15:14:39 +0100 Subject: [PATCH 2/8] docs: updated useIntersection url to mantine repository --- web/src/hooks/useIntersection.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/web/src/hooks/useIntersection.ts b/web/src/hooks/useIntersection.ts index 85c2dfd8f7..09dba055ff 100644 --- 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'; From e02397cb67664fcd2a8ba648cb9de1a640b3fab2 Mon Sep 17 00:00:00 2001 From: 0xDEMXN <15928886+0xDEMXN@users.noreply.github.com> Date: Sun, 11 Feb 2024 15:41:04 +0100 Subject: [PATCH 3/8] chore: HOF to avoid repetitions --- web/src/hooks/useKeyPress.ts | 23 +++++++++-------------- 1 file changed, 9 insertions(+), 14 deletions(-) diff --git a/web/src/hooks/useKeyPress.ts b/web/src/hooks/useKeyPress.ts index 6887f2f955..d0615bc9a4 100644 --- a/web/src/hooks/useKeyPress.ts +++ b/web/src/hooks/useKeyPress.ts @@ -3,23 +3,18 @@ import React from 'react'; export const useKeyPress = (targetKey: KeyboardEvent['key']) => { const [keyPressed, setKeyPressed] = React.useState(false); - const downHandler = React.useCallback( - ({ key }: KeyboardEvent) => { - if (key === targetKey) { - setKeyPressed(true); - } - }, + const keyToggler = React.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(() => { window.addEventListener('keydown', downHandler); From 8338f98eac2bee0996602bd649187b32b44d931d Mon Sep 17 00:00:00 2001 From: 0xDEMXN <15928886+0xDEMXN@users.noreply.github.com> Date: Sun, 11 Feb 2024 15:53:30 +0100 Subject: [PATCH 4/8] fix: useQueue 'remove' fn return type --- web/src/hooks/useQueue.ts | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/web/src/hooks/useQueue.ts b/web/src/hooks/useQueue.ts index d71a246936..cdab9bce25 100644 --- a/web/src/hooks/useQueue.ts +++ b/web/src/hooks/useQueue.ts @@ -2,7 +2,7 @@ import { useState } from 'react'; export interface QueueMethods { add: (item: T) => void; - remove: () => void; + remove: () => T | undefined; first: T; last: T; values: T[]; @@ -16,12 +16,12 @@ const useQueue = (initialValue: T[] = []): QueueMethods => { 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; From 43a269694c089ca2e0cd672a46c07fbb595440e9 Mon Sep 17 00:00:00 2001 From: 0xDEMXN <15928886+0xDEMXN@users.noreply.github.com> Date: Sun, 11 Feb 2024 16:11:35 +0100 Subject: [PATCH 5/8] chore: unused imports and vars clean-up --- web/src/components/utils/Tooltip.tsx | 7 +------ web/src/helpers/index.ts | 1 - web/src/reducers/refreshSlots.ts | 3 +-- web/src/store/inventory.ts | 2 +- 4 files changed, 3 insertions(+), 10 deletions(-) diff --git a/web/src/components/utils/Tooltip.tsx b/web/src/components/utils/Tooltip.tsx index eec811bb30..21ea2b352b 100644 --- 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 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(null); - const canOpen = useRef(false); const { refs, context, floatingStyles } = useFloating({ middleware: [flip(), shift(), offset({ mainAxis: 10, crossAxis: 10 })], diff --git a/web/src/helpers/index.ts b/web/src/helpers/index.ts index b55c019280..3028b0e073 100644 --- 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/reducers/refreshSlots.ts b/web/src/reducers/refreshSlots.ts index 0c28a81d4d..d282e855b9 100644 --- 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 index eb833a4118..e6595c6cad 100644 --- a/web/src/store/inventory.ts +++ b/web/src/store/inventory.ts @@ -1,6 +1,5 @@ import { createSlice, current, isFulfilled, isPending, isRejected, PayloadAction } from '@reduxjs/toolkit'; import type { RootState } from '.'; -import { Slot, State } from '../typings'; import { moveSlotsReducer, refreshSlotsReducer, @@ -8,6 +7,7 @@ import { stackSlotsReducer, swapSlotsReducer, } from '../reducers'; +import { State } from '../typings'; const initialState: State = { leftInventory: { From 2b5842ac24eef6b0b8288417691af176ee4f7277 Mon Sep 17 00:00:00 2001 From: 0xDEMXN <15928886+0xDEMXN@users.noreply.github.com> Date: Sun, 11 Feb 2024 16:12:15 +0100 Subject: [PATCH 6/8] chore: React synthetic default import --- web/src/components/utils/menu/Menu.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/web/src/components/utils/menu/Menu.tsx b/web/src/components/utils/menu/Menu.tsx index 279d43c2cd..b3a5f24c17 100644 --- 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 from 'react'; import { useAppSelector } from '../../../store'; const MenuContext = React.createContext<{ From 70ee1a20101220bbd154429313ce690b9f5854b4 Mon Sep 17 00:00:00 2001 From: 0xDEMXN <15928886+0xDEMXN@users.noreply.github.com> Date: Sun, 11 Feb 2024 16:20:09 +0100 Subject: [PATCH 7/8] chore: consistency between react hooks usage syntax --- .../components/inventory/InventoryGrid.tsx | 8 +++---- .../components/inventory/InventorySlot.tsx | 4 ++-- web/src/components/inventory/index.tsx | 4 ++-- .../components/utils/ItemNotifications.tsx | 4 ++-- web/src/components/utils/Tooltip.tsx | 4 ++-- web/src/components/utils/WeightBar.tsx | 4 ++-- web/src/components/utils/menu/Menu.tsx | 22 +++++++++---------- web/src/components/utils/transitions/Fade.tsx | 4 ++-- .../components/utils/transitions/SlideUp.tsx | 4 ++-- web/src/hooks/useKeyPress.ts | 8 +++---- 10 files changed, 33 insertions(+), 33 deletions(-) diff --git a/web/src/components/inventory/InventoryGrid.tsx b/web/src/components/inventory/InventoryGrid.tsx index 56c38a3ad7..76d976bbdc 100644 --- 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 index 1ff368a63f..3aafd38f29 100644 --- 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 = const dispatch = useAppDispatch(); const timerRef = useRef(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 index 7d1e1d9ed2..b2226b10c9 100644 --- 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('setInventoryVisible', setInventoryVisible); diff --git a/web/src/components/utils/ItemNotifications.tsx b/web/src/components/utils/ItemNotifications.tsx index eee23fb1c6..5a6eb6eb58 100644 --- 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 index 21ea2b352b..2dfbe55341 100644 --- a/web/src/components/utils/Tooltip.tsx +++ b/web/src/components/utils/Tooltip.tsx @@ -1,5 +1,5 @@ import { flip, FloatingPortal, offset, shift, useFloating, useTransitionStyles } from '@floating-ui/react'; -import React from 'react'; +import React, { useEffect } from 'react'; import { useAppSelector } from '../../store'; import SlotTooltip from '../inventory/SlotTooltip'; @@ -33,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 index 0b9b36f3ae..7ac71a9041 100644 --- 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 index b3a5f24c17..00dcd4fd53 100644 --- 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 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>( ({ 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(null); + const [isOpen, setIsOpen] = useState(false); + const [hasFocusInside, setHasFocusInside] = useState(false); + const [activeIndex, setActiveIndex] = useState(null); - const elementsRef = React.useRef>([]); - const labelsRef = React.useRef>([]); - const parent = React.useContext(MenuContext); + const elementsRef = useRef>([]); + const labelsRef = useRef>([]); + const parent = useContext(MenuContext); const tree = useFloatingTree(); const nodeId = useFloatingNodeId(); @@ -80,7 +80,7 @@ export const MenuComponent = React.forwardRef { + useEffect(() => { if (isNested) return; if (menu.coords) { refs.setPositionReference({ @@ -142,7 +142,7 @@ export const MenuComponent = React.forwardRef { + useEffect(() => { if (!tree) return; function handleTreeClick() { @@ -164,7 +164,7 @@ export const MenuComponent = React.forwardRef { + useEffect(() => { if (isOpen && tree) { tree.events.emit('menuopen', { parentId, nodeId }); } @@ -242,7 +242,7 @@ export const MenuItem = React.forwardRef< HTMLButtonElement, MenuItemProps & React.ButtonHTMLAttributes >(({ 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 index 8dbce0735e..2883263ccc 100644 --- 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) => { - const nodeRef = React.useRef(null); + const nodeRef = useRef(null); return ( diff --git a/web/src/components/utils/transitions/SlideUp.tsx b/web/src/components/utils/transitions/SlideUp.tsx index 1d2eddc842..af0ae53c12 100644 --- 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) => { - const nodeRef = React.useRef(null); + const nodeRef = useRef(null); return ( diff --git a/web/src/hooks/useKeyPress.ts b/web/src/hooks/useKeyPress.ts index d0615bc9a4..1d8336f9bd 100644 --- a/web/src/hooks/useKeyPress.ts +++ b/web/src/hooks/useKeyPress.ts @@ -1,9 +1,9 @@ -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 keyToggler = React.useCallback( + const keyToggler = useCallback( (toggle: boolean) => ({ key }: KeyboardEvent) => { if (key === targetKey) { @@ -16,7 +16,7 @@ export const useKeyPress = (targetKey: KeyboardEvent['key']) => { const downHandler = keyToggler(true); const upHandler = keyToggler(false); - React.useEffect(() => { + useEffect(() => { window.addEventListener('keydown', downHandler); window.addEventListener('keyup', upHandler); From e3f92f098b3af8c86a86bf764115253136c8e2eb Mon Sep 17 00:00:00 2001 From: 0xDEMXN <15928886+0xDEMXN@users.noreply.github.com> Date: Sun, 11 Feb 2024 21:17:27 +0100 Subject: [PATCH 8/8] chore: change html title tag :peepolove: --- web/index.html | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/web/index.html b/web/index.html index 709f451026..f5a514204a 100644 --- a/web/index.html +++ b/web/index.html @@ -6,7 +6,7 @@ - NUI React Boilerplate + Ox Inventory