Fix/working version (#11)

* init eslint

* fix round #1

* fix round #2

* fix round #3

* fix round #4

* fix round #5

* fix round #6

* fix round #7

* fix round #8

* fix round #9

.eslintrc.js

@@ -1,16 +1,13 @@
 /** @type {import("eslint").Linter.Config} */
 const config = {
   root: true,
-  extends: ["fissa"],
+  extends: ["@fissa/eslint-config"],
   parser: "@typescript-eslint/parser",
   parserOptions: {
     ecmaVersion: "latest",
+    // @ts-ignore-next-line
     tsconfigRootDir: __dirname,
-    project: [
-      "./tsconfig.json",
-      "./apps/*/tsconfig.json",
-      "./packages/*/tsconfig.json",
-    ],
+    project: ["./tsconfig.json", "./apps/*/tsconfig.json", "./packages/*/tsconfig.json"],
   },
   settings: {
     next: {

apps/expo/app.config.ts

@@ -1,4 +1,4 @@
-import { ConfigContext, ExpoConfig } from "@expo/config";
+import { type ConfigContext, type ExpoConfig } from "@expo/config";
 
 const version = "3.1.5"; // EAS VERSION
 // Should be bumped every time a new build is made

apps/expo/app/_layout.tsx

@@ -33,17 +33,15 @@ const RootLayout = () => (
 export default RootLayout;
 
 const Updater = () => {
-  const handleUpdate = useCallback(async ({ type }: Updates.UpdateEvent) => {
+  const handleUpdate = useCallback(({ type }: Updates.UpdateEvent) => {
     if (type === Updates.UpdateEventType.ERROR) {
       // Handle error
     } else if (type === Updates.UpdateEventType.NO_UPDATE_AVAILABLE) {
       // Handle no update available
     } else if (type === Updates.UpdateEventType.UPDATE_AVAILABLE) {
       // Handle update available
       toast.info({ message: "Installing update" });
-      await Updates.fetchUpdateAsync();
-
-      await Updates.reloadAsync();
+      Updates.fetchUpdateAsync().then(Updates.reloadAsync).catch(console.log);
     }
   }, []);
 

apps/expo/app/fissa/[pin]/index.tsx

@@ -13,7 +13,9 @@ const Fissa = () => {
 
   const invalidate = useInvalidateFissa();
 
-  useOnActiveApp(() => invalidate(String(pin)));
+  useOnActiveApp(() => {
+    invalidate(String(pin)).catch(console.log);
+  });
 
   if (!pin) return null;
 

apps/expo/app/home.tsx

@@ -3,7 +3,7 @@ import { View } from "react-native";
 import { SafeAreaView } from "react-native-safe-area-context";
 import { Stack } from "expo-router";
 import { theme } from "@fissa/tailwind-config";
-import { logger, useSpotify } from "@fissa/utils";
+import { useSpotify } from "@fissa/utils";
 
 import {
   Action,
@@ -29,7 +29,7 @@ const Home = () => {
       .then((user) => {
         setIsPremium(user.product === "premium");
       })
-      .catch(logger.error);
+      .catch(console.log);
   }, [spotify]);
 
   return (
@@ -86,7 +86,7 @@ const AccountDetails = () => {
   const handleSignOut = useCallback(() => {
     toggleAccountDetails();
     signOut();
-  }, [toggleAccountDetails]);
+  }, [toggleAccountDetails, signOut]);
 
   return (
     <>

apps/expo/app/host/fromPlaylist.tsx

@@ -16,12 +16,13 @@ const FromPlaylist = () => {
   const { mutateAsync, isLoading } = useCreateFissa();
 
   const start = useCallback(async () => {
-    const spotifyTracks = await getPlaylistTracks(selectedPlaylist!.id, spotify);
+    if (!selectedPlaylist) return;
+    const spotifyTracks = await getPlaylistTracks(selectedPlaylist.id, spotify);
 
     await mutateAsync(spotifyTracks);
 
     setSelectedPlaylist(null);
-  }, [selectedPlaylist]);
+  }, [selectedPlaylist, mutateAsync, spotify]);
 
   return (
     <SafeAreaView style={{ backgroundColor: theme["900"] }}>
@@ -43,13 +44,15 @@ const FromPlaylist = () => {
         <Typography variant="h2" centered inverted className="mb-8" accessibilityElementsHidden>
           Your fissa will start based on
         </Typography>
-        <PlaylistListItem
-          playlist={selectedPlaylist!}
-          hasBorder
-          inverted
-          className="mb-8"
-          accessibilityElementsHidden
-        />
+        {selectedPlaylist && (
+          <PlaylistListItem
+            playlist={selectedPlaylist}
+            hasBorder
+            inverted
+            className="mb-8"
+            accessibilityElementsHidden
+          />
+        )}
         <Button
           title="Let's kick it"
           inverted

apps/expo/app/host/fromTracks.tsx

@@ -6,11 +6,20 @@ import { useCreateFissa } from "../../src/hooks";
 const FromTracks = () => {
   const { mutateAsync, isLoading } = useCreateFissa();
 
-  const handleAddTracks = useCallback(async (tracks: SpotifyApi.TrackObjectFull[]) => {
-    await mutateAsync(tracks);
-  }, []);
+  const handleAddTracks = useCallback(
+    async (tracks: SpotifyApi.TrackObjectFull[]) => {
+      await mutateAsync(tracks);
+    },
+    [mutateAsync],
+  );
 
-  return <PickTracks onAddTracks={handleAddTracks} disabledAction={isLoading} actionTitle="Start fissa" />;
+  return (
+    <PickTracks
+      onAddTracks={handleAddTracks}
+      disabledAction={isLoading}
+      actionTitle="Start fissa"
+    />
+  );
 };
 
 export default FromTracks;

apps/expo/app/host/index.tsx

@@ -12,13 +12,17 @@ import { toast } from "../../src/utils";
 const Host = () => {
   const spotify = useSpotify();
 
-  const { mutateAsync, isLoading } = useCreateFissa();
+  const { mutateAsync, isLoading } = useCreateFissa({
+    onSettled: () => {
+      toast.hide();
+    },
+  });
 
   const handleSurpriseMe = useCallback(async () => {
     toast.info({
       icon: "🦔",
       message: "An explorer I see, making a fissa just for you",
-      duration: 5000,
+      duration: 60 * 1000,
     });
     const { items } = await spotify.getMyTopTracks();
     const { tracks } = await spotify.getRecommendations({
@@ -30,7 +34,7 @@ const Host = () => {
     });
 
     await mutateAsync(tracks);
-  }, [spotify]);
+  }, [spotify, mutateAsync]);
 
   return (
     <SafeAreaView style={{ backgroundColor: theme["900"] }}>

apps/expo/app/index.tsx

@@ -1,4 +1,4 @@
-import React, { useEffect, useMemo, useRef } from "react";
+import React, { useEffect, useRef } from "react";
 import { Animated, View } from "react-native";
 import { Stack, useRouter } from "expo-router";
 import * as SystemUI from "expo-system-ui";
@@ -61,8 +61,8 @@ const Index = () => {
     replace("/home");
   }, [user, replace]);
 
-  useMemo(async () => {
-    await SystemUI.setBackgroundColorAsync(theme["900"]);
+  useEffect(() => {
+    SystemUI.setBackgroundColorAsync(theme["900"]).catch(console.log);
   }, []);
 
   useEffect(() => {
@@ -89,7 +89,7 @@ const Index = () => {
         replace("/home");
       });
     });
-  }, [replace]);
+  }, [replace, signedInAnimation, notSignedInAnimation, colorAnimation]);
 
   return (
     <Animated.View style={{ backgroundColor }} className="h-full items-center justify-between px-6">

apps/expo/app/join.tsx

@@ -1,16 +1,15 @@
 import { useCallback, useMemo, useRef, useState } from "react";
 import {
-  NativeSyntheticEvent,
   SafeAreaView,
   TextInput,
-  TextInputChangeEventData,
-  TextInputTextInputEventData,
   View,
+  type NativeSyntheticEvent,
+  type TextInputChangeEventData,
+  type TextInputTextInputEventData,
 } from "react-native";
 import { NotificationFeedbackType, notificationAsync } from "expo-haptics";
 import { Stack, useRouter } from "expo-router";
 import { theme } from "@fissa/tailwind-config";
-import { logger } from "@fissa/utils";
 
 import { Button, PageTemplate, Rejoin, Typography } from "../src/components";
 import { toast } from "../src/utils/Toast";
@@ -24,7 +23,7 @@ const Join = () => {
     enabled: !pin.includes(""),
     onSuccess: ({ pin }) => {
       toast.success({ message: "Enjoy the fissa", icon: "🎉" });
-      notificationAsync(NotificationFeedbackType.Success).catch(logger.warning);
+      notificationAsync(NotificationFeedbackType.Success).catch(console.warn);
       replace(`/fissa/${pin}`);
     },
     onError: ({ message }) => {
@@ -47,7 +46,7 @@ const Join = () => {
         current?.clear();
       });
     },
-    [],
+    [keys],
   );
 
   const handlePress = useCallback(

apps/expo/package.json

@@ -51,10 +51,10 @@
     "@babel/core": "^7.20.0",
     "@babel/preset-env": "^7.20.0",
     "@babel/runtime": "^7.20.0",
+    "@fissa/eslint-config": "*",
     "@expo/config-plugins": "^6.0.1",
     "@types/react": "^18.0.38",
     "eslint": "^8.34.0",
-    "eslint-config-acme": "0.0.0",
     "postcss": "^8.4.23",
     "tailwindcss": "3.3.1",
     "typescript": "^4.9.5"

apps/expo/src/components/pages/PageTemplate.tsx

@@ -1,6 +1,6 @@
-import { FC } from "react";
-import { View, ViewProps } from "react-native";
-import { VariantProps, cva } from "@fissa/utils";
+import { type FC } from "react";
+import { View, type ViewProps } from "react-native";
+import { cva, type VariantProps } from "@fissa/utils";
 
 export const PageTemplate: FC<Props> = ({ children, className, ...props }) => {
   return (

apps/expo/src/components/pages/fissa/ListEmptyComponent.tsx

@@ -1,4 +1,4 @@
-import { FC, useCallback } from "react";
+import { useCallback, type FC } from "react";
 import { NotificationFeedbackType, notificationAsync } from "expo-haptics";
 import { useSearchParams } from "expo-router";
 import { useIsOwner, useRestartFissa } from "@fissa/hooks";
@@ -28,15 +28,16 @@ export const ListEmptyComponent: FC<Props> = ({ isLoading }) => {
 
   const handleDeviceSelect = useCallback(
     (device: SpotifyApi.UserDevice) => async () => {
+      if (!device.id) return;
       try {
-        await spotify.transferMyPlayback([device.id!]);
+        await spotify.transferMyPlayback([device.id]);
         await mutateAsync();
       } catch (e) {
         toast.error({
           message: `Failed to connect to ${device.name}`,
         });
       } finally {
-        fetchDevices();
+        fetchDevices().catch(console.log);
       }
     },
     [spotify, fetchDevices, mutateAsync],

apps/expo/src/components/pages/fissa/ListFooterComponent.tsx

@@ -1,4 +1,4 @@
-import { FC } from "react";
+import { type FC } from "react";
 import { View } from "react-native";
 
 import { Typography } from "../../shared";
@@ -11,7 +11,7 @@ export const ListFooterComponent: FC<{ tracksShown: boolean }> = ({ tracksShown
       <Typography variant="h1" className="mb-4">
         🦦
       </Typography>
-      <Typography variant="bodyM">Add songs or I'll fill the queue</Typography>
+      <Typography variant="bodyM">Add songs or I&apos;ll fill the queue</Typography>
     </View>
   );
 };

apps/expo/src/components/pages/fissa/SelectedTrackPopover.tsx

@@ -1,26 +1,19 @@
-import { FC } from "react";
+import { type FC } from "react";
 
 import { Divider, Popover, TrackListItem } from "../../shared";
 import { TrackActions } from "./TrackActions";
 
-export const SelectedTrackPopover: FC<Props> = ({ currentTrackIndex, track, onRequestClose }) => {
+export const SelectedTrackPopover: FC<Props> = ({ track, onRequestClose }) => {
   return (
     <Popover visible={!!track} onRequestClose={onRequestClose}>
       {track && <TrackListItem inverted track={track} hasBorder />}
       <Divider />
-      {track && (
-        <TrackActions
-          currentTrackIndex={currentTrackIndex}
-          track={track}
-          onPress={onRequestClose}
-        />
-      )}
+      {track && <TrackActions track={track} onPress={onRequestClose} />}
     </Popover>
   );
 };
 
 interface Props {
   track?: SpotifyApi.TrackObjectFull;
-  currentTrackIndex: number;
   onRequestClose: () => void;
 }

apps/expo/src/components/pages/fissa/Settings.tsx

@@ -1,8 +1,8 @@
-import { FC, useCallback, useState } from "react";
+import { useCallback, useState, type FC } from "react";
 import { NotificationFeedbackType, notificationAsync } from "expo-haptics";
 import { useRouter, useSearchParams } from "expo-router";
 import { useGetTracks, useIsOwner } from "@fissa/hooks";
-import { logger, splitInChunks, useSpotify, useTracks } from "@fissa/utils";
+import { splitInChunks, useSpotify, useTracks } from "@fissa/utils";
 
 import { useAuth } from "../../../providers";
 import { toast } from "../../../utils";
@@ -21,7 +21,7 @@ export const Settings = () => {
   const goToHome = useCallback(() => {
     togglePopover();
     push("/home");
-  }, []);
+  }, [togglePopover, push]);
 
   if (!pin) return null;
 
@@ -59,26 +59,27 @@ const CreatePlaylistAction: FC<ActionProps> = ({ pin, onRequestClose }) => {
   const [isCreatingPlaylist, setIsCreatingPlaylist] = useState(false);
 
   const handleCreatePlaylist = useCallback(async () => {
+    if (!user) return;
     setIsCreatingPlaylist(true);
     await notificationAsync(NotificationFeedbackType.Success);
     onRequestClose();
     spotify
-      .createPlaylist(user!.id, {
+      .createPlaylist(user.id, {
         name: `Fissa ${pin}`,
         description: "Playlist created by Fissa",
       })
       .then(({ id }) => {
         const uris = tracks?.map(({ uri }) => uri) ?? [];
         const chunks = splitInChunks(uris, 100);
         chunks.forEach((chunk) => {
-          spotify.addTracksToPlaylist(id, chunk).catch(logger.warning);
+          spotify.addTracksToPlaylist(id, chunk).catch(console.warn);
         });
       })
       .finally(() => {
         toast.success({ message: "Playlist created", icon: "🎉" });
         setIsCreatingPlaylist(false);
       });
-  }, [spotify, user, tracks, onRequestClose]);
+  }, [spotify, user, tracks, onRequestClose, pin]);
 
   return (
     <Action