Chore/bump packages (#23)

* update pnpm * chore(package.json): update typescript and eslint * chore(package.json): bump zod and superjson * fix: delete track * chore(packages/utils): bump packages * chore(packages/test): bump packages * chore(packages/config/eslint): bump packages * chore(packages/db): bump packages * chore(auth/db/expo): bump packages * chore(expo): bump packages * fix(Logo): create `AnimatedLottieView` * chore(main): bump vitests and turbo * chore(expo/nextjs): bump @tanstack/react-query * use exact versions * chore: update to expo 51 * update .npmrc * FissaService: pass correct data * apps/next: use NextAuth from package/db * next 13.3.1 -> 14.2.3 * resolve ts issues * revert react types * align package versions * sort deps
xiduzo · May 10, 2024 · d03f638 · d03f638
1 parent 74be295
commit d03f638
Show file tree

Hide file tree

Showing 43 changed files with 5,172 additions and 4,496 deletions.
diff --git a/.github/workflows/ci.yml b/.github/workflows/ci.yml
@@ -26,10 +26,10 @@ jobs:
       - name: Setup pnpm
         uses: pnpm/action-setup@v2.2.4
 
-      - name: Setup Node 18
+      - name: Setup Node 20
         uses: actions/setup-node@v3
         with:
-          node-version: 18
+          node-version: 20
 
       - name: Get pnpm store directory
         id: pnpm-cache

diff --git a/.npmrc b/.npmrc
@@ -1,4 +1,4 @@
-# Expo doesn't play nice with pnpm by default. 
+# Expo doesn't play nice with pnpm by default.
 # The symbolic links of pnpm break the rules of Expo monorepos.
 # @link https://docs.expo.dev/guides/monorepos/#common-issues
 node-linker=hoisted
@@ -10,3 +10,5 @@ public-hoist-pattern[]=*prisma*
 # but we don't want it installed there since it's already
 # installed in the @fissa/db package
 strict-peer-dependencies=false
+package-manager-strict=false
+link-workspace-packages=true
diff --git a/.nvmrc b/.nvmrc
@@ -1 +1 @@
-18
+20
diff --git a/apps/expo/app.config.ts b/apps/expo/app.config.ts
@@ -1,9 +1,9 @@
 // eslint-disable-next-line @typescript-eslint/consistent-type-imports
 import { ConfigContext, ExpoConfig } from "@expo/config";
 
-const version = "3.2.0"; // EAS VERSION
+const version = "3.4.0"; // EAS VERSION
 // Should be bumped every time a new build is made
-const buildNumber = "6"; // EAS VERSION
+const buildNumber = "1"; // EAS VERSION
 
 const defineConfig = (_ctx: ConfigContext): ExpoConfig => ({
   name: "fissa",

diff --git a/apps/expo/app/_layout.tsx b/apps/expo/app/_layout.tsx
@@ -1,17 +1,16 @@
-import React, { useCallback } from "react";
-import { SafeAreaProvider } from "react-native-safe-area-context";
+import * as Sentry from "@sentry/react-native";
 import { Stack } from "expo-router";
 import { StatusBar } from "expo-status-bar";
 import * as Updates from "expo-updates";
-import * as Sentry from "@sentry/react-native";
+import React, { useEffect } from "react";
+import 'react-native-reanimated'; // https://github.com/expo/expo/issues/28618
+import { SafeAreaProvider } from "react-native-safe-area-context";
 
 import { Header, ToastContainer } from "../src/components/";
 import { NotificationProvider, SpotifyProvider } from "../src/providers";
 import { toast } from "../src/utils";
 import { TRPCProvider } from "../src/utils/api";
 
-// This is the main layout of the app
-// It wraps your pages with the providers they need
 const RootLayout = () => (
   <TRPCProvider>
     <NotificationProvider>
@@ -34,19 +33,19 @@ const RootLayout = () => (
 export default Sentry.wrap(RootLayout);
 
 const Updater = () => {
-  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" });
-      void Updates.fetchUpdateAsync().then(Updates.reloadAsync);
-    }
-  }, []);
-
-  Updates.useUpdateEvents(handleUpdate);
+  useEffect(() => {
+    Updates.checkForUpdateAsync().then(async update => {
+      if (update.isAvailable) {
+        toast.info({
+          message: "A new update is available. Downloading...",
+        });
+          await Updates.fetchUpdateAsync();
+          await Updates.reloadAsync();
+      }
+    }).catch((error) => {
+      console.error("Error fetching latest Expo update", error);
+    });
+  })
 
   return null;
 };
diff --git a/apps/expo/app/fissa/[pin]/index.tsx b/apps/expo/app/fissa/[pin]/index.tsx
@@ -1,22 +1,22 @@
-import { useCallback, useState, type FC } from "react";
-import { TouchableOpacity, View } from "react-native";
-import { notificationAsync, NotificationFeedbackType } from "expo-haptics";
-import { LinearGradient } from "expo-linear-gradient";
-import { Stack, useGlobalSearchParams, useRouter } from "expo-router";
-import Slider from "@react-native-community/slider";
 import { theme } from "@fissa/tailwind-config";
 import { useDevices, useSpotify } from "@fissa/utils";
+import Slider from "@react-native-community/slider";
+import { NotificationFeedbackType, notificationAsync } from "expo-haptics";
+import { LinearGradient } from "expo-linear-gradient";
+import { Stack, useGlobalSearchParams, useRouter } from "expo-router";
+import { useCallback, useState, type FC } from "react";
+import { TouchableOpacity, View } from "react-native";
 
 import {
-  Fab,
-  FissaTracks,
-  IconButton,
-  PageTemplate,
-  Popover,
-  QuickVoteProvider,
-  SelectDevice,
-  Settings,
-  Typography,
+    Fab,
+    FissaTracks,
+    IconButton,
+    PageTemplate,
+    Popover,
+    QuickVoteProvider,
+    SelectDevice,
+    Settings,
+    Typography,
 } from "../../../src/components";
 import { useIsOwner, useOnActiveApp, useShareFissa } from "../../../src/hooks";
 import { api, mapDeviceToIcon, toast } from "../../../src/utils";
@@ -50,8 +50,8 @@ const Fissa = () => {
       </QuickVoteProvider>
       <Fab title="add songs" icon="plus" linkTo={`fissa/${pin}/addTracks`} />
       <LinearGradient
-        colors={["transparent", theme[900]]}
-        className="absolute bottom-0 h-24 w-screen"
+        colors={["transparent", theme['900']]}
+        className="absolute bottom-0 h-24 w-full"
       />
     </PageTemplate>
   );

diff --git a/apps/expo/app/index.tsx b/apps/expo/app/index.tsx
@@ -1,22 +1,20 @@
-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";
 import { theme } from "@fissa/tailwind-config";
 import { AnimationSpeed } from "@fissa/utils";
+import { Stack, useRouter } from "expo-router";
+import * as SystemUI from "expo-system-ui";
+import React, { useCallback, useEffect, useRef } from "react";
+import { Animated, View } from "react-native";
 
 import { Button, Logo, Typography } from "../src/components";
 import { useAuth } from "../src/providers";
 
 const Index = () => {
-  const { signIn, user } = useAuth();
+  const { signIn, user, isLoading } = useAuth();
   const { replace } = useRouter();
 
   const colorAnimation = useRef(new Animated.Value(0)).current;
   const notSignedInAnimation = useRef(new Animated.Value(0)).current;
   const signedInAnimation = useRef(new Animated.Value(0)).current;
-  const animationsDone = useRef(false);
-  const canSkipToHome = useRef(false);
 
   const color = colorAnimation.interpolate({
     inputRange: [0, 1],
@@ -53,43 +51,32 @@ const Index = () => {
     outputRange: [1, 1, 0],
   });
 
-  useEffect(() => {
-    if (!user) return;
-    canSkipToHome.current = true;
-    if (!animationsDone.current) return;
+  const colorAnimationCallback: Animated.EndCallback = useCallback(({finished})  => {
+    if(!finished) return
+
+    if (!user) {
+       Animated.spring(notSignedInAnimation, {
+        toValue: 1,
+        useNativeDriver: false,
+      }).start()
+       return
+    }
 
-    replace("/home");
-  }, [user, replace]);
+    Animated.timing(signedInAnimation, {
+      toValue: 1,
+      duration: AnimationSpeed.Fast,
+      useNativeDriver: false,
+    }).start(() => replace("/home"));
+  }, [user, notSignedInAnimation, signedInAnimation, replace])
 
   useEffect(() => {
     void SystemUI.setBackgroundColorAsync(theme["900"]);
-  }, []);
-
-  useEffect(() => {
     Animated.timing(colorAnimation, {
       toValue: 1,
       duration: 3500,
       useNativeDriver: false,
-    }).start(() => {
-      if (!canSkipToHome.current) {
-        Animated.spring(notSignedInAnimation, {
-          toValue: 1,
-          useNativeDriver: false,
-        }).start(() => {
-          animationsDone.current = true;
-        });
-        return;
-      }
-
-      Animated.timing(signedInAnimation, {
-        toValue: 1,
-        duration: AnimationSpeed.Fast,
-        useNativeDriver: false,
-      }).start(() => {
-        replace("/home");
-      });
-    });
-  }, [replace, signedInAnimation, notSignedInAnimation, colorAnimation]);
+    }).start(colorAnimationCallback);
+  }, [colorAnimation, colorAnimationCallback]);
 
   return (
     <Animated.View style={{ backgroundColor }} className="h-full items-center justify-between px-6">
@@ -115,12 +102,12 @@ const Index = () => {
             variant="h1"
             centered
             className="mb-4"
-            accessibilityLabel="A collaborative live playlist, together with your friends"
+            accessibilityLabel="A live shared playlist, curated together"
           >
-            A collaborative live playlist
+            A live shared playlist
           </Typography>
           <Typography variant="h5" centered accessibilityElementsHidden>
-            together with your friends
+            curated together
           </Typography>
         </Animated.View>
         <Animated.View
@@ -134,18 +121,19 @@ const Index = () => {
             icon="spotify"
             onPress={signIn}
             title="Connect to get started"
-            disabled={!!user}
+            disabled={!!user || isLoading}
             accessibilityLabel="Connect to spotify to get started"
           />
         </Animated.View>
         <Typography
           centered
-          className="mb-8"
+          className="mb-8 italic"
+          dimmed
           variant="bodyM"
           animatedColor={color}
-          accessibilityLabel="Fissa, by Milanovski and Xiduzo"
+          accessibilityLabel="Fissa is made by Milanovski and Xiduzo"
         >
-          Made by Milanovski and Xiduzo
+          by Milanovski and Xiduzo
         </Typography>
       </View>
     </Animated.View>

diff --git a/apps/expo/babel.config.js b/apps/expo/babel.config.js
@@ -1,7 +1,7 @@
 module.exports = function (api) {
   api.cache(true);
   return {
-    plugins: ["nativewind/babel", require.resolve("expo-router/babel")],
+    plugins: ["nativewind/babel"],
     presets: ["babel-preset-expo"],
   };
 };
diff --git a/apps/expo/package.json b/apps/expo/package.json
@@ -4,7 +4,7 @@
   "main": "index.js",
   "scripts": {
     "clean": "rm -rf .expo .turbo node_modules",
-    "dev": "expo start --ios",
+    "dev:x": "expo start --ios",
     "dev:prod": "expo start --ios",
     "dev:android": "expo start --android",
     "dev:ios": "expo start --ios",
@@ -16,53 +16,54 @@
     "ios": "expo run:ios"
   },
   "dependencies": {
-    "@expo/vector-icons": "^13.0.0",
+    "@expo/vector-icons": "14.0.1",
     "@fissa/api": "*",
     "@fissa/tailwind-config": "*",
     "@fissa/utils": "*",
-    "@react-native-community/slider": "^4.4.3",
-    "@sentry/react-native": "^5.12.0",
-    "@shopify/flash-list": "1.6.2",
-    "@tanstack/react-query": "^4.29.5",
-    "@trpc/client": "^10.21.1",
-    "@trpc/react-query": "^10.21.1",
-    "@trpc/server": "^10.21.1",
-    "expo": "^49.0.16",
-    "expo-auth-session": "^5.2.0",
-    "expo-constants": "~14.4.2",
-    "expo-device": "~5.6.0",
-    "expo-haptics": "^12.6.0",
-    "expo-image": "~1.5.1",
-    "expo-linear-gradient": "~12.5.0",
-    "expo-linking": "~6.0.0",
-    "expo-notifications": "~0.23.0",
-    "expo-router": "^2.0.11",
-    "expo-secure-store": "^12.5.0",
-    "expo-splash-screen": "~0.22.0",
-    "expo-status-bar": "~1.7.1",
-    "expo-system-ui": "^2.6.0",
-    "expo-updates": "~0.18.17",
-    "lottie-react-native": "^5.1.6",
-    "nativewind": "^2.0.11",
+    "@react-native-community/slider": "4.5.2",
+    "@sentry/react-native": "5.22.2",
+    "@shopify/flash-list": "1.6.4",
+    "@tanstack/react-query": "4.36.1",
+    "@trpc/client": "10.21.1",
+    "@trpc/react-query": "10.21.1",
+    "@trpc/server": "10.21.1",
+    "expo": "51.0.2",
+    "expo-auth-session": "5.5.2",
+    "expo-constants": "~16.0.1",
+    "expo-device": "~6.0.2",
+    "expo-haptics": "13.0.1",
+    "expo-image": "~1.12.9",
+    "expo-linear-gradient": "~13.0.2",
+    "expo-linking": "~6.3.1",
+    "expo-notifications": "~0.28.1",
+    "expo-router": "3.5.11",
+    "expo-secure-store": "13.0.1",
+    "expo-splash-screen": "0.27.4",
+    "expo-status-bar": "~1.12.1",
+    "expo-system-ui": "3.0.4",
+    "expo-updates": "0.25.11",
+    "lottie-react-native": "6.7.2",
+    "nativewind": "2.0.11",
     "react": "18.2.0",
     "react-dom": "18.2.0",
-    "react-native": "0.72.6",
-    "react-native-gesture-handler": "^2.13.4",
-    "react-native-safe-area-context": "4.7.4",
-    "react-native-screens": "~3.27.0",
-    "react-native-toast-message": "^2.1.7"
+    "react-native": "0.74.1",
+    "react-native-gesture-handler": "2.16.2",
+    "react-native-reanimated": "3.10.0",
+    "react-native-safe-area-context": "4.10.1",
+    "react-native-screens": "~3.31.1",
+    "react-native-toast-message": "2.2.0"
   },
   "devDependencies": {
-    "@babel/core": "^7.20.0",
-    "@babel/preset-env": "^7.20.0",
-    "@babel/runtime": "^7.20.0",
-    "@expo/config-plugins": "^7.2.5",
+    "@babel/core": "7.24.5",
+    "@babel/preset-env": "7.24.5",
+    "@babel/runtime": "7.24.5",
+    "@expo/config-plugins": "8.0.4",
     "@fissa/eslint-config": "*",
-    "@types/react": "^18.2.37",
-    "eslint": "^8.39.0",
-    "postcss": "^8.4.23",
+    "@types/react": "18.2.37",
+    "eslint": "8.57.0",
+    "postcss": "8.4.38",
     "tailwindcss": "3.3.1",
-    "typescript": "^5.2.2"
+    "typescript": "5.4.5"
   },
   "private": true
 }
diff --git a/apps/expo/src/components/pages/fissa/Settings.tsx b/apps/expo/src/components/pages/fissa/Settings.tsx
@@ -78,6 +78,9 @@ const CreatePlaylistAction: FC<ActionProps> = ({ pin, onRequestClose }) => {
           void spotify.addTracksToPlaylist(id, chunk);
         });
       })
+      .catch(() => {
+        toast.warn({ message: "Oops, failed to create playlist..." });
+      })
       .finally(() => {
         toast.success({ message: "Playlist created", icon: "🎉" });
         setIsCreatingPlaylist(false);