From d1207f4a659afc2e8a53e1c9e6131c9db9d669ca Mon Sep 17 00:00:00 2001 From: chrislicodes Date: Wed, 17 May 2023 11:56:34 +0200 Subject: [PATCH] chore: memo all the things --- .../react/ChessgroundWrapper/index.tsx | 196 +++++++++--------- src/components/react/CommentSection/index.tsx | 59 +++--- src/components/react/PgnViewer/index.tsx | 154 +++++++------- 3 files changed, 210 insertions(+), 199 deletions(-) diff --git a/src/components/react/ChessgroundWrapper/index.tsx b/src/components/react/ChessgroundWrapper/index.tsx index cd1d573..74980a2 100644 --- a/src/components/react/ChessgroundWrapper/index.tsx +++ b/src/components/react/ChessgroundWrapper/index.tsx @@ -23,115 +23,119 @@ export interface ChessGroundSettings { currentMoveShapes: DrawShape[]; } -export function ChessgroundWrapper({ - api, - setApi, - chessifyId, - boardColor = "green", - config = {}, - chess, - setHistory, - setMoveNumber, - currentMoveNumber, - setShapes, - isViewOnly, - currentMoveShapes, -}: ChessGroundSettings) { - const ref = useRef(null); - - //Chessground Init - useEffect(() => { - if (ref.current && !api) { - const chessgroundApi = ChessgroundApi(ref.current, { - fen: chess.fen(), - animation: { enabled: true, duration: 100 }, - check: chess.isCheck(), - movable: { - free: false, - color: toColor(chess), - dests: toDests(chess), - events: { - //Hook up the Chessground UI changes to our App State - after: (orig, dest, _metadata) => { - const handler = playOtherSide( - chessgroundApi, - chess - ); - - setHistory(handler(orig, dest)); - setMoveNumber((state) => state + 1); - }, - }, - }, - highlight: { - check: true, - }, - turnColor: toColor(chess), - ...config, - }); - - setHistory(chess.history({ verbose: true })); - setApi(chessgroundApi); - setMoveNumber(chess.history().length - 1); - } else if (ref.current && api) { - api.set(config); - } - }, [ - ref, - chess, +export const ChessgroundWrapper = React.memo( + ({ api, - chessifyId, - config, setApi, + chessifyId, + boardColor = "green", + config = {}, + chess, setHistory, setMoveNumber, - setShapes, currentMoveNumber, - ]); + setShapes, + isViewOnly, + currentMoveShapes, + }: ChessGroundSettings) => { + const ref = useRef(null); - //Sync View Only - useEffect(() => { - api?.set({ viewOnly: isViewOnly }); - }, [isViewOnly, api]); + //Chessground Init + useEffect(() => { + if (ref.current && !api) { + const chessgroundApi = ChessgroundApi(ref.current, { + fen: chess.fen(), + animation: { enabled: true, duration: 100 }, + check: chess.isCheck(), + movable: { + free: false, + color: toColor(chess), + dests: toDests(chess), + events: { + //Hook up the Chessground UI changes to our App State + after: (orig, dest, _metadata) => { + const handler = playOtherSide( + chessgroundApi, + chess + ); - //Sync Shapes To State - useEffect(() => { - api?.set({ - drawable: { - onChange(shapes) { - setShapes((currentShapes) => { - const shapesModified = [...currentShapes]; - shapesModified[currentMoveNumber] = shapes; + setHistory(handler(orig, dest)); + setMoveNumber((state) => state + 1); + }, + }, + }, + highlight: { + check: true, + }, + turnColor: toColor(chess), + ...config, + }); - return shapesModified; - }); + setHistory(chess.history({ verbose: true })); + setApi(chessgroundApi); + setMoveNumber(chess.history().length - 1); + } else if (ref.current && api) { + api.set(config); + } + }, [ + ref, + chess, + api, + chessifyId, + config, + setApi, + setHistory, + setMoveNumber, + setShapes, + currentMoveNumber, + ]); + + //Sync View Only + useEffect(() => { + api?.set({ viewOnly: isViewOnly }); + }, [isViewOnly, api]); + + //Sync Shapes To State + useEffect(() => { + api?.set({ + drawable: { + onChange(shapes) { + setShapes((currentShapes) => { + const shapesModified = [...currentShapes]; + shapesModified[currentMoveNumber] = shapes; + + return shapesModified; + }); + }, }, - }, - }); - }, [api, currentMoveNumber, setShapes]); + }); + }, [api, currentMoveNumber, setShapes]); - //Load Shapes - useEffect(() => { - if (currentMoveShapes) api?.setShapes(currentMoveShapes); - }, [api, currentMoveNumber, currentMoveShapes, setShapes]); + //Load Shapes + useEffect(() => { + if (currentMoveShapes) api?.setShapes(currentMoveShapes); + }, [api, currentMoveNumber, currentMoveShapes, setShapes]); - return ( -
+ return (
-
- ); -} + className={`${boardColor}-board`} + > +
+
+ ); + } +); + +ChessgroundWrapper.displayName = "ChessgroundWrapper"; diff --git a/src/components/react/CommentSection/index.tsx b/src/components/react/CommentSection/index.tsx index 202782b..b816418 100644 --- a/src/components/react/CommentSection/index.tsx +++ b/src/components/react/CommentSection/index.tsx @@ -9,34 +9,35 @@ interface CommentSectionProps { setComments: React.Dispatch>; } -export const CommentSection = ({ - currentMove, - currentComment, - setComments, -}: CommentSectionProps) => { - const editor = useEditor({ - extensions: [StarterKit], - onUpdate: (state) => { - setComments((currentComments) => { - const currentCommentModified = [...currentComments]; - currentCommentModified[currentMove] = state.editor.getJSON(); - return currentCommentModified; - }); - }, - }); +export const CommentSection = React.memo( + ({ currentMove, currentComment, setComments }: CommentSectionProps) => { + const editor = useEditor({ + extensions: [StarterKit], + onUpdate: (state) => { + setComments((currentComments) => { + const currentCommentModified = [...currentComments]; + currentCommentModified[currentMove] = + state.editor.getJSON(); + return currentCommentModified; + }); + }, + }); - useEffect(() => { - if (!editor) return; - const { from, to } = editor.state.selection; - if (currentComment) { - editor.commands.setContent(currentComment, false, { - preserveWhitespace: true, - }); - } else { - editor.commands.clearContent(); - } - editor.commands.setTextSelection({ from, to }); - }, [currentComment, editor]); + useEffect(() => { + if (!editor) return; + const { from, to } = editor.state.selection; + if (currentComment) { + editor.commands.setContent(currentComment, false, { + preserveWhitespace: true, + }); + } else { + editor.commands.clearContent(); + } + editor.commands.setTextSelection({ from, to }); + }, [currentComment, editor]); - return ; -}; + return ; + } +); + +CommentSection.displayName = "CommentSection"; diff --git a/src/components/react/PgnViewer/index.tsx b/src/components/react/PgnViewer/index.tsx index f3451b9..2110665 100644 --- a/src/components/react/PgnViewer/index.tsx +++ b/src/components/react/PgnViewer/index.tsx @@ -54,84 +54,90 @@ const MoveItem = ({ ); }; -export const PgnViewer = ({ - history, - currentMove, - onBackButtonClick, - onForwardButtonClick, - onMoveItemClick, - onSaveButtonClick, -}: { - history: Move[]; - currentMove: number; - onBackButtonClick: () => void; - onForwardButtonClick: () => void; - onMoveItemClick: (moveIndex: number) => void; - onSaveButtonClick: () => void; -}) => { - const movePairs = useMemo(() => chunkArray(history, 2), [history]); +export const PgnViewer = React.memo( + ({ + history, + currentMove, + onBackButtonClick, + onForwardButtonClick, + onMoveItemClick, + onSaveButtonClick, + }: { + history: Move[]; + currentMove: number; + onBackButtonClick: () => void; + onForwardButtonClick: () => void; + onMoveItemClick: (moveIndex: number) => void; + onSaveButtonClick: () => void; + }) => { + const movePairs = useMemo(() => chunkArray(history, 2), [history]); - return ( -
-
-
- {movePairs.map((pair, i) => { - const [wMove, bMove] = pair; - return ( - -

{i + 1}

- - onMoveItemClick(i * 2) - } - /> - {bMove && ( + return ( +
+
+
+ {movePairs.map((pair, i) => { + const [wMove, bMove] = pair; + return ( + +

+ {i + 1} +

- onMoveItemClick(i * 2 + 1) + onMoveItemClick(i * 2) } /> - )} - - ); - })} + {bMove && ( + + onMoveItemClick(i * 2 + 1) + } + /> + )} + + ); + })} +
+
+
+ + +
-
- - - -
-
- ); -}; + ); + } +); + +PgnViewer.displayName = "PgnViewer";