dynamic categories

mrswastik-robot · Apr 15, 2024 · bf72eec · bf72eec
1 parent ff96c3e
commit bf72eec
Show file tree

Hide file tree

Showing 2 changed files with 62 additions and 13 deletions.
diff --git a/app/homepage2/components/sidebar.tsx b/app/homepage2/components/sidebar.tsx
@@ -7,6 +7,7 @@ import { current } from "@reduxjs/toolkit"
 import { useEffect, useState } from "react"
 import { db } from "@/utils/firebase"
 import { collection, getDocs } from "firebase/firestore"
+import Loader from "@/components/ui/Loader"
 
 interface SidebarProps extends React.HTMLAttributes<HTMLDivElement> {
   playlists: Playlist[],
@@ -35,8 +36,11 @@ export function Sidebar({ className, playlists, selectChange, currentC }: Sideba
         return [];
       }
   }
-  const category = getCat();
-  setSidebarCategory(category);
+  const category = getCat().then(categories => {
+    setSidebarCategory(categories);
+  }).catch(error => {
+    console.error('Error:', error);
+  });
   }, [])
 
   //console.log("LS: ", selectChange);
@@ -47,6 +51,7 @@ export function Sidebar({ className, playlists, selectChange, currentC }: Sideba
           <h2 className="mb-2 px-4 text-lg font-semibold tracking-tight">
             Discover
           </h2>
+          <ScrollArea className="h-[350px] px-1">
           <div className="space-y-1">
             <Button onClick={()=>{selectChange("all")}} variant={`${currentC=="all"?"secondary":"ghost"}`} className="w-full justify-start">
               {/* <svg
@@ -64,22 +69,36 @@ export function Sidebar({ className, playlists, selectChange, currentC }: Sideba
               </svg> */}
               All
             </Button>
-            <Button onClick={()=>{selectChange("How To")}} variant={`${currentC=="How To"?"secondary":"ghost"}`} className="w-full justify-start">
+            <div>
+              {
+                sidebarCategory?
+                sidebarCategory.map((categoryD:any, index:any)=>(
+                  <div key={index}>
+                    <Button onClick={()=>{selectChange(categoryD.id)}} variant={`${currentC==categoryD.id.split("|").join("/")?"secondary":"ghost"}`} className="w-full justify-start">
+                      {categoryD.id.split("|").join("/")}
+                    </Button>
+                  </div>
+                )):
+                <div><Loader/></div>
+              }
+            </div>
+            {/* <Button onClick={()=>{selectChange("How To")}} variant={`${currentC=="How To"?"secondary":"ghost"}`} className="w-full justify-start">
               How To
             </Button>
             <Button onClick={()=>{selectChange("Help")}} variant={`${currentC=="Help"?"secondary":"ghost"}`} className="w-full justify-start">
               Help
             </Button>
-            <Button onClick={()=>{selectChange("Mystery/Haunted/Ghost")}} variant={`${currentC=="Mystery/Haunted/Ghost"?"secondary":"ghost"}`} className="w-full justify-start">
+            <Button onClick={()=>{selectChange("Mystery|Haunted|Ghost")}} variant={`${currentC=="Mystery/Haunted/Ghost"?"secondary":"ghost"}`} className="w-full justify-start">
             Mystery/Haunted/Ghost
             </Button>
-            <Button onClick={()=>{selectChange("Astrology/Remedies/Occult")}} variant={`${currentC=="Astrology/Remedies/Occult"?"secondary":"ghost"}`} className="w-full justify-start">
+            <Button onClick={()=>{selectChange("Astrology|Remedies|Occult")}} variant={`${currentC=="Astrology/Remedies/Occult"?"secondary":"ghost"}`} className="w-full justify-start">
             Astrology/Remedies/Occult
             </Button>
-            <Button onClick={()=>{selectChange("GemStones/Rudraksha")}} variant={`${currentC=="GemStones/Rudraksha"?"secondary":"ghost"}`}className="w-full justify-start">
+            <Button onClick={()=>{selectChange("GemStones|Rudraksha")}} variant={`${currentC=="GemStones/Rudraksha"?"secondary":"ghost"}`}className="w-full justify-start">
             GemStones/Rudraksha
-            </Button>
+            </Button> */}
           </div>
+          </ScrollArea>
         </div>
         <div className="py-2">
           <h2 className="relative px-7 text-lg font-semibold tracking-tight">

diff --git a/app/homepage2/createEvent/page.tsx b/app/homepage2/createEvent/page.tsx
@@ -151,7 +151,7 @@ const CreatEventPage = () => {
       const [previewImg, setPreviewImg] = useState<any>(null);
       const [subCategoryy, setSubCategoryy] = useState<any>(["SubCategory1", "SubCategory2", "SubCategory3"]);
       const [tempSubCategory, setTempSubCategory] = useState<any>([]);
-
+      const [selectCategory, setSelectCategory] = useState<any>();
       const [sponsors , setSponsors] = useState<string[]>([]);
       const [sponsorInput , setSponsorInput] = useState<string>("");
       const [landmark, setLandmark] = useState<string>("");
@@ -212,6 +212,30 @@ const CreatEventPage = () => {
 
       //extracting ends 
 
+      useEffect(()=>{
+        const getCat=async()=>{
+          try {
+            const eventCategoriesRef = collection(db, 'meta-data', 'v1', 'event-categories');
+            const snapshot = await getDocs(eventCategoriesRef);
+
+            const eventCategories:any = [];
+            snapshot.forEach(doc => {
+              eventCategories.push({ id: doc.id, ...doc.data() });
+            });
+
+            return eventCategories;
+          } catch (error) {
+            console.error('Error fetching event categories:', error);
+            return [];
+          }
+      }
+      const category = getCat().then(categories => {
+        setSelectCategory(categories);
+      }).catch(error => {
+        console.error('Error:', error);
+      });
+      }, [])
+
       //new fetchpost
       useEffect(() => {
 
@@ -698,11 +722,17 @@ const CreatEventPage = () => {
                             <SelectContent>
                               <SelectGroup>
                                 <SelectLabel>Categories</SelectLabel>
-                                <SelectItem value="How To">How To</SelectItem>
-                                <SelectItem value="Help">Help</SelectItem>
-                                <SelectItem value="Mystery|Haunted|Ghost">Mystery/Haunted/Ghost</SelectItem>
-                                <SelectItem value="Astrology|Remedies|Occult">Astrology/Remedies/Occult</SelectItem>
-                                <SelectItem value="GemStones|Rudraksha">GemStones/Rudraksha</SelectItem>
+                                <div>
+              {
+                selectCategory?
+                selectCategory.map((categoryD:any, index:any)=>(
+                  <div key={index}>
+                    <SelectItem value={categoryD.id}>{categoryD.id.split("|").join("/")}</SelectItem>
+                  </div>
+                )):
+                <div><Loader/></div>
+              }
+            </div>
                                 <SelectItem value="Others">Others</SelectItem>
                               </SelectGroup>
                             </SelectContent>