Merge branch 'auth' of github.com:Assios/chessguessr into auth

Assios · Sep 8, 2023 · 9ff8efd · 9ff8efd
2 parents ac4b2a5 + b375711
commit 9ff8efd
Show file tree

Hide file tree

Showing 3 changed files with 44 additions and 3 deletions.
diff --git a/app/components/AuthProvider/AuthProvider.tsx b/app/components/AuthProvider/AuthProvider.tsx
@@ -33,7 +33,7 @@ export interface AppUser {
   emailHash: string;
   lastUpdatedUsername: any;
   importedLocalStorageDate: string | null;
-  achievements: Achievement[];
+  achievements: string[];
 }
 
 interface AuthContextType {

diff --git a/app/hooks/useChessguessr.ts b/app/hooks/useChessguessr.ts
@@ -300,7 +300,7 @@ const useChessguessr = (
           addActivityToFeed(
             user.uid,
             "firstSolver",
-            "First to solve a daily Chessguessr"
+            "Achievement: First to solve a daily Chessguessr"
           );
         } else {
           console.log("USER", user);

diff --git a/app/routes/profile/index.tsx b/app/routes/profile/index.tsx
@@ -13,7 +13,7 @@ import {
   importStatsFromLocalStorage,
   getUserActivities,
 } from "../../firebase/utils";
-
+import { achievements, Achievement } from "~/models/achievements";
 import { EnvelopeIcon } from "@heroicons/react/20/solid";
 import { AiFillStar } from "react-icons/ai";
 import { FaTrophy } from "react-icons/fa";
@@ -39,6 +39,7 @@ export default function Profile() {
   const [canUpdateUsername, setCanUpdateUsername] = useState(true);
   const [timeLeftToUpdate, setTimeLeftToUpdate] = useState("");
   const [localStats, setLocalStats] = useLocalStorage("cg-stats", null);
+  const [userAchievements, setUserAchievements] = useState<Achievement[]>([]);
 
   const [importedDate, setImportedDate] = useState<string | null>(null);
 
@@ -52,6 +53,17 @@ export default function Profile() {
     }
   }, [user]);
 
+  useEffect(() => {
+    if (user && user.achievements) {
+      const userAchievementsData = achievements.filter((ach) =>
+        user.achievements.includes(ach.id)
+      );
+      setUserAchievements(userAchievementsData);
+    }
+  }, [user]);
+
+  console.log("u", userAchievements);
+
   const activityIcon = (type: string) => {
     switch (type) {
       case "signup":
@@ -281,6 +293,35 @@ export default function Profile() {
               </div>
             </div>
 
+            <div className="mt-6 shadow overflow-hidden rounded-lg max-w-2xl mx-auto mb-8">
+              <div className="px-4 py-5 sm:px-6">
+                <h2 className="text-lg leading-6 font-medium">Achievements</h2>
+              </div>
+              <div className="px-4 py-5 sm:px-6">
+                <ul role="list">
+                  {userAchievements.length > 0 ? (
+                    userAchievements.map((achievement, index) => (
+                      <li key={index}>
+                        <div className="flex justify-between">
+                          <span>{achievement.title}</span>
+                          {achievement.iconUrl && (
+                            <img
+                              src={achievement.iconUrl}
+                              alt={achievement.title}
+                              width={24}
+                              height={24}
+                            />
+                          )}
+                        </div>
+                      </li>
+                    ))
+                  ) : (
+                    <li>No achievements earned yet.</li>
+                  )}
+                </ul>
+              </div>
+            </div>
+
             {message && (
               <div className="p-6 rounded-lg shadow-sm text-center font-semibold text-red-500 mb-4">
                 {message}