Working badge images

backend/src/controllers/user/putUser.ts

@@ -5,6 +5,7 @@ const userService: UserService = new UserServiceImpl();
 
 //Will get the user by the given ID
 export const putUser = async (req: express.Request, res: express.Response) => {
+  console.log("Putting user!");
   try {
     const userId = req.session.userId;
     if (!userId) {
@@ -27,8 +28,6 @@ export const putUser = async (req: express.Request, res: express.Response) => {
       'lastName',
     ];
 
-    //TODO: Will not change with schema
-    //Check if each field is already present in the schema
     for (const key in req.body) {
       if (!userFields.includes(key)) {
         res

backend/src/models/users.ts

@@ -8,7 +8,7 @@ const UserSchema = new mongoose.Schema({
   lastName: { type: String },
   badges: {
     type: [String],
-    enum: ['Deep Diver', 'First Catcher', 'Ocean Explorer'],
+    enum: ['Deep Diver', 'First Catch', 'Ocean Explorer', '100 Dives Logged', 'Reef Guardian', 'Rare Fish Find'],
   }, // badge is an array of enum
   diveLogs: [{ type: mongoose.Schema.Types.ObjectId, ref: 'DiveLog' }],
   speciesCollected: [{ type: mongoose.Schema.Types.ObjectId, ref: 'Species' }],

frontend/app/(app)/user/components/badges.tsx

@@ -1,7 +1,12 @@
 import { View, Text, FlatList } from 'react-native';
-import Badge from '../../../../assets/badge.svg';
 import { useUserById } from '../../../../hooks/user';
 import BadgeSkeleton from './skeleton/badge-skeleton';
+import DefaultBage from '../../../../assets/BadgeIcons/badge.svg';
+import FishCaught100 from '../../../../assets/BadgeIcons/100-fishes-badge.svg';
+import OceanExplorer from '../../../../assets/BadgeIcons/ocean-explorer-badge.svg';
+import RareFishCaught from '../../../../assets/BadgeIcons/rare-fishes-badge.svg';
+import FirstCatch from '../../../../assets/BadgeIcons/first-catch-badge.svg'
+import ReefGuardian from '../../../../assets/BadgeIcons/reef-gaurdian-badge.svg'
 
 const Badges = ({ id }: { id: string }) => {
   const { data, isError, isLoading } = useUserById(id);
@@ -27,13 +32,37 @@ const Badges = ({ id }: { id: string }) => {
 
   const renderItem = ({ item }: { item: any }) => (
     <View className="flex-col items-center ml-5">
-      <Badge width={60} height={60} />
+      <RenderBagdeImage name={item} width={60} height={60} />
       <Text className="text-center text-xs sm:text-sm md:text-base line-break pt-[2%] font-bold">
         {item}
       </Text>
     </View>
   );
 
+  type RenderBadge = {
+    name: string,
+    width: number,
+    height: number
+  }
+
+  const RenderBagdeImage = ({ name, width, height }: RenderBadge) => {
+    switch (name) {
+      case "100 Dives Logged":
+        return (<FishCaught100 width={width} height={height} />)
+      case "Rare Fish Find":
+        return (<RareFishCaught width={width} height={height} />)
+      case "Ocean Explorer":
+        return (<OceanExplorer width={width} height={height} />)
+      case "Reef Guardian":
+        return (<ReefGuardian width={width} height={height} />)
+      case "First Catch":
+        return (<FirstCatch width={width} height={height} />)
+      default:
+        return (<DefaultBage width={width} height={height} />)
+    }
+
+  }
+
   return (
     <View>
       <Text className="font-bold text-base sm:text-lg md:text-xl pb-[2%] text-darkblue">
@@ -48,7 +77,7 @@ const Badges = ({ id }: { id: string }) => {
                 key={key}
                 style={{ flex: 1 }}
               >
-                <Badge width={60} height={60} />
+                <RenderBagdeImage name={badge} width={60} height={60} />
                 <Text className="text-center text-xs sm:text-sm md:text-base line-break font-bold">
                   {badge}
                 </Text>

frontend/app/(app)/user/components/user-profile.tsx

@@ -5,10 +5,10 @@ import { FlatList, View } from 'react-native';
 import { SafeAreaView } from 'react-native-safe-area-context';
 import { useAuthStore } from '../../../../auth/authStore';
 import Arrow from '../../../../components/arrow';
+import InfoPopup from '../../../../components/info-popup';
 import Badges from '.././components/badges';
 import Header from '.././components/header';
 import Menu from '.././components/menu';
-import InfoPopup from '../../../../components/info-popup';
 
 const User = ({ id }: { id: string }) => {
   const { mongoDBId } = useAuthStore();
@@ -27,8 +27,7 @@ const User = ({ id }: { id: string }) => {
   return (
     <LinearGradient
       colors={['#549ac7', '#ffffff', '#ffffff', '#ffffff']}
-      style={{ flex: 1 }}
-    >
+      style={{ flex: 1 }}>
       <Stack.Screen
         options={{
           headerTitle: '',
@@ -38,12 +37,10 @@ const User = ({ id }: { id: string }) => {
             !isViewingOwnProfile ? (
               <Arrow direction="left" onPress={() => router.back()} />
             ) : null,
-        }}
-      />
+        }}/>
       <SafeAreaView
         edges={['top', 'left', 'right']}
-        className="flex flex-1 mt-[10%]"
-      >
+        className="flex flex-1 mt-[10%]">
         <FlatList
           data={data}
           renderItem={renderItem}