From 3260e0403e7dbea7c52ea8f507ee2d1ddbf1c565 Mon Sep 17 00:00:00 2001 From: Sergey Elpashev Date: Fri, 10 Jan 2025 11:07:22 +0300 Subject: [PATCH] Feat: moved to zustand from redux --- bun.lockb | Bin 122841 -> 120083 bytes package.json | 3 +-- src/App.tsx | 14 ++++------ src/components/Image.tsx | 19 ++++++++++---- src/components/Tier.tsx | 33 +++--------------------- src/hooks.ts | 5 ---- src/main.tsx | 7 +++-- src/store.ts | 54 +++++++++++++++++---------------------- 8 files changed, 51 insertions(+), 84 deletions(-) delete mode 100644 src/hooks.ts diff --git a/bun.lockb b/bun.lockb index f1c32c9800225af39d85d8a69ad16450d4ae9155..b32388c7f8383c755c21e84e858ce3301325e8ba 100755 GIT binary patch delta 21111 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 state.tierImages); - const dispatch = useAppDispatch(); - useEffect(() => { - console.log(images); - }, [images]); + const [images, addTierImage] = useStore(useShallow(state => [state.images, state.addTierImage])); const uploadBtn = useRef(null); @@ -49,7 +45,7 @@ function App() { const handleAdd = (images: tierImage[]) => { images.forEach(image => { - dispatch(addTierImage(image)); + addTierImage(image); }); }; diff --git a/src/components/Image.tsx b/src/components/Image.tsx index e9ea963..c744dc6 100644 --- a/src/components/Image.tsx +++ b/src/components/Image.tsx @@ -1,3 +1,4 @@ +import { useDraggable } from '@dnd-kit/core'; import { tierImage } from '../store'; import './Image.scss'; interface ImageProps { @@ -5,14 +6,22 @@ interface ImageProps { onDragStart?: () => void; } -export const TierImage = ({ image, onDragStart }: ImageProps) => { +export const TierImage = ({ image }: ImageProps) => { + const { attributes, listeners, setNodeRef, transform } = useDraggable({ + id: `draggable:${image.name}`, + }); + const style = transform + ? { + transform: `translate3d(${transform.x}px, ${transform.y}px, 0)`, + } + : undefined; return (
{ - // e.preventDefault(); - if (onDragStart) onDragStart(); - }} + {...listeners} + {...attributes} + ref={setNodeRef} + style={style} >
{image.name} diff --git a/src/components/Tier.tsx b/src/components/Tier.tsx index c1fdef3..f40e8eb 100644 --- a/src/components/Tier.tsx +++ b/src/components/Tier.tsx @@ -1,6 +1,4 @@ -import { useState } from 'react'; -import { useAppDispatch, useAppSelector } from '../hooks'; -import { changeTierImage, tierImage } from '../store'; +import useStore from '../store'; import { TierImage } from './Image'; export interface TierProps { @@ -11,8 +9,7 @@ export interface TierProps { export const Tier = ({ color, name, textColor }: TierProps) => { let color_code = ''; let text_color_code = ''; - const tierImages = useAppSelector(state => state.tierImages); - const dispatch = useAppDispatch(); + const tierImages = useStore(state => state.images); switch (color) { case 'green': color_code = '#00b894'; @@ -34,31 +31,9 @@ export const Tier = ({ color, name, textColor }: TierProps) => { text_color_code = '#2d3436'; } - const [currentDragImage, setCurrentDragImage] = useState(null); - const [currentDragTier, setCurrentDragTier] = useState(''); - - const onDragStart = (image: tierImage) => { - setCurrentDragImage(image); - }; - return ( <> -
{ - // e.preventDefault(); - if (currentDragImage) { - if (currentDragImage.category === name) return; - console.log(currentDragImage); - console.log(name); - dispatch(changeTierImage({ ...currentDragImage, category: name })); - } - setCurrentDragImage(null); - }} - onDragOver={() => { - if (currentDragTier !== name) setCurrentDragTier(name); - }} - > +
{ {tierImages .filter(image => image.category === name) .map((image, index) => ( - onDragStart(image)} /> + ))}
diff --git a/src/hooks.ts b/src/hooks.ts deleted file mode 100644 index 956153f..0000000 --- a/src/hooks.ts +++ /dev/null @@ -1,5 +0,0 @@ -import { useDispatch, useSelector } from 'react-redux'; -import { AppDispatch, RootState } from './store'; - -export const useAppDispatch = useDispatch.withTypes(); -export const useAppSelector = useSelector.withTypes(); diff --git a/src/main.tsx b/src/main.tsx index aa8806a..66a65dc 100644 --- a/src/main.tsx +++ b/src/main.tsx @@ -1,14 +1,13 @@ +import { DndContext } from '@dnd-kit/core'; import { StrictMode } from 'react'; import { createRoot } from 'react-dom/client'; -import { Provider } from 'react-redux'; import App from './App.tsx'; import './index.scss'; -import store from './store.ts'; createRoot(document.getElementById('root')!).render( - + - + , ); diff --git a/src/store.ts b/src/store.ts index 6406849..ecc77d0 100644 --- a/src/store.ts +++ b/src/store.ts @@ -1,4 +1,5 @@ -import { configureStore, createSlice, PayloadAction } from '@reduxjs/toolkit'; +import { create } from 'zustand'; +import { devtools } from 'zustand/middleware'; export interface tierImage { name: string; @@ -6,34 +7,27 @@ export interface tierImage { category: string; } -const tierImages = createSlice({ - name: 'images', - initialState: [] as tierImage[], - reducers: { - addTierImage: (state, action: PayloadAction) => { - state.push(action.payload); - }, - removeTierImage: (state, action: PayloadAction) => { - return state.filter(image => image.name !== action.payload); - }, - changeTierImage: (state, action: PayloadAction) => { - return state.map(image => { - if (image.name == action.payload.name) return action.payload; - return image; - }); - }, - }, -}); +interface tierStore { + images: tierImage[]; + addTierImage: (image: tierImage) => void; + editTierImage: (image: tierImage, tier: string) => void; + removeTierImage: (image: tierImage) => void; +} -export const { addTierImage, removeTierImage, changeTierImage } = tierImages.actions; +const useStore = create( + devtools( + set => ({ + images: [] as tierImage[], + addTierImage: (image: tierImage) => set(state => ({ images: [...state.images, image] })), + editTierImage: (image: tierImage, tier: string) => + set(state => ({ images: state.images.map(i => (i.name === image.name ? { ...i, category: tier } : i)) })), + removeTierImage: (image: tierImage) => { + URL.revokeObjectURL(image.url); + set(state => ({ images: state.images.filter(i => i.name !== image.name) })); + }, + }), + { name: 'tierStore' }, + ), +); -const store = configureStore({ - reducer: { - tierImages: tierImages.reducer, - }, -}); - -export type RootState = ReturnType; -export type AppDispatch = typeof store.dispatch; - -export default store; +export default useStore;