Add select category

nesmon · Mar 22, 2023 · 3bb05d3 · 3bb05d3
1 parent 0d5fa07
commit 3bb05d3
Showing 1 changed file with 24 additions and 0 deletions.
diff --git a/src/Route/Charts/Charts.jsx b/src/Route/Charts/Charts.jsx
@@ -16,6 +16,20 @@ function Charts() {
     return charts;
   }
 
+  const switchCategory = async (category) => {
+    const db = getFirestore();
+    const chartRef = collection(db, "Chart");
+    const snapshot = await getDocs(chartRef);
+    const charts = snapshot.docs.map(doc => doc.data());
+
+    if (category === "all") {
+      setCharts(charts);
+    } else {
+      const filteredCharts = charts.filter(chart => chart.category === category);
+      setCharts(filteredCharts);
+    }
+  }
+
   useEffect(() => {
     async function fetchData() {
       const data = await getCharts();
@@ -26,6 +40,16 @@ function Charts() {
 
   return (
     <div className="App">
+      <div className="flex justify-center">
+        <button onClick={() => switchCategory("all")} className="bg-green-500 hover:bg-green-700 text-white font-bold py-2 px-4 rounded m-2">All</button>
+        <button onClick={() => switchCategory("pop")} className="bg-indigo-500 hover:bg-indigo-700 text-white font-bold py-2 px-4 rounded m-2">Pop & Anime</button>
+        <button onClick={() => switchCategory("niconico")} className="bg-purple-500 hover:bg-purple-700 text-white font-bold py-2 px-4 rounded m-2">Niconico & Vocaloid</button>
+        <button onClick={() => switchCategory("touhou")} className="bg-lime-500 hover:bg-lime-700 text-white font-bold py-2 px-4 rounded m-2">Touhou Project</button>
+        <button onClick={() => switchCategory("game")} className="bg-red-500 hover:bg-red-700 text-white font-bold py-2 px-4 rounded m-2">Game & variety</button>
+        <button onClick={() => switchCategory("original")} className="bg-fuchsia-500 hover:bg-fuchsia-700 text-white font-bold py-2 px-4 rounded m-2">Original & Joypolis</button>
+        <button onClick={() => switchCategory("utage")} className="bg-indigo-500 hover:bg-indigo-700 text-white font-bold py-2 px-4 rounded m-2">Utage</button>
+      </div>
+
       <div className="songList">
         {charts.map((item, index) => {
           return (