Fix lint errors and cleanup

Author: naqvitalha

fixture/react-native/src/Grid.tsx

@@ -8,43 +8,42 @@ interface GridItem {
   color: string;
   span?: number;
 }
+const colors = [
+  "#FF5252",
+  "#FF4081",
+  "#E040FB",
+  "#7C4DFF",
+  "#536DFE",
+  "#448AFF",
+  "#40C4FF",
+  "#18FFFF",
+  "#64FFDA",
+  "#69F0AE",
+  "#B2FF59",
+  "#EEFF41",
+  "#FFFF00",
+  "#FFD740",
+  "#FFAB40",
+  "#FF6E40",
+];
+// Generate data using a loop
+const generateData = (count: number): GridItem[] => {
+  const items: GridItem[] = [];
+  for (let i = 0; i < count; i++) {
+    items.push({
+      id: i,
+      title: `Item ${i}`,
+      span: i % 9 === 0 ? 2 : 1,
+      color: colors[i % colors.length], // Cycle through colors
+    });
+  }
+  return items;
+};
 
 export function Grid() {
   const [numItems] = useState(1000); // Default to 100 items
 
   // Generate colors for the grid items
-  const colors = [
-    "#FF5252",
-    "#FF4081",
-    "#E040FB",
-    "#7C4DFF",
-    "#536DFE",
-    "#448AFF",
-    "#40C4FF",
-    "#18FFFF",
-    "#64FFDA",
-    "#69F0AE",
-    "#B2FF59",
-    "#EEFF41",
-    "#FFFF00",
-    "#FFD740",
-    "#FFAB40",
-    "#FF6E40",
-  ];
-
-  // Generate data using a loop
-  const generateData = (count: number): GridItem[] => {
-    const items: GridItem[] = [];
-    for (let i = 0; i < count; i++) {
-      items.push({
-        id: i,
-        title: `Item ${i}`,
-        span: i % 9 === 0 ? 2 : 1,
-        color: colors[i % colors.length], // Cycle through colors
-      });
-    }
-    return items;
-  };
 
   const data = useMemo(() => generateData(numItems), [numItems]);
 

fixture/react-native/src/LayoutOptions.tsx

@@ -17,33 +17,33 @@ interface ListItem {
   height: number;
 }
 
+// Generate colors for the items
+const colors = [
+  "#FF5252", // Red
+  "#FF4081", // Pink
+  "#E040FB", // Purple
+  "#7C4DFF", // Deep Purple
+  "#536DFE", // Indigo
+  "#448AFF", // Blue
+  "#40C4FF", // Light Blue
+  "#18FFFF", // Cyan
+  "#64FFDA", // Teal
+  "#69F0AE", // Green
+  "#B2FF59", // Light Green
+  "#EEFF41", // Lime
+  "#FFFF00", // Yellow
+  "#FFD740", // Amber
+  "#FFAB40", // Orange
+  "#FF6E40", // Deep Orange
+];
+
 export function LayoutOptions() {
   // Configuration states
   const [numColumns, setNumColumns] = useState(1);
   const [isHorizontal, setIsHorizontal] = useState(false);
   const [isMasonry, setIsMasonry] = useState(false);
   const [optimizeItemArrangement, setOptimizeItemArrangement] = useState(false);
 
-  // Generate colors for the items
-  const colors = [
-    "#FF5252", // Red
-    "#FF4081", // Pink
-    "#E040FB", // Purple
-    "#7C4DFF", // Deep Purple
-    "#536DFE", // Indigo
-    "#448AFF", // Blue
-    "#40C4FF", // Light Blue
-    "#18FFFF", // Cyan
-    "#64FFDA", // Teal
-    "#69F0AE", // Green
-    "#B2FF59", // Light Green
-    "#EEFF41", // Lime
-    "#FFFF00", // Yellow
-    "#FFD740", // Amber
-    "#FFAB40", // Orange
-    "#FF6E40", // Deep Orange
-  ];
-
   // Generate data
   const data: ListItem[] = useMemo(() => {
     return Array.from({ length: 100 }, (_, i) => ({

fixture/react-native/src/MovieList.tsx

@@ -219,10 +219,6 @@ const MoviePoster = ({ item }: { item: Movie }) => {
 
 // Category row component
 const CategoryRow = ({ category }: { category: Category }) => {
-  useEffect(() => {
-    console.log("Moview row mount", category.title);
-  }, []);
-
   const renderMoviePoster = useCallback(
     ({ item }: { item: Movie }) => <MoviePoster item={item} />,
     []