Advertisement
plamen5rov

Untitled

Apr 10th, 2021
1,006
0
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
  1. import React, { useState, useEffect } from "react";
  2. import firebase from "firebase/app";
  3. import styles from "./Categories.module.css";
  4. import { Link, useHistory } from "react-router-dom";
  5. import { useAuth } from "../../utils/AuthContext";
  6. //import { motion } from "framer-motion";
  7.  
  8. function Categories() {
  9.   const [category, setCategory] = useState([]);
  10.   const [currentCollection, setCurrentCollection] = useState();
  11.   const { currentUser } = useAuth();
  12.  
  13.   useEffect(() => {
  14.     const fetchData = async () => {
  15.       const db = firebase.firestore();
  16.       const data = await db.collection("categories").get();
  17.       setCategory(data.docs.map((doc) => doc.data()));
  18.     };
  19.  
  20.     fetchData();
  21.  
  22.     return () => {
  23.       setCategory([]);
  24.     };
  25.   }, []);
  26.  
  27.   function categoryClickHandler(e) {
  28.     e.preventDefault();
  29.     const collection = e.target.innerHTML;
  30.     setCurrentCollection(collection);
  31.  
  32.     console.log(e.target.innerHTML, " was clicked!");
  33.     console.log(collection, " collection");
  34.  
  35.     console.log("Current collection is: ", currentCollection);
  36.   }
  37.  
  38.   const listItems = category.map((category) => (
  39.     <li key={category.name}>
  40.       <button
  41.         className={styles.categoryBtn}
  42.         onClick={categoryClickHandler}
  43.         disabled={!currentUser}
  44.       >
  45.         {category.name}
  46.       </button>
  47.     </li>
  48.   ));
  49.  
  50.   return (
  51.     <div className={styles.categoryBox}>
  52.       {currentUser && <h2>Click on a category to start the quiz!</h2>}
  53.  
  54.       {!currentUser && <h2>REGISTER to start the quiz!</h2>}
  55.       <ul>{listItems}</ul>
  56.     </div>
  57.   );
  58. }
  59. export default Categories;
  60.  
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement