Merge branch 'main' of https://github.com/dreth/hbd

dreth · Jul 30, 2024 · 12e96a5 · 12e96a5
2 parents 8f0fb86 + 8989b02
commit 12e96a5
Show file tree

Hide file tree

Showing 3 changed files with 81 additions and 49 deletions.
diff --git a/frontend/app/dashboard/page.tsx b/frontend/app/dashboard/page.tsx
@@ -4,14 +4,7 @@ import Link from "next/link";
 import { useState, useEffect } from "react";
 import { Input } from "@/components/ui/input";
 import { Alert, AlertTitle, AlertDescription } from "@/components/ui/alert";
-import {
-  AlertCircle,
-  OctagonAlert,
-  Cake,
-  Gift,
-  BookOpen,
-  Coffee,
-} from "lucide-react";
+import { AlertCircle, OctagonAlert, Cake, Gift, BookOpen } from "lucide-react";
 import { GitHubLogoIcon } from "@radix-ui/react-icons";
 import {
   Select,
@@ -50,26 +43,56 @@ export default function Dashboard() {
   const { email, token, logout, setAuthInfo } = useAuth();
   const router = useRouter();
 
+  const [userData, setUserData] = useState({
+    email: "",
+    reminderTime: "",
+    timeZone: "",
+    telegramApiKey: "",
+    telegramUser: "",
+    newPassword: "",
+  });
+
   useEffect(() => {
     const storedEmail = localStorage.getItem("email");
     const storedToken = localStorage.getItem("token");
 
     if (!email && storedEmail && storedToken) {
       setAuthInfo(storedEmail, storedToken);
-      localStorage.setItem("email", storedEmail);
     } else if (!email || !token) {
       router.push("/");
     }
   }, [email, token, router, setAuthInfo]);
 
-  const [userData, setUserData] = useState({
-    email: email || "",
-    reminderTime: "",
-    timeZone: "",
-    telegramApiKey: "",
-    telegramUser: "",
-    newPassword: "",
-  });
+  useEffect(() => {
+    setUserData((prevData) => ({
+      ...prevData,
+      email: email || "",
+    }));
+  }, [email]);
+
+  useEffect(() => {
+    const fetchUserData = async () => {
+      try {
+        const response = await getUserData(token);
+        setUserData((prevData) => ({
+          ...prevData,
+          reminderTime: response.reminder_time,
+          timeZone: response.timezone,
+          telegramApiKey: response.telegram_bot_api_key,
+          telegramUser: response.telegram_user_id,
+        }));
+        setTimeZone(response.timezone);
+        if (response.birthdays) {
+          setBirthdays(response.birthdays);
+        }
+      } catch (error) {
+        console.error("Error fetching user data", error);
+      }
+    };
+    if (token) {
+      fetchUserData();
+    }
+  }, [token]);
 
   const [name, setName] = useState("");
   const [date, setDate] = useState("");
@@ -89,6 +112,7 @@ export default function Dashboard() {
   const [isTimezoneDisabled, setIsTimezoneDisabled] = useState(true);
   const [isReminderTimeDisabled, setIsReminderTimeDisabled] = useState(true);
   const [timeZone, setTimeZone] = useState(userData.timeZone);
+  const [searchTerm, setSearchTerm] = useState("");
   const [editIndex, setEditIndex] = useState<number | null>(null);
   const [deleteIndex, setDeleteIndex] = useState<number | null>(null);
   const [confirmDeleteUser, setConfirmDeleteUser] = useState<boolean>(false);
@@ -280,8 +304,9 @@ export default function Dashboard() {
     setDate(e.target.value);
   };
 
-  const timeZones = Intl.supportedValuesOf("timeZone");
-
+  const filteredTimeZones = Intl.supportedValuesOf("timeZone").filter((zone) =>
+    zone.toLowerCase().includes(searchTerm.toLowerCase())
+  );
   const handleTimezoneCheckboxChange = () => {
     setIsTimezoneDisabled(!isTimezoneDisabled);
   };
@@ -382,15 +407,25 @@ export default function Dashboard() {
                 <div className="flex flex-col lg:flex-row justify_between items-center gap-3">
                   <strong className="lg:whitespace-nowrap">Time Zone:</strong>
                   <Select
-                    value={timeZone}
                     onValueChange={setTimeZone}
                     disabled={isTimezoneDisabled}
                   >
                     <SelectTrigger className="bg-primary-foreground dark:bg-background">
-                      <SelectValue placeholder={timeZone} />
+                      <SelectValue
+                        placeholder={timeZone || "Select a time zone"}
+                      />
                     </SelectTrigger>
                     <SelectContent>
-                      {timeZones.map((zone) => (
+                      <div className="p-2">
+                        <input
+                          type="text"
+                          value={searchTerm}
+                          onChange={(e) => setSearchTerm(e.target.value)}
+                          placeholder="Search time zones"
+                          className="w-full p-2 border rounded"
+                        />
+                      </div>
+                      {filteredTimeZones.map((zone) => (
                         <SelectItem key={zone} value={zone}>
                           {zone}
                         </SelectItem>

diff --git a/frontend/app/page.tsx b/frontend/app/page.tsx
@@ -42,10 +42,10 @@ export default function Home() {
   const [loginSuccess, setLoginSuccess] = useState<boolean | null>(null);
   const [reminderTime, setReminderTime] = useState("");
   const [timeZone, setTimeZone] = useState("");
+  const [searchTerm, setSearchTerm] = useState("");
   const [telegramApiKey, setTelegramApiKey] = useState("");
   const [telegramUser, setTelegramUser] = useState("");
   const [copySuccess, setCopySuccess] = useState("");
-  const [isTimezoneDisabled, setIsTimezoneDisabled] = useState(true);
   const [registerSuccess, setRegisterSuccess] = useState<boolean | null>(null);
   const [registerError, setRegisterError] = useState<string | null>(null);
 
@@ -87,7 +87,7 @@ export default function Home() {
     if (isValid) {
       try {
         const response = await loginUser({ email, password });
-        setAuthInfo(email, password);
+        setAuthInfo(email, response.token);
         setLoginSuccess(true);
         router.push("/dashboard");
       } catch (error) {
@@ -115,6 +115,7 @@ export default function Home() {
       console.error("Error generating password", error);
     }
   };
+
   const handleCopyClick = () => {
     navigator.clipboard.writeText(password).then(
       () => {
@@ -146,8 +147,8 @@ export default function Home() {
       const response = await registerUser(userData);
       if (response.token) {
         localStorage.setItem("token", response.token);
+        localStorage.setItem("email", email);
 
-        const loginResponse = await loginUser({ email, password });
         setAuthInfo(email, response.token);
 
         setRegisterSuccess(true);
@@ -171,7 +172,9 @@ export default function Home() {
     }
   };
 
-  const timeZones = Intl.supportedValuesOf("timeZone");
+  const filteredTimeZones = Intl.supportedValuesOf("timeZone").filter((zone) =>
+    zone.toLowerCase().includes(searchTerm.toLowerCase())
+  );
 
   return (
     <main className="flex min-h-screen flex-col items-center p-5 lg:p-10">
@@ -347,18 +350,29 @@ export default function Home() {
                     </label>
                     <Select onValueChange={setTimeZone}>
                       <SelectTrigger className="bg-primary-foreground dark:bg-background">
-                        <SelectValue placeholder={timeZone} />
+                        <SelectValue
+                          placeholder={timeZone || "Select a time zone"}
+                        />
                       </SelectTrigger>
                       <SelectContent>
-                        {timeZones.map((zone) => (
+                        <div className="p-2">
+                          <input
+                            type="text"
+                            value={searchTerm}
+                            onChange={(e) => setSearchTerm(e.target.value)}
+                            placeholder="Search time zones"
+                            className="w-full p-2 border rounded"
+                          />
+                        </div>
+                        {filteredTimeZones.map((zone) => (
                           <SelectItem key={zone} value={zone}>
                             {zone}
                           </SelectItem>
                         ))}
                       </SelectContent>
                     </Select>
                   </div>
-                </div>
+                </div>{" "}
                 <div>
                   <label
                     htmlFor="telegram-api-key"
@@ -545,25 +559,6 @@ export default function Home() {
           </TooltipProvider>
         </div>
         <br />
-        <hr className="border-primary" />
-        <div className="flex justify-evenly mt-4">
-          <Link
-            href="https://dac.ac/"
-            target="_blank"
-            rel="noopener noreferrer"
-            className="hover:text-primary"
-          >
-            Daniel
-          </Link>
-          <Link
-            href="https://fbatista.com/"
-            target="_blank"
-            rel="noopener noreferrer"
-            className="hover:text-primary"
-          >
-            Fernando
-          </Link>
-        </div>
       </div>
     </main>
   );

diff --git a/frontend/lib/api/apiService.js b/frontend/lib/api/apiService.js
@@ -4,7 +4,8 @@ const prefix = "/api";
 
 // Create an Axios instance
 const api = axios.create({
-  // baseURL: "http://localhost:3000", - UNCOMMENT THIS LINE FOR LOCAL TESTING
+  // UNCOMMENT THE LINE BELOW FOR LOCAL TESTING
+  // baseURL: "http://localhost:8418",
   headers: {
     "Content-Type": "application/json",
   },
@@ -46,6 +47,7 @@ export const loginUser = async (userData) => {
     const response = await api.post(prefix + "/login", userData);
     const { token, ...rest } = response.data;
     localStorage.setItem("token", token);
+    localStorage.setItem("email", userData.email);
     return { token, ...rest };
   } catch (error) {
     console.error("Error logging in", error);