Merge branch 'main' into sl-home-ui-fix

nepalingo-web/.env

@@ -2,3 +2,4 @@ VITE_NEPALBHASA_API_URL=https://subhash.net.np
 VITE_GOOGLE_ANALYTICS_TRACKING_ID = "G-DR5RGQ8NZ1"
 VITE_SUPABASE_URL=https://iupkdpieqxplryytuerr.supabase.co
 VITE_SUPABASE_KEY=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJzdXBhYmFzZSIsInJlZiI6Iml1cGtkcGllcXhwbHJ5eXR1ZXJyIiwicm9sZSI6ImFub24iLCJpYXQiOjE3MTk1NDY4MTEsImV4cCI6MjAzNTEyMjgxMX0.FcvSaML1Z0KLzXWAfXI-xL4b9aGc179uI8Bo2Q_glPI
+VITE_GOOGLE_TRANSLATE_API_KEY=AIzaSyCi239eredIAEEJkI8xzvGwW1GPS7B1vxQ

nepalingo-web/src/components/ActivityCard.tsx

@@ -1,5 +1,5 @@
 import React from "react";
-import Button from "./Button";
+import Button from "@/components/Button";
 
 interface ActivityCardProps {
   backgroundImageUrl: string;

nepalingo-web/src/components/header/About.tsx

@@ -1,5 +1,5 @@
 import React from "react";
-import Header from "./Header";
+import Header from "@/components/header/Header";
 
 const teamMembers = [
   {

nepalingo-web/src/components/header/ChangeLanguage.tsx

@@ -1,8 +1,8 @@
 import React, { useEffect, useRef, useState } from "react";
-import Menu from "./Menu";
+import Menu from "@/components/header/Menu";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import { faChevronDown } from "@fortawesome/free-solid-svg-icons";
-import { LanguageKey, Languages, useLanguage } from "../../hooks/Langauge";
+import { LanguageKey, Languages, useLanguage } from "@/hooks/Langauge";
 
 const ChangeLanguage: React.FC = () => {
   const [isOpen, setIsOpen] = useState(false);

nepalingo-web/src/components/header/Menu.tsx

@@ -1,5 +1,5 @@
 import React from "react";
-import { LanguageKey } from "../../hooks/Langauge";
+import { LanguageKey } from "@/hooks/Langauge";
 
 interface MenuProps {
   isOpen: boolean;

nepalingo-web/src/components/randomQuotes.tsx

@@ -1,17 +1,8 @@
 import React from "react";
-import { useLanguage } from "@/hooks/Langauge";
 import useQuotes from "@/hooks/useQuotes";
 
 const RandomQuoteComponent: React.FC = () => {
-  const { selectedLanguage } = useLanguage();
-
-  if (!selectedLanguage) {
-    return <div>Please select a language.</div>;
-  }
-
-  const { randomQuote } = useQuotes({
-    language: selectedLanguage,
-  });
+  const { randomQuote } = useQuotes();
 
   if (!randomQuote) {
     return <div>Loading...</div>;

nepalingo-web/src/hooks/useQuotes.tsx

@@ -1,4 +1,5 @@
 import { useState, useEffect } from "react";
+import { useLanguage } from "./Langauge";
 
 interface Quote {
   text: string;
@@ -9,19 +10,52 @@ export interface QuotesResponse {
   randomQuote: Quote | null;
 }
 
-interface useQuotesProps {
-  language: string;
-}
-
-const useQuotes = ({ language }: useQuotesProps): QuotesResponse => {
+const useQuotes = (): QuotesResponse => {
   const [quotes, setQuotes] = useState<Quote[]>([]);
-  const [quotesText, setQuotesText] = useState("");
   const [randomQuote, setRandomQuote] = useState<Quote | null>(null);
+  const { selectedLanguage } = useLanguage();
+
+  function parse(row: string) {
+    let insideQuote = false,
+      entry: Array<string> = [];
+    const entries = [];
+    row.split("").forEach(function (character) {
+      if (character === '"') {
+        insideQuote = !insideQuote;
+      } else {
+        if (character == "," && !insideQuote) {
+          entries.push(entry.join(""));
+          entry = [];
+        } else {
+          entry.push(character);
+        }
+      }
+    });
+    entries.push(entry.join(""));
+    return entries;
+  }
+  const loadQuotes = (quotesText: string) => {
+    const quotesArray = quotesText.split(/\r\n|\n/).map((line: string) => {
+      console.log(line);
+      const [quote, englishTranslation] = parse(line);
+      return {
+        text: quote ? quote.trim().replace(/(^"|"$)/g, "") : "",
+        translation: englishTranslation
+          ? englishTranslation.trim().replace(/(^"|"$)/g, "")
+          : "",
+      };
+    });
+
+    const randomIndex = Math.floor(Math.random() * quotesArray.length);
+    const randomQuote = quotesArray[randomIndex];
+
+    setQuotes(quotesArray);
+    setRandomQuote(randomQuote);
+  };
 
   useEffect(() => {
     let sourceFile = "";
-
-    switch (language) {
+    switch (selectedLanguage) {
       case "Newari":
         sourceFile = "/quotes/newari.csv";
         break;
@@ -39,37 +73,13 @@ const useQuotes = ({ language }: useQuotesProps): QuotesResponse => {
       fetch(sourceFile)
         .then((r) => r.text())
         .then((text) => {
-          setQuotesText(text);
+          loadQuotes(text);
         })
         .catch((error) => {
           console.error("Error fetching quotes:", error);
         });
     }
-  }, [language]);
-
-  useEffect(() => {
-    if (quotesText) {
-      const loadQuotes = () => {
-        const quotesArray = quotesText.split("\n").map((line: string) => {
-          const [quote, englishTranslation] = line.split(",");
-          return {
-            text: quote ? quote.trim().replace(/(^"|"$)/g, "") : "",
-            translation: englishTranslation
-              ? englishTranslation.trim().replace(/(^"|"$)/g, "")
-              : "",
-          };
-        });
-
-        const randomIndex = Math.floor(Math.random() * quotesArray.length);
-        const randomQuote = quotesArray[randomIndex];
-
-        setQuotes(quotesArray);
-        setRandomQuote(randomQuote);
-      };
-
-      loadQuotes();
-    }
-  }, [quotesText]);
+  }, [selectedLanguage]);
 
   return { quotes, randomQuote };
 };

nepalingo-web/src/main.tsx

@@ -1,7 +1,7 @@
 import React from "react";
 import ReactDOM from "react-dom/client";
 import App from "@/App";
-import "./index.css";
+import "@/index.css";
 import { AuthProvider } from "@/hooks/Auth";
 import { StreakProvider } from "@/hooks/StreakContext";
 import { LanguageProvider } from "@/hooks/Langauge";

nepalingo-web/src/pages/Home.tsx

@@ -65,6 +65,7 @@ const Home: React.FC = () => {
             />
           </div>
 
+
           <div className="mb-5">
             <ActivityCard
               backgroundImageUrl="/CardOverlayBlur.png"
@@ -76,6 +77,12 @@ const Home: React.FC = () => {
               </div>
             </ActivityCard>
           </div>
+
+          <div className="mb-5 pt-5">
+            <div className="flex justify-center">
+              <RandomQuoteComponent />
+            </div>
+          </div>
         </div>
       </div>
     </>

nepalingo-web/src/pages/Login.tsx

@@ -11,7 +11,7 @@ import {
   faEye,
   faEyeSlash,
 } from "@fortawesome/free-solid-svg-icons";
-import TheBird from "../assets/TheBird.png";
+import TheBird from "@/assets/TheBird.png";
 import ReactGA from "react-ga4";
 
 const Login: React.FC = () => {

nepalingo-web/src/pages/ResetPassword.tsx

@@ -1,5 +1,5 @@
 import React, { useState } from "react";
-import { useAuth } from "../hooks/Auth";
+import { useAuth } from "@/hooks/Auth";
 import { useNavigate } from "react-router-dom";
 import CustomTextInput from "@/components/CustomTextInput";
 import Button from "@/components/Button";