LlamaLangApp · ahurbol · Jan 2, 2024 · Jan 2, 2024 · Jan 2, 2024
diff --git a/components/EmptyListText.tsx b/components/EmptyListText.tsx
@@ -0,0 +1,20 @@
+import { Text, View } from "react-native";
+import React, { useMemo } from "react";
+import textStyles from "@styles/TextStyles";
+import containerStyles from "@styles/ContainerStyles";
+
+const EmptyListText = ({ texts }: { texts: string[] }) => {
+  return useMemo(() => {
+    return (
+      <View style={containerStyles.emptyList}>
+        {texts.map((text, index) => (
+          <Text key={index} style={textStyles.emptyList}>
+            {text}
+          </Text>
+        ))}
+      </View>
+    );
+  }, [texts]);
+};
+
+export default EmptyListText;
diff --git a/components/GameInvitations.tsx b/components/GameInvitations.tsx
@@ -6,6 +6,7 @@ import { NavigationProp, useNavigation } from "@react-navigation/native";
 import { GamesStackParamList } from "@navigation/GamesStack";
 import { UpdateHandlerContext } from "@backend/UpdateHandler";
 import { LightGreyButton } from "./buttons/BasicButton";
+import EmptyListText from "@components/EmptyListText";
 import { grey } from "../Consts";
 import gameInvitationsStyles from "@styles/GameInvitationsStyles";
 import containerStyles from "@styles/ContainerStyles";
