cally/components/pages/(tablet_pages)/chores/TabletChoresPage.tsx

import React, {useEffect, useMemo} from "react";
import {Text, View} from "react-native-ui-lib";
import * as ScreenOrientation from "expo-screen-orientation";
import TabletContainer from "../tablet_components/TabletContainer";
import SingleUserChoreList from "./SingleUserChoreList";
import { useGetFamilyMembers } from "@/hooks/firebase/useGetFamilyMembers";
import { ImageBackground, StyleSheet } from "react-native";
import { colorMap } from "@/constants/colorMap";
import { ScrollView } from "react-native-gesture-handler";
import { ProfileType, useAuthContext } from "@/contexts/AuthContext";

const TabletChoresPage = () => {
    const {data: users} = useGetFamilyMembers();
    const { user: currentUser } = useAuthContext();

    const sortedUsers = useMemo(() => {
      return users
        ?.filter(member => member.userType !== ProfileType.FAMILY_DEVICE)
        .sort((a, b) => {
          if (a.uid === currentUser?.uid) return -1;
          if (b.uid === currentUser?.uid) return 1;

          const typePriority = {
            [ProfileType.PARENT]: 0,
            [ProfileType.CHILD]: 1,
            [ProfileType.CAREGIVER]: 2
          };

          return typePriority[a.userType] - typePriority[b.userType];
        });
    }, [users, currentUser]);

    // Function to lock the screen orientation to landscape
    const lockScreenOrientation = async () => {
        await ScreenOrientation.lockAsync(
            ScreenOrientation.OrientationLock.LANDSCAPE_RIGHT
        );
    };

  useEffect(() => {
    lockScreenOrientation(); // Lock orientation when the component mounts

    return () => {
      // Optional: Unlock to default when the component unmounts
      ScreenOrientation.unlockAsync();
    };
  }, []);

  const capitalizeFirstLetter = (str: string) => {
    if (!str) return "";
    return str.charAt(0).toUpperCase() + str.slice(1).toLowerCase();
  };

  return (
    <TabletContainer>
      <ScrollView horizontal>
        <View row gap-25 padding-25>
          {sortedUsers
          ?.filter((member) => member.userType !== ProfileType.FAMILY_DEVICE)
          .map((user, index) => (
            <View key={index}>
              <View row centerV>
                {user.pfp ? (
                  <ImageBackground
                    source={{ uri: user.pfp }}
                    style={
                      styles.pfp
                      }
                    imageStyle={(user.eventColor && {
                      borderWidth: 2,
                      borderColor: user.eventColor,
                    }) ||
                      undefined
                  }
                    borderRadius={13.33}
                  />
                ) : (
                  <View
                    center
                    style={styles.pfp}
                    backgroundColor={user.eventColor || "#00a8b6"}
                  >
                    <Text color="white">
                      {user.firstName.at(0)}
                      {user.lastName.at(0)}
                    </Text>
                  </View>
                )}
                <Text style={styles.name} marginL-15>
                  {user.firstName}
                </Text>
                <Text style={[styles.name, { color: "#9b9b9b" }]} marginL-5>
                  ({capitalizeFirstLetter(user.userType)})
                </Text>
              </View>
              <SingleUserChoreList user={user} />
            </View>
          ))}
        </View>
      </ScrollView>
    </TabletContainer>
  );
};

const styles = StyleSheet.create({
    pfp: {
        width: 46.74,
        aspectRatio: 1,
        borderRadius: 13.33,
    },
    name: {
        fontFamily: "Manrope_600SemiBold",
        fontSize: 22.43,
        color: "#2c2c2c",
    },
});

export default TabletChoresPage;