fetch user profiles

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

@@ -67,6 +67,8 @@ const HeaderRight = () => {
     <View className="flex-row">
       <SpeakerButton />
       <View className="mx-3" />
+      <FissaMembersButton />
+      <View className="mx-3" />
       <Settings />
     </View>
   );
@@ -173,3 +175,22 @@ const SpeakerButton = () => {
     </>
   );
 };
+
+const FissaMembersButton = () => {
+  const { pin } = useGlobalSearchParams();
+  const { push } = useRouter()
+
+  const { data } = api.fissa.members.useQuery(String(pin), {
+    enabled: !!pin,
+  });
+
+  return (
+    <View className="relative">
+      <IconButton icon="users" title="DJ ranking" onPress={() => push(`/fissa/${pin}/members`)} />
+      <View className="items-center justify-center w-6 absolute rounded-full -right-4 -top-3" style={{
+      }}>
+        <Typography centered className="text-[10px]">{data?.length}</Typography>
+      </View>
+    </View>
+  )
+}

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

@@ -0,0 +1,43 @@
+import { AnimationSpeed } from "@fissa/utils";
+import { FlashList } from "@shopify/flash-list";
+import { Stack, useGlobalSearchParams, useRouter } from "expo-router";
+import { View } from "react-native";
+import { IconButton, ListItem, PageTemplate } from "../../../src/components";
+import { api } from "../../../src/utils";
+
+const Members = () => {
+  const { pin } = useGlobalSearchParams();
+  const { back } = useRouter();
+
+  const { data } = api.fissa.members.useQuery(String(pin), {
+    enabled: !!pin,
+  });
+
+
+  return (
+    <PageTemplate fullScreen className="px-6 pt-4">
+      <Stack.Screen
+        options={{
+          title: "Top DJs",
+          animation: "fade_from_bottom",
+          animationDuration: AnimationSpeed.VeryFast,
+          headerRight: () => <IconButton icon="close" title="back to fissa" onPress={back} />,
+        }}
+      />
+      <View className="h-full w-full">
+        <FlashList
+          estimatedItemSize={48}
+          data={data}
+          renderItem={({ item }) => (
+            <ListItem
+              imageUri={item.user.image}
+              title={item.user.name ?? "Anonymous"}
+              subtitle={`${item.points} points`}
+            />
+          )} />
+      </View>
+    </PageTemplate>
+  )
+}
+
+export default Members;

apps/expo/src/components/shared/Icon.tsx

@@ -1,6 +1,6 @@
-import { type FC } from "react";
 import { AntDesign, Feather, FontAwesome } from "@expo/vector-icons";
 import { type IconProps } from "@expo/vector-icons/build/createIconSet";
+import { type FC } from "react";
 
 export const Icon: FC<Props> = ({ name, ...props }) => {
   if (Object.keys(Feather.glyphMap).includes(name))

apps/expo/src/components/shared/ListItem.tsx

@@ -1,3 +1,5 @@
+import { theme } from "@fissa/tailwind-config";
+import { cva } from "@fissa/utils";
 import { useEffect, useRef, type FC } from "react";
 import {
   Animated,
@@ -6,8 +8,6 @@ import {
   type TouchableWithoutFeedbackProps,
   type ViewProps,
 } from "react-native";
-import { theme } from "@fissa/tailwind-config";
-import { cva } from "@fissa/utils";
 
 import { Image } from "./Image";
 import { Typography } from "./Typography";
@@ -116,9 +116,9 @@ export const ListItem: FC<Props> = ({
 export type ListItemProps = Props;
 
 interface Props extends TouchableWithoutFeedbackProps, ViewProps {
-  imageUri?: string;
+  imageUri?: string | null;
   title: string;
-  subtitle: string | boolean;
+  subtitle: string | number | boolean;
   subtitlePrefix?: JSX.Element | null;
   extra?: JSX.Element | null;
   end?: JSX.Element | null;

apps/expo/src/utils/Toast.ts

@@ -5,8 +5,7 @@ import Toast from "react-native-toast-message";
 class NativeToast extends Toaster {
   protected show({ type = "success", message, duration, icon }: ToasterProps) {
     const text2 = icon ?? this.defaultIcon(type);
-    const visibilityTime = duration ?? ToastAndroid.SHORT;
-
+    const visibilityTime = duration ?? 1500;
     switch (Platform.OS) {
       case "ios":
       case "macos":

packages/api/src/router/fissa.ts

@@ -33,6 +33,10 @@ export const fissaRouter = createTRPCRouter({
     const service = new FissaService(ctx, new SpotifyService(), new BadgeService(ctx));
     return service.byId(input, ctx.session?.user.id);
   }),
+  members: publicProcedure.input(Z_PIN).query(({ ctx, input }) => {
+    const service = new FissaService(ctx, new SpotifyService(), new BadgeService(ctx));
+    return service.members(input);
+  }),
   pause: protectedProcedure.input(Z_PIN).mutation(({ ctx, input }) => {
     const service = new FissaService(ctx, new SpotifyService(), new BadgeService(ctx));
     return service.pause(input, ctx.session.user.id);

packages/api/src/service/AuthService.ts

@@ -70,10 +70,13 @@ export class AuthService extends ServiceWithContext {
 
     let session = sessions[0];
 
+
     if (session && isPast(session.expires)) {
       session = await this.db.session.update({
         where: { id: session.id },
-        data: { expires: addMonths(new Date(), 1) },
+        data: {
+          expires: addMonths(new Date(), 1),
+        },
       });
     }
 
@@ -87,6 +90,9 @@ export class AuthService extends ServiceWithContext {
       data: {
         access_token: tokens.body.access_token,
         expires_at: this.expiresAt(tokens.body.expires_in),
+        user: {
+          update: { image: spotifyUser.body.images?.[0]?.url },
+        }
       },
     });
 
@@ -143,6 +149,7 @@ export class AuthService extends ServiceWithContext {
           create: {
             email: spotifyUser.email,
             name: spotifyUser.display_name,
+            image: spotifyUser.images?.[0]?.url,
             sessions: {
               create: {
                 expires: addMonths(new Date(), 1),

packages/api/src/service/FissaService.ts

@@ -149,6 +149,21 @@ export class FissaService extends ServiceWithContext {
     await this.stopFissa(pin, fissa.by.accounts[0].access_token);
   };
 
+  members = async (pin: string) => {
+    return this.db.userInFissa.findMany({
+      where: { pin },
+      select: {
+        points: true,
+        user: {
+          select: {
+            name: true,
+            image: true
+          }
+        }
+      },
+    });
+  }
+
   playNextTrack = async (pin: string, forceToPlay = false) => {
     const fissaDetails = await this.getFissaDetailedInformation(pin);
     const { by, tracks, currentlyPlaying, expectedEndTime } = fissaDetails;