From fa5d6ece344c5e97b4bce4325c555f6dfb9a5cdf Mon Sep 17 00:00:00 2001 From: Sanskar Date: Sun, 4 Aug 2024 11:02:57 +0545 Subject: [PATCH 1/3] Fixed quotes not loading issue. Added a function to correctly convert rows into quote and translation (Basically the fix was removing the quoteText and calling the function directly) --- nepalingo-web/src/components/randomQuotes.tsx | 65 +++++----- nepalingo-web/src/hooks/useQuotes.tsx | 117 ++++++++++-------- nepalingo-web/src/pages/Home.tsx | 102 +++++++-------- 3 files changed, 144 insertions(+), 140 deletions(-) diff --git a/nepalingo-web/src/components/randomQuotes.tsx b/nepalingo-web/src/components/randomQuotes.tsx index a855cd6..c34a1f0 100644 --- a/nepalingo-web/src/components/randomQuotes.tsx +++ b/nepalingo-web/src/components/randomQuotes.tsx @@ -3,49 +3,42 @@ import { useLanguage } from "../hooks/Langauge"; import useQuotes from "../hooks/useQuotes"; const RandomQuoteComponent: React.FC = () => { - const { selectedLanguage } = useLanguage(); - if (!selectedLanguage) { - return
Please select a language.
; - } + const { randomQuote } = useQuotes(); - const { randomQuote } = useQuotes({ - language: selectedLanguage, - }); + if (!randomQuote) { + return
Loading...
; + } - if (!randomQuote) { - return
Loading...
; - } + const { text, translation } = randomQuote; - const { text, translation } = randomQuote; - - return ( -
-

{text}

-

- {translation} -

-
- ); + return ( +
+

{text}

+

+ {translation} +

+
+ ); }; const styles = { - container: { - padding: "20px", - border: "1px solid #ccc", - borderRadius: "8px", - backgroundColor: "#f9f9f9", - textAlign: "center", - }, - quote: { - fontSize: "18px", - fontStyle: "normal", - marginBottom: "10px", - }, - translation: { - fontSize: "16px", - color: "#555", - }, + container: { + padding: "20px", + border: "1px solid #ccc", + borderRadius: "8px", + backgroundColor: "#f9f9f9", + textAlign: "center", + }, + quote: { + fontSize: "18px", + fontStyle: "normal", + marginBottom: "10px", + }, + translation: { + fontSize: "16px", + color: "#555", + }, }; export default RandomQuoteComponent; diff --git a/nepalingo-web/src/hooks/useQuotes.tsx b/nepalingo-web/src/hooks/useQuotes.tsx index 1573fa4..931ad8a 100644 --- a/nepalingo-web/src/hooks/useQuotes.tsx +++ b/nepalingo-web/src/hooks/useQuotes.tsx @@ -1,63 +1,55 @@ import { useState, useEffect } from "react"; +import { useLanguage } from "./Langauge"; interface Quote { - text: string; - translation: string; + text: string; + translation: string; } export interface QuotesResponse { - quotes: Quote[]; - randomQuote: Quote | null; + quotes: Quote[]; + randomQuote: Quote | null; } interface useQuotesProps { - language: string; + language: string; } -const useQuotes = ({ language }: useQuotesProps): QuotesResponse => { - const [quotes, setQuotes] = useState([]); - const [quotesText, setQuotesText] = useState(""); - const [randomQuote, setRandomQuote] = useState(null); +const useQuotes = (): QuotesResponse => { + const [quotes, setQuotes] = useState([]); + const [randomQuote, setRandomQuote] = useState(null); + const { selectedLanguage } = useLanguage() - useEffect(() => { - let sourceFile = ""; - switch (language) { - case "Newari": - sourceFile = "/quotes/newari.csv"; - break; - case "Tajpuria": - sourceFile = "/quotes/tajpuriya.csv"; - break; - case "Maithili": - sourceFile = "/quotes/maithili.csv"; - break; - default: - sourceFile = ""; - } - if (sourceFile) { - fetch(sourceFile) - .then((r) => r.text()) - .then((text) => { - setQuotesText(text); - }) - .catch((error) => { - console.error("Error fetching quotes:", error); + function parse(row: string) { + var insideQuote = false, + entries = [], + entry: Array = []; + 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; } - }, [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 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); @@ -65,13 +57,38 @@ const useQuotes = ({ language }: useQuotesProps): QuotesResponse => { setQuotes(quotesArray); setRandomQuote(randomQuote); - }; + }; + + useEffect(() => { + let sourceFile = ""; + switch (selectedLanguage) { + case "Newari": + sourceFile = "/quotes/newari.csv"; + break; + case "Tajpuria": + sourceFile = "/quotes/tajpuriya.csv"; + break; + case "Maithili": + sourceFile = "/quotes/maithili.csv"; + break; + default: + sourceFile = ""; + } + + if (sourceFile) { + fetch(sourceFile) + .then((r) => r.text()) + .then((text) => { + loadQuotes(text); + }) + .catch((error) => { + console.error("Error fetching quotes:", error); + }); + } + }, [selectedLanguage]); - loadQuotes(); - } - }, [quotesText]); - return { quotes, randomQuote }; + return { quotes, randomQuote }; }; export default useQuotes; diff --git a/nepalingo-web/src/pages/Home.tsx b/nepalingo-web/src/pages/Home.tsx index bfa6ea9..a4ce01a 100644 --- a/nepalingo-web/src/pages/Home.tsx +++ b/nepalingo-web/src/pages/Home.tsx @@ -10,63 +10,57 @@ import StreakDisplay from "@/components/header/StreakDisplay"; import RandomQuoteComponent from "@/components/randomQuotes"; const Home: React.FC = () => { - ReactGA.send({ - hitType: "pageview", - page: window.location.pathname, - title: "home", - }); - const navigate = useNavigate(); - const { user } = useAuth(); - const { selectedLanguage } = useLanguage(); + ReactGA.send({ + hitType: "pageview", + page: window.location.pathname, + title: "home", + }); + const navigate = useNavigate(); + const { user } = useAuth(); + const { selectedLanguage } = useLanguage(); - return ( - <> -
-
-
-
- - -
-
- { - navigate("/flashcard"); - }} - /> -
+ return ( + <> +
+
+
+
+ + +
+
+ { + navigate("/flashcard"); + }} + /> +
-
- { - navigate("/dictionary"); - }} - /> -
+
+ { + navigate("/dictionary"); + }} + /> +
-
- -
- -
- -
-
-
- - ); +
+
+ +
+
+
+
+ + ); }; export default Home; From 5075cfeaaa40f3f43b85a4af75f997c4a1f607c9 Mon Sep 17 00:00:00 2001 From: Sanskar Date: Sun, 4 Aug 2024 11:12:48 +0545 Subject: [PATCH 2/3] Lint issues --- nepalingo-web/src/components/randomQuotes.tsx | 1 - nepalingo-web/src/hooks/useQuotes.tsx | 8 ++------ 2 files changed, 2 insertions(+), 7 deletions(-) diff --git a/nepalingo-web/src/components/randomQuotes.tsx b/nepalingo-web/src/components/randomQuotes.tsx index 7aa62a1..536aca9 100644 --- a/nepalingo-web/src/components/randomQuotes.tsx +++ b/nepalingo-web/src/components/randomQuotes.tsx @@ -1,5 +1,4 @@ import React from "react"; -import { useLanguage } from "@/hooks/Langauge"; import useQuotes from "@/hooks/useQuotes"; const RandomQuoteComponent: React.FC = () => { diff --git a/nepalingo-web/src/hooks/useQuotes.tsx b/nepalingo-web/src/hooks/useQuotes.tsx index 931ad8a..9b1bea6 100644 --- a/nepalingo-web/src/hooks/useQuotes.tsx +++ b/nepalingo-web/src/hooks/useQuotes.tsx @@ -10,10 +10,6 @@ export interface QuotesResponse { randomQuote: Quote | null; } -interface useQuotesProps { - language: string; -} - const useQuotes = (): QuotesResponse => { const [quotes, setQuotes] = useState([]); const [randomQuote, setRandomQuote] = useState(null); @@ -22,9 +18,9 @@ const useQuotes = (): QuotesResponse => { function parse(row: string) { - var insideQuote = false, - entries = [], + let insideQuote = false, entry: Array = []; + const entries = []; row.split('').forEach(function(character) { if (character === '"') { insideQuote = !insideQuote; From 7dd2bc722a148e98c36f3908d15b2f3405b87ee3 Mon Sep 17 00:00:00 2001 From: Sanskar Date: Sun, 4 Aug 2024 11:14:01 +0545 Subject: [PATCH 3/3] Prettier --- nepalingo-web/src/components/randomQuotes.tsx | 59 ++++---- nepalingo-web/src/hooks/useQuotes.tsx | 141 +++++++++--------- nepalingo-web/src/pages/Home.tsx | 94 ++++++------ 3 files changed, 145 insertions(+), 149 deletions(-) diff --git a/nepalingo-web/src/components/randomQuotes.tsx b/nepalingo-web/src/components/randomQuotes.tsx index 536aca9..f77bd22 100644 --- a/nepalingo-web/src/components/randomQuotes.tsx +++ b/nepalingo-web/src/components/randomQuotes.tsx @@ -2,42 +2,41 @@ import React from "react"; import useQuotes from "@/hooks/useQuotes"; const RandomQuoteComponent: React.FC = () => { + const { randomQuote } = useQuotes(); - const { randomQuote } = useQuotes(); + if (!randomQuote) { + return
Loading...
; + } - if (!randomQuote) { - return
Loading...
; - } + const { text, translation } = randomQuote; - const { text, translation } = randomQuote; - - return ( -
-

{text}

-

- {translation} -

-
- ); + return ( +
+

{text}

+

+ {translation} +

+
+ ); }; const styles = { - container: { - padding: "20px", - border: "1px solid #ccc", - borderRadius: "8px", - backgroundColor: "#f9f9f9", - textAlign: "center", - }, - quote: { - fontSize: "18px", - fontStyle: "normal", - marginBottom: "10px", - }, - translation: { - fontSize: "16px", - color: "#555", - }, + container: { + padding: "20px", + border: "1px solid #ccc", + borderRadius: "8px", + backgroundColor: "#f9f9f9", + textAlign: "center", + }, + quote: { + fontSize: "18px", + fontStyle: "normal", + marginBottom: "10px", + }, + translation: { + fontSize: "16px", + color: "#555", + }, }; export default RandomQuoteComponent; diff --git a/nepalingo-web/src/hooks/useQuotes.tsx b/nepalingo-web/src/hooks/useQuotes.tsx index 9b1bea6..d5cae68 100644 --- a/nepalingo-web/src/hooks/useQuotes.tsx +++ b/nepalingo-web/src/hooks/useQuotes.tsx @@ -2,89 +2,86 @@ import { useState, useEffect } from "react"; import { useLanguage } from "./Langauge"; interface Quote { - text: string; - translation: string; + text: string; + translation: string; } export interface QuotesResponse { - quotes: Quote[]; - randomQuote: Quote | null; + quotes: Quote[]; + randomQuote: Quote | null; } const useQuotes = (): QuotesResponse => { - const [quotes, setQuotes] = useState([]); - const [randomQuote, setRandomQuote] = useState(null); - const { selectedLanguage } = useLanguage() + const [quotes, setQuotes] = useState([]); + const [randomQuote, setRandomQuote] = useState(null); + const { selectedLanguage } = useLanguage(); + function parse(row: string) { + let insideQuote = false, + entry: Array = []; + 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]; - function parse(row: string) { - let insideQuote = false, - entry: Array = []; - 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 (selectedLanguage) { - case "Newari": - sourceFile = "/quotes/newari.csv"; - break; - case "Tajpuria": - sourceFile = "/quotes/tajpuriya.csv"; - break; - case "Maithili": - sourceFile = "/quotes/maithili.csv"; - break; - default: - sourceFile = ""; - } + setQuotes(quotesArray); + setRandomQuote(randomQuote); + }; - if (sourceFile) { - fetch(sourceFile) - .then((r) => r.text()) - .then((text) => { - loadQuotes(text); - }) - .catch((error) => { - console.error("Error fetching quotes:", error); - }); - } - }, [selectedLanguage]); + useEffect(() => { + let sourceFile = ""; + switch (selectedLanguage) { + case "Newari": + sourceFile = "/quotes/newari.csv"; + break; + case "Tajpuria": + sourceFile = "/quotes/tajpuriya.csv"; + break; + case "Maithili": + sourceFile = "/quotes/maithili.csv"; + break; + default: + sourceFile = ""; + } + if (sourceFile) { + fetch(sourceFile) + .then((r) => r.text()) + .then((text) => { + loadQuotes(text); + }) + .catch((error) => { + console.error("Error fetching quotes:", error); + }); + } + }, [selectedLanguage]); - return { quotes, randomQuote }; + return { quotes, randomQuote }; }; export default useQuotes; diff --git a/nepalingo-web/src/pages/Home.tsx b/nepalingo-web/src/pages/Home.tsx index d64177a..c37465d 100644 --- a/nepalingo-web/src/pages/Home.tsx +++ b/nepalingo-web/src/pages/Home.tsx @@ -10,47 +10,47 @@ import StreakDisplay from "@/components/header/StreakDisplay"; import RandomQuoteComponent from "@/components/randomQuotes"; const Home: React.FC = () => { - ReactGA.send({ - hitType: "pageview", - page: window.location.pathname, - title: "home", - }); - const navigate = useNavigate(); - const { user } = useAuth(); - const { selectedLanguage } = useLanguage(); + ReactGA.send({ + hitType: "pageview", + page: window.location.pathname, + title: "home", + }); + const navigate = useNavigate(); + const { user } = useAuth(); + const { selectedLanguage } = useLanguage(); - return ( - <> -
-
-
-
- - -
-
- { - navigate("/flashcard"); - }} - /> -
+ return ( + <> +
+
+
+
+ + +
+
+ { + navigate("/flashcard"); + }} + /> +
-
- { - navigate("/dictionary"); - }} - /> -
+
+ { + navigate("/dictionary"); + }} + /> +
{ />
-
-
- -
-
-
+
+
+
- - ); +
+
+
+ + ); }; export default Home;