prettier formatting

delegit-xyz · Oct 16, 2024 · e68d6bb · e68d6bb
1 parent 70a08f3
commit e68d6bb
Show file tree

Hide file tree

Showing 2 changed files with 89 additions and 75 deletions.
diff --git a/src/components/TrackSelection.tsx b/src/components/TrackSelection.tsx
@@ -1,82 +1,97 @@
-import { useState, useEffect } from 'react';
+import { useState, useEffect } from 'react'
 
 interface TrackSelectionProps {
-    trackNamesMap: Map<number, string>;
-    onTrackSelectionChange: (selectedTracks: number[]) => void;
+  trackNamesMap: Map<number, string>
+  onTrackSelectionChange: (selectedTracks: number[]) => void
 }
 
-const TrackSelection: React.FC<TrackSelectionProps> = ({ trackNamesMap, onTrackSelectionChange }) => {
-    const [selectedTracks, setSelectedTracks] = useState<number[]>([])
+const TrackSelection: React.FC<TrackSelectionProps> = ({
+  trackNamesMap,
+  onTrackSelectionChange,
+}) => {
+  const [selectedTracks, setSelectedTracks] = useState<number[]>([])
 
-    useEffect(() => {
-        onTrackSelectionChange(selectedTracks);
-    }, [selectedTracks, onTrackSelectionChange]);
+  useEffect(() => {
+    onTrackSelectionChange(selectedTracks)
+  }, [selectedTracks, onTrackSelectionChange])
 
+  useEffect(() => {
+    if (trackNamesMap.size > 0) {
+      const allTrackIds = Array.from(trackNamesMap.keys())
+      setSelectedTracks(allTrackIds)
+    }
+  }, [trackNamesMap])
 
-    useEffect(() => {
-        if (trackNamesMap.size > 0) {
-            const allTrackIds = Array.from(trackNamesMap.keys())
-            setSelectedTracks(allTrackIds)
-        }
-    }, [trackNamesMap]);
+  const handleTrackToggle = (selectedTrackId: number) => {
+    setSelectedTracks((prevSelectedTracks) => {
+      if (prevSelectedTracks.includes(selectedTrackId)) {
+        return prevSelectedTracks.filter((id) => id !== selectedTrackId)
+      } else {
+        return [...prevSelectedTracks, selectedTrackId]
+      }
+    })
+  }
 
-    const handleTrackToggle = (selectedTrackId: number) => {
-        setSelectedTracks((prevSelectedTracks) => {
-            if (prevSelectedTracks.includes(selectedTrackId)) {
-                return prevSelectedTracks.filter((id) => id !== selectedTrackId);
-            } else {
-                return [...prevSelectedTracks, selectedTrackId];
-            }
-        });
-    };
+  const firstColumn = [0, 2, 20, 21]
+  const secondColumn = [12, 15, 11, 14, 10]
+  const thirdColumn = [30, 31, 32, 33, 34]
+  const fourthColumn = [1, 13]
 
-    const firstColumn = [0, 2, 20, 21]
-    const secondColumn = [12, 15, 11, 14, 10]
-    const thirdColumn = [30, 31, 32, 33, 34]
-    const fourthColumn = [1, 13]
+  //due to hardcoded ids to achieve a specific order we have to make sure to have a catch all to capture the possibility of uncaught ids
+  const orderedTracks = [
+    ...firstColumn,
+    ...secondColumn,
+    ...thirdColumn,
+    ...fourthColumn,
+  ]
+  const availableTracks = Array.from(trackNamesMap.keys())
+  const remainingTracks = availableTracks.filter(
+    (trackId) => !orderedTracks.includes(trackId),
+  )
 
-    //due to hardcoded ids to achieve a specific order we have to make sure to have a catch all to capture the possibility of uncaught ids
-    const orderedTracks = [...firstColumn, ...secondColumn, ...thirdColumn, ...fourthColumn];
-    const availableTracks = Array.from(trackNamesMap.keys());
-    const remainingTracks = availableTracks.filter(trackId => !orderedTracks.includes(trackId));
+  const columnArrays = [
+    firstColumn,
+    secondColumn,
+    thirdColumn,
+    fourthColumn,
+    remainingTracks,
+  ]
 
-    const columnArrays = [firstColumn, secondColumn, thirdColumn, fourthColumn, remainingTracks]
-
-
-    return (
-        <div className="container mx-auto p-4">
-            <div className="flex flex-wrap">
-                {columnArrays.map((column, columnIndex) => (
-                    <div key={columnIndex} className="sm:w-1/2 md:w-1/4 px-2 min-w-[180px]">
-                        <div className="flex flex-col">
-                            {column.map((trackId) => {
-                                const item = trackNamesMap.get(trackId)
-                                if (!item) return null
-                                return (
-                                    <div
-                                        key={trackId}
-                                        className="flex-grow p-2 mb-2 min-h-[3rem] items-start"
-                                    >
-                                        <div className="flex items-center space-x-2 text-xs">
-                                                <input
-                                                    type="checkbox"
-                                                    className="accent-[hsl(var(--primary))] self-start"
-                                                    checked={selectedTracks.includes(trackId)}
-                                                    onChange={() => handleTrackToggle(trackId)}
-                                                />
-
-                                                <span> {trackNamesMap.get(trackId)} </span>
-                                        </div>
-                                    </div>
-                                )
-                            })}
-                        </div>
+  return (
+    <div className="container mx-auto p-4">
+      <div className="flex flex-wrap">
+        {columnArrays.map((column, columnIndex) => (
+          <div
+            key={columnIndex}
+            className="min-w-[180px] px-2 sm:w-1/2 md:w-1/4"
+          >
+            <div className="flex flex-col">
+              {column.map((trackId) => {
+                const item = trackNamesMap.get(trackId)
+                if (!item) return null
+                return (
+                  <div
+                    key={trackId}
+                    className="mb-2 min-h-[3rem] flex-grow items-start p-2"
+                  >
+                    <div className="flex items-center space-x-2 text-xs">
+                      <input
+                        type="checkbox"
+                        className="self-start accent-[hsl(var(--primary))]"
+                        checked={selectedTracks.includes(trackId)}
+                        onChange={() => handleTrackToggle(trackId)}
+                      />
+                      <span> {trackNamesMap.get(trackId)} </span>
                     </div>
-                ))}
+                  </div>
+                )
+              })}
             </div>
-        </div>
-    )
-
-};
+          </div>
+        ))}
+      </div>
+    </div>
+  )
+}
 
-export default TrackSelection;
+export default TrackSelection
diff --git a/src/pages/Delegate/index.tsx b/src/pages/Delegate/index.tsx
@@ -59,7 +59,7 @@ export const Delegate = () => {
   const [isTxInitiated, setIsTxInitiated] = useState(false)
   const [isMultiTxDialogOpen, setIsMultiTxDialogOpen] = useState(false)
   const [noDelegateFound, setNoDelegateFound] = useState(false)
-  const [trackNames, setTrackNames] = useState<Map<number, string>>(new Map());
+  const [trackNames, setTrackNames] = useState<Map<number, string>>(new Map())
   const [tracksToDelegate, setTracksToDelegate] = useState<number[]>([])
   const [onGoingVoteLocks, setOngoingVoteLocks] = useState<VoteLock[]>([])
   const getSubsquareUrl = useGetSubsquareRefUrl()
@@ -179,7 +179,7 @@ export const Delegate = () => {
             .replace(/_/g, ' ')
             .replace(/\b\w/g, (t) => t.toUpperCase())
           trackNamesMap.set(trackId, trackName)
-        });
+        })
         setTrackNames(trackNamesMap)
       })
       .catch(console.error)
@@ -293,7 +293,7 @@ export const Delegate = () => {
 
         <Label className="flex">
           Conviction: {convictionDisplay}
-          <div className="ml-2">{ }</div>
+          <div className="ml-2">{}</div>
         </Label>
         <Slider
           disabled={!api || !selectedAccount}
@@ -314,12 +314,11 @@ export const Delegate = () => {
             )
           }}
         />
-        <ContentReveal
-          title={"Track Selection"}
-        >
+        <ContentReveal title={'Track Selection'}>
           <TrackSelection
             trackNamesMap={trackNames}
-            onTrackSelectionChange={onTrackSelectionChange}></TrackSelection>
+            onTrackSelectionChange={onTrackSelectionChange}
+          ></TrackSelection>
         </ContentReveal>
         <AlertNote
           message={