@@ -74,13 +75,7 @@ const GameInvitations = () => {
                   return <View style={containerStyles.thinLine} />;
                 }}
                 ListEmptyComponent={() => {
-                  return (
-                    <View style={containerStyles.emptyList}>
-                      <Text style={textStyles.emptyList}>
-                        You have no invites
-                      </Text>
-                    </View>
-                  );
+                  return <EmptyListText texts={[`You have no invites`]} />;
                 }}
                 renderItem={({ item }) => {
                   return (

diff --git a/components/games/InviteFriendsModal.tsx b/components/games/InviteFriendsModal.tsx
@@ -2,11 +2,10 @@ import { FlatList, Modal, Text, TouchableOpacity, View } from "react-native";
 import React, { useMemo } from "react";
 import { serverURL } from "@backend/CommonBackend";
 import { Friends } from "@games/common/waiting_room/MultiplayerOwnerWaitingRoom";
+import EmptyListText from "@components/EmptyListText";
 import FriendsListItem from "./FriendsListItem";
 import { grey } from "../../Consts";
 import friendsStyles from "@styles/FriendsStyles";
-import containerStyles from "@styles/ContainerStyles";
-import textStyles from "@styles/TextStyles";
 
 const InviteFriendsModal = ({
   modalVisible,
@@ -64,14 +63,12 @@ const InviteFriendsModal = ({
               }}
               ListEmptyComponent={() => {
                 return (
-                  <View style={containerStyles.emptyList}>
-                    <Text style={textStyles.emptyList}>
-                      Unfortunately, you have no friends.
-                    </Text>
-                    <Text style={textStyles.emptyList}>
-                      Maybe try solo games or playing with random people?
-                    </Text>
-                  </View>
+                  <EmptyListText
+                    texts={[
+                      `Unfortunately, you have no friends.`,
+                      `Maybe try solo games or playing with random people?`,
+                    ]}
+                  />
                 );
               }}
               renderItem={(item) => {

diff --git a/components/statistics/StatisticsInfo.tsx b/components/statistics/StatisticsInfo.tsx
@@ -0,0 +1,39 @@
+import { Text, View } from "react-native";
+import { FontAwesome5 } from "@expo/vector-icons";
+import React, { useMemo } from "react";
+import statisticsStyles from "@styles/StatisticsStyles";
+
+const StatisticsInfo = ({
+  statsText,
+  statsNumber,
+  iconName,
+  textColor,
+  backgroundColor,
+}: {
+  statsText: string;
+  statsNumber: number | undefined;
+  iconName: string;
+  textColor: string;
+  backgroundColor: string;
+}) => {
+  return useMemo(() => {
+    return (
+      <View
+        style={[
+          statisticsStyles.statsInfo,
+          { backgroundColor: backgroundColor },
+        ]}
+      >
+        <Text>
+          <FontAwesome5 name={iconName} color={textColor} size={18} />
+          <Text style={{ fontSize: 18, color: textColor }}>{statsText}</Text>
+        </Text>
+        <Text style={{ fontSize: 18, color: textColor, fontWeight: "bold" }}>
+          {statsNumber}
+        </Text>
+      </View>
+    );
+  }, [backgroundColor, textColor, statsNumber, statsText]);
+};
+
+export default StatisticsInfo;
diff --git a/components/statistics/StatsInfo.tsx b/components/statistics/StatsInfo.tsx
diff --git a/navigation/UserStack.tsx b/navigation/UserStack.tsx
@@ -1,7 +1,7 @@
 import { createNativeStackNavigator } from "@react-navigation/native-stack";
 import ProfileScreen from "@screens/user/Profile";
 import StatisticsScreen from "@screens/Statistics";
-import LlamaScreen from "@screens/user/Llama";
+import LlamaStoreScreen from "@screens/user/LlamaStore";
 
 export type UserStackParamList = {
   User: undefined;
@@ -16,7 +16,7 @@ const UserStack = () => {
     <Stack.Navigator screenOptions={{ headerShown: false }}>
       <Stack.Screen name={"User"} component={ProfileScreen} />
       <Stack.Screen name={"Statistics"} component={StatisticsScreen} />
-      <Stack.Screen name={"Llama"} component={LlamaScreen} />
+      <Stack.Screen name={"Llama"} component={LlamaStoreScreen} />
     </Stack.Navigator>
   );
 };

diff --git a/screens/Scoreboard.tsx b/screens/Scoreboard.tsx
@@ -7,10 +7,10 @@ import { useAppStore } from "../state";
 import ButtonRow from "@components/ButtonRow";
 import CustomDropdown from "@components/CustomDropdown";
 import PlayerListItem from "@components/PlayerListItem";
+import EmptyListText from "@components/EmptyListText";
 import { pink } from "../Consts";
 import mainStyles from "@styles/MainStyles";
 import scoreboardStyles from "@styles/ScoreboardStyles";
-import textStyles from "@styles/TextStyles";
 import containerStyles from "@styles/ContainerStyles";
 
 const ranges = {
@@ -82,13 +82,7 @@ const ScoreboardScreen = () => {
             return <View style={containerStyles.thinLine} />;
           }}
           ListEmptyComponent={() => {
-            return (
-              <View style={containerStyles.emptyList}>
-                <Text style={textStyles.emptyList}>
-                  There is nothing to show
-                </Text>
-              </View>
-            );
+            return <EmptyListText texts={[`There is nothing to show`]} />;
           }}
           renderItem={({ item }) => (
             <PlayerListItem

diff --git a/screens/Statistics.tsx b/screens/Statistics.tsx
@@ -1,10 +1,4 @@
-import {
-  ScrollView,
-  Text,
-  TouchableOpacity,
-  View,
-  StyleSheet,
-} from "react-native";
+import { ScrollView, Text, TouchableOpacity, View } from "react-native";
 import React, { useEffect, useState } from "react";
 import { CalendarList } from "react-native-calendars/src";
 import { MarkedDates } from "react-native-calendars/src/types";
@@ -23,16 +17,19 @@ import {
   LongestStreakData,
   TotalDaysData,
 } from "@backend/StatisticsBackend";
-import StatsInfo from "@components/statistics/StatsInfo";
+import StatisticsInfo from "@components/statistics/StatisticsInfo";
 import moment from "moment";
 import {
-  buttonLightPink,
+  defaultBackgroundColor,
   GamesStatistics,
   grey,
   lightGrey,
   pink,
+  white,
 } from "../Consts";
 import mainStyles from "@styles/MainStyles";
+import textStyles from "@styles/TextStyles";
+import statisticsStyles from "@styles/StatisticsStyles";
 
 const games = {
   allGames: "All games",
@@ -223,43 +220,29 @@ export default () => {
 
   return (
     <View style={mainStyles.whiteBackgroundContainer}>
-      <View style={styles.mainContainer}>
-        <View style={styles.placeholder1} />
-        <View style={styles.points}>
-          <View style={styles.placeholder1} />
-          <View
-            style={{
-              width: "85%",
-              flex: 0.3,
-              justifyContent: "flex-start",
-            }}
-          >
-            <Text style={styles.textStyle}>
+      <View style={statisticsStyles.mainContainer}>
+        <View style={statisticsStyles.points}>
+          <View style={{ width: "85%", justifyContent: "flex-start" }}>
+            <Text style={textStyles.grey20Weight800}>
               <FontAwesome5 name={"gamepad"} color={grey} size={18} />
               <Text> Total points</Text>
             </Text>
           </View>
           <ScrollView
             horizontal={true}
             showsHorizontalScrollIndicator={false}
-            style={{ flex: 1.5, width: "90%" }}
+            style={{ width: "90%" }}
           >
             {Object.values(games).map((game, id) => {
               return (
                 <TouchableOpacity
-                  onPress={() => {
-                    setChosenGame(game);
-                  }}
+                  onPress={() => setChosenGame(game)}
                   key={id}
-                  style={styles.gameChoice}
+                  style={statisticsStyles.gameChoice}
                 >
-                  <Text style={{ color: grey, fontWeight: "bold" }}>
-                    {game}
-                  </Text>
+                  <Text style={textStyles.grey14Weight600}>{game}</Text>
                   <View>
-                    <Text
-                      style={{ color: buttonLightPink, fontWeight: "bold" }}
-                    >
+                    <Text style={textStyles.pink14Weight700}>
                       {gamePoints[gamesMapping[game]]?.total_points}
                     </Text>
                   </View>
@@ -268,12 +251,12 @@ export default () => {
             })}
           </ScrollView>
         </View>
-        <View style={styles.calendar}>
+        <View style={statisticsStyles.calendar}>
           <CalendarList
             disabledByDefault={true}
             disableAllTouchEventsForDisabledDays={true}
             theme={{
-              calendarBackground: "#fffcff",
+              calendarBackground: defaultBackgroundColor,
               textDisabledColor: "#2d4150",
             }}
             onVisibleMonthsChange={(months) => {
@@ -290,7 +273,12 @@ export default () => {
                 "MMMM YYYY"
               );
               return (
-                <Text style={[styles.textStyle, styles.customHeader]}>
+                <Text
+                  style={[
+                    textStyles.grey20Weight800,
+                    statisticsStyles.customHeader,
+                  ]}
+                >
                   {title}
                 </Text>
               );
@@ -300,69 +288,30 @@ export default () => {
             markedDates={markedDates}
           />
         </View>
-        <View style={styles.statsInfo}>
-          <StatsInfo
+        <View style={statisticsStyles.statsInfoContainer}>
+          <StatisticsInfo
             iconName={"check-square"}
             statsText={" Current streak"}
             statsNumber={currentStreak?.current_streak}
             backgroundColor={pink}
-            textColor={"white"}
+            textColor={white}
           />
-          <StatsInfo
+          <StatisticsInfo
             iconName={"calendar-check"}
             statsText={" Longest streak"}
             statsNumber={longestStreak?.longest_streak}
-            backgroundColor={"#fffcff"}
+            backgroundColor={defaultBackgroundColor}
             textColor={grey}
           />
-          <StatsInfo
+          <StatisticsInfo
             iconName={"calendar-week"}
             statsText={" Total days learned"}
             statsNumber={totalDays?.total_days}
-            backgroundColor={"#fffcff"}
+            backgroundColor={defaultBackgroundColor}
             textColor={grey}
           />
         </View>
-        <View style={styles.placeholder2} />
-        <View style={styles.placeholder2} />
       </View>
     </View>
   );
 };
-
-const styles = StyleSheet.create({
-  mainContainer: {
-    width: "90%",
-    height: "95%",
-  },
-  calendar: { flex: 1.8 },
-  statsInfo: {
-    flex: 0.5,
-    width: "100%",
-    alignItems: "center",
-  },
-  points: {
-    flex: 0.7,
-    alignItems: "center",
-    width: "100%",
-  },
-  placeholder1: { flex: 0.1 },
-  placeholder2: { flex: 0.2 },
-  textStyle: {
-    color: grey,
-    fontWeight: "bold",
-    fontSize: 20,
-  },
-  gameChoice: {
-    backgroundColor: lightGrey,
-    margin: 5,
-    height: 60,
-    width: 110,
-    borderRadius: 10,
-    alignItems: "center",
-    justifyContent: "center",
-  },
-  customHeader: {
-    flex: 1,
-  },
-});