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
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 eec811bb30..2dfbe55341 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, { 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(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
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 279d43c2cd..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 * 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>(
({ 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/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/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);
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';
diff --git a/web/src/hooks/useKeyPress.ts b/web/src/hooks/useKeyPress.ts
index 6887f2f955..1d8336f9bd 100644
--- 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
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;
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: {