Optimize code in CursorSelections. Organize other code as needed.

yorkie-team · Aug 10, 2023 · e521ac3 · e521ac3
1 parent 1b2caa5
commit e521ac3
Show file tree

Hide file tree

Showing 5 changed files with 23 additions and 73 deletions.
diff --git a/examples/simultaneous-cursors/src/App.jsx b/examples/simultaneous-cursors/src/App.jsx
@@ -30,7 +30,6 @@ const App = () => {
       });
       doc.subscribe('others', (event) => {
         if (event.type !== 'presence-changed') return;
-        console.log('others 🚀', event.value.presence.points.length);
       });
 
       await client.attach(doc, {
@@ -77,7 +76,6 @@ const App = () => {
           },
           points,
         });
-        console.log('my✅', points.length);
       });
     };
 
@@ -94,17 +92,6 @@ const App = () => {
 
   return (
     <div className="general-container">
-      {clients.map(({ clientID, presence: { points } }) => {
-        return (
-          <div key={clientID}>
-            <code>
-              {clientID} : <b>{points.length}</b> {JSON.stringify(points)}
-            </code>
-            <hr />
-          </div>
-        );
-      })}
-
       {clients.map(
         ({ clientID, presence: { cursorShape, cursor, pointerDown } }) => {
           return (

diff --git a/examples/simultaneous-cursors/src/components/CursorSelections.jsx b/examples/simultaneous-cursors/src/components/CursorSelections.jsx
@@ -2,65 +2,35 @@ import { useState } from 'react';
 
 const CursorSelections = ({ handleCursorShapeSelect, clientsLength }) => {
   const [selectedCursorShape, setSelectedCursorShape] = useState('cursor');
+
+  const cursorShapes = ['heart', 'thumbs', 'pen', 'cursor'];
+
   return (
     <div className="cursor-selector-container">
       <div className="cursor-selections-container">
-        <img
-          onClick={() => {
-            handleCursorShapeSelect('heart');
-            setSelectedCursorShape('heart');
-          }}
-          className={
-            selectedCursorShape === 'heart'
-              ? 'cursor-shape-selected'
-              : 'cursor-shape-not-selected'
-          }
-          src="src/assets/icons/icon_heart.svg"
-        />
-        <img
-          onClick={() => {
-            handleCursorShapeSelect('thumbs');
-            setSelectedCursorShape('thumbs');
-          }}
-          className={
-            selectedCursorShape === 'thumbs'
-              ? 'cursor-shape-selected'
-              : 'cursor-shape-not-selected'
-          }
-          src="src/assets/icons/icon_thumbs.svg"
-        />
-        <img
-          onClick={() => {
-            handleCursorShapeSelect('pen');
-            setSelectedCursorShape('pen');
-          }}
-          className={
-            selectedCursorShape === 'pen'
-              ? 'cursor-shape-selected'
-              : 'cursor-shape-not-selected'
-          }
-          src="src/assets/icons/icon_pen.svg"
-        />
-        <img
-          onClick={() => {
-            handleCursorShapeSelect('cursor');
-            setSelectedCursorShape('cursor');
-          }}
-          className={
-            selectedCursorShape === 'cursor'
-              ? 'cursor-shape-selected'
-              : 'cursor-shape-not-selected'
-          }
-          src="src/assets/icons/icon_cursor.svg"
-        />
+        {cursorShapes.map((shape) => (
+          <img
+            key={shape}
+            onClick={() => {
+              handleCursorShapeSelect(shape);
+              setSelectedCursorShape(shape);
+            }}
+            className={`${
+              selectedCursorShape === shape
+                ? 'cursor-shape-selected'
+                : 'cursor-shape-not-selected'
+            }`}
+            src={`src/assets/icons/icon_${shape}.svg`}
+          />
+        ))}
       </div>
 
       <div className="num-users-container">
-        {clientsLength !== 1 ? (
-          <p>{clientsLength} users are here</p>
-        ) : (
-          <p> 1 user here </p>
-        )}
+        <p>
+          {clientsLength !== 1
+            ? `${clientsLength} users are here`
+            : '1 user here'}
+        </p>
       </div>
     </div>
   );

diff --git a/examples/simultaneous-cursors/src/components/FullAnimation.jsx b/examples/simultaneous-cursors/src/components/FullAnimation.jsx
@@ -7,7 +7,6 @@ const FullAnimation = ({ pointerDown, xPos, yPos, selectedCursorShape }) => {
 
   const animationBubbleRate = 100;
 
-  // Remove singleAnimationsArray not visible anymore (every 1 sec)
   useInterval(() => {
     setSingleAnimationsArray((singleAnimationsArray) =>
       singleAnimationsArray.filter(

diff --git a/examples/simultaneous-cursors/src/components/PenCursor.jsx b/examples/simultaneous-cursors/src/components/PenCursor.jsx
@@ -28,7 +28,6 @@ const PenCursor = ({ xPos, yPos }) => {
     const ctx = canvas.getContext('2d');
 
     const animatePoints = () => {
-      // console.log('requestAnimationFrame', xPos);
       ctx.clearRect(0, 0, ctx.canvas.width, ctx.canvas.height);
       const duration = (0.7 * (1 * 4000)) / 60;
 
@@ -73,8 +72,6 @@ const PenCursor = ({ xPos, yPos }) => {
     addPoint(xPos, yPos);
   }, [xPos, yPos]);
 
-  console.log('pen render 🖍', xPos, yPos);
-
   return (
     <canvas
       className={'pen-cursor-canvas'}

diff --git a/examples/simultaneous-cursors/src/hooks/useInterval.jsx b/examples/simultaneous-cursors/src/hooks/useInterval.jsx
@@ -1,15 +1,12 @@
 import { useRef, useEffect } from 'react';
 
-// From Dan Abramov's blog: https://overreacted.io/making-setinterval-declarative-with-react-hooks/
 export default function useInterval(callback, delay) {
   const savedCallback = useRef(callback);
 
-  // Remember the latest callback.
   useEffect(() => {
     savedCallback.current = callback;
   }, [callback]);
 
-  // Set up the interval.
   useEffect(() => {
     function tick() {
       savedCallback.current();