ui changes for topic and fetching integrate

OpenPecha · Feb 22, 2025 · 3fbd0b2 · 3fbd0b2
1 parent 488e925
commit 3fbd0b2
Show file tree

Hide file tree

Showing 4 changed files with 90 additions and 46 deletions.
diff --git a/src/components/navbar/NavigationBar.scss b/src/components/navbar/NavigationBar.scss
@@ -1,7 +1,7 @@
 // Variables for colors and other reusable properties
 $primary-color: #333;
 $secondary-color: #555;
-$hover-color: #f39c12;
+$hover-color: #6e6e6e;
 $background-color: #f8f9fa;
 $dark-color: #000;
 $light-color: #fff;

diff --git a/src/components/topics/Topics.jsx b/src/components/topics/Topics.jsx
@@ -1,17 +1,22 @@
-import {LANGUAGE} from "../../utils/Constants.js";
+import {LANGUAGE, mapLanguageCode} from "../../utils/Constants.js";
 import axiosInstance from "../../config/axios-config.js";
 import {useQuery} from "react-query";
-import { useState } from "react";
+import { useState, useEffect } from "react";
 import {useNavigate, useParams} from "react-router-dom";
 import {Button, Card, Col, Container, Form, Row} from "react-bootstrap";
 import "./Topics.scss"
 import {useTranslate} from "@tolgee/react";
 
 const fetchTopics = async (parentId) => {
-  console.log(parentId)
-  const language = localStorage.getItem(LANGUAGE) ??  "bo";
+  const storedLanguage = localStorage.getItem(LANGUAGE);
+  const language =(storedLanguage ? mapLanguageCode(storedLanguage) : "bo");
   const { data } = await axiosInstance.get("api/v1/topics", {
-    params: {language, ...(parentId && { parent_id: parentId })}
+    params: {
+      language,
+      ...(parentId && { parent_id: parentId }),
+      limit: 12,
+      skip: 0
+    }
   });
   return data;
 }
@@ -23,20 +28,52 @@ const Topics = () => {
   const [parentId, setParentId] = useState(id || "");
   const [searchTerm, setSearchTerm] = useState("");
   const [selectedLetter, setSelectedLetter] = useState("");
+  const [currentLanguage, setCurrentLanguage] = useState(localStorage.getItem(LANGUAGE));
   const translatedKey = t("topic.alphabet");
   const cleanAlphabetArray = translatedKey
     .split("")
     .filter((char) => char.match(/[a-zA-Z.\u0F00-\u0FFF]/));
 
-  const { data: topicsData, isLoading: topicsIsLoading } = useQuery(
-    ["topics", parentId],
+  const { data: topicsData, isLoading, isFetching } = useQuery(
+    ["topics", parentId, currentLanguage],
     () => fetchTopics(parentId),
-    { refetchOnWindowFocus: false }
+    { refetchOnWindowFocus: false,refetchOnMount: true }
   );
-  if(topicsIsLoading){
-    return <p>Loading ...</p>
+
+  useEffect(() => {
+    const handleStorageChange = (e) => {
+      if (e.key === LANGUAGE) {
+        setCurrentLanguage(e.newValue);
+      }
+    };
+
+    window.addEventListener('storage', handleStorageChange);
+
+    const intervalId = setInterval(() => {
+      const storedLanguage = localStorage.getItem(LANGUAGE);
+      if (storedLanguage !== currentLanguage) {
+        setCurrentLanguage(storedLanguage);
+      }
+    }, 1000);
+
+    return () => {
+      window.removeEventListener('storage', handleStorageChange);
+      clearInterval(intervalId);
+    };
+  }, [currentLanguage]);
+
+  if(isLoading || isFetching){
+    return (
+      <Container fluid className="topics-container">
+        <Row className="topics-wrapper">
+          <Col xs={12} className="text-center py-5">
+            <p>Loading topics...</p>
+          </Col>
+        </Row>
+      </Container>
+    );
   }
-  const topicsList = topicsData || { topics: [], total: 0, skip: 0, limit: 10 };
+  const topicsList = topicsData || { topics: [], total: 0, skip: 0, limit: 12 };
 
   function handleTopicClick(topic) {
     setParentId(topic.title)
@@ -69,7 +106,7 @@ const Topics = () => {
           filteredTopics.map((topic, index) => (
             <Col key={index}>
               <Card className="topic-card">
-                <button className="topic-button" onClick={() => handleTopicClick(topic)}>
+                <button className="topic-button listtitle" onClick={() => handleTopicClick(topic)}>
                   {topic.title}
                 </button>
               </Card>
@@ -97,35 +134,35 @@ const Topics = () => {
 
   const renderTopicTitle = () => {
     return <h4 className="topics-title listtitle">
-        {parentId && id ? t(`topic.${parentId}`) : t("topic.search_topics")}
-      </h4>
+      {parentId && id ? t(`topic.${parentId}`) : t("topic.search_topics")}
+    </h4>
   }
   const renderSearchBar = () => {
     return <div className="search-container">
-        <Form.Control
-          type="text"
-          placeholder="Search topics..."
-          value={searchTerm}
-          onChange={handleSearchChange}
-          className="mb-3"
-        />
-
-        <div className="alphabet-filter">
-          {cleanAlphabetArray.map((letter,index) => (
-            <Button
-              key={index}
-              variant={selectedLetter === letter ? "primary" : "outline-secondary"}
-              className="alphabet-button listsubtitle"
-              onClick={() => handleLetterClick(letter)}
-            >
-              {letter}
-            </Button>
-          ))}
-          <Button variant="outline-dark" className="clear-letter-click" onClick={() => setSelectedLetter("")}>
-            clear
+      <Form.Control
+        type="text"
+        placeholder="Search topics..."
+        value={searchTerm}
+        onChange={handleSearchChange}
+        className="mb-3"
+      />
+
+      <div className="alphabet-filter">
+        {cleanAlphabetArray.map((letter,index) => (
+          <Button
+            key={index}
+            variant={selectedLetter === letter ? "secondary" : "outline-secondary"}
+            className="alphabet-button listsubtitle"
+            onClick={() => handleLetterClick(letter)}
+          >
+            {letter}
           </Button>
-        </div>
+        ))}
+        <Button variant="outline-dark" className="clear-letter-click" onClick={() => setSelectedLetter("")}>
+          clear
+        </Button>
       </div>
+    </div>
   }
 
   return (

diff --git a/src/components/topics/Topics.scss b/src/components/topics/Topics.scss
@@ -1,6 +1,13 @@
+$hover-color: #6e6e6e;
+$border-color: #bdbdbd;
+$background-color:rgb(251, 251, 250);
+$card-border:#ddd;
+$card-shadow:rgba(0, 0, 0, 0.1);
+
 .topics-container {
   padding: 20px;
   margin-top: 4rem;
+  margin-bottom: 4rem;
 
 }
 
@@ -28,6 +35,8 @@
 
     .topic-card {
       border: none;
+      border-radius: 0%;
+      border-top: $border-color 1px solid;
       padding: 10px;
       transition: transform 0.2s ease-in-out;
       height: 100%;
@@ -38,8 +47,6 @@
         background: none;
         border: none;
         color: #333;
-        font-size: 16px;
-        font-weight: normal;
         text-decoration: none;
         padding: 5px;
         cursor: pointer;
@@ -49,7 +56,7 @@
         align-items: center;
 
         &:hover {
-          color: #1abc9c;
+          color: $hover-color;
           text-decoration: none;
         }
 
@@ -93,10 +100,10 @@
 
     .topic-info-card {
       width: 100%;
-      background-color: rgb(251, 251, 250);
+      background-color: $background-color;
       padding: 20px;
-      border: 1px solid #ddd;
-      box-shadow: 2px 2px 10px rgba(0, 0, 0, 0.1);
+      border: 1px solid $card-border;
+      box-shadow: 2px 2px 10px $card-shadow;
       border-radius: 10px;
     }
   }
@@ -149,9 +156,6 @@
         padding: 0.5rem;
       }
 
-      .topic-card button {
-        font-size: 14px;
-      }
     }
 
     .search-container {

diff --git a/src/utils/Constants.js b/src/utils/Constants.js
@@ -4,3 +4,6 @@ export const ACCESS_TOKEN = "accessToken";
 export const RESET_PASSWORD_TOKEN = "resetPasswordToken";
 export const RESET_PASSWORD = "reset-password";
 export const LANGUAGE = "language";
+export const mapLanguageCode = (languageCode) => {
+  return languageCode === "bo-IN" ? "bo" : languageCode;
+};