club creation and homepage display

package.json

@@ -0,0 +1,5 @@
+{
+  "dependencies": {
+    "fetch": "^1.1.0"
+  }
+}

public/scripts/clubhome.js

@@ -0,0 +1,72 @@
+import { initializeApp } from "https://www.gstatic.com/firebasejs/10.13.2/firebase-app.js";
+  import { getAnalytics } from "https://www.gstatic.com/firebasejs/10.13.2/firebase-analytics.js";
+  import { getFirestore, collection, getDoc, getDocs, doc, query, where } from 'https://www.gstatic.com/firebasejs/10.13.2/firebase-firestore.js';
+  import { getAuth, 
+    createUserWithEmailAndPassword,
+signOut,
+signInWithEmailAndPassword,
+onAuthStateChanged
+ } 
+
+from "https://www.gstatic.com/firebasejs/10.13.2/firebase-auth.js";
+  // TODO: Add SDKs for Firebase products that you want to use
+  // https://firebase.google.com/docs/web/setup#available-libraries
+
+  // Your web app's Firebase configuration
+  // For Firebase JS SDK v7.20.0 and later, measurementId is optional
+  const firebaseConfig = {
+    apiKey: "AIzaSyAt-SInlPaL2FzwtXrRltIEiV5l8k5HMjg",
+    authDomain: "pageturners-a831a.firebaseapp.com",
+    projectId: "pageturners-a831a",
+    storageBucket: "pageturners-a831a.appspot.com",
+    messagingSenderId: "304224952392",
+    appId: "1:304224952392:web:f33dbc84b481e39a44787d",
+    measurementId: "G-C6DKQSJ1R8"
+  };
+
+  // Initialize Firebase
+  const app = initializeApp(firebaseConfig);
+  const analytics = getAnalytics(app);
+  const auth = getAuth();
+  const db = getFirestore(app);
+
+  const queryParams = new URLSearchParams(window.location.search);
+
+  const name = queryParams.get("name");
+
+
+  async function getClubDocFromQParams(queryParams)
+  {
+    const q = query(collection(db, "BookClubs"), where("BookClubName", "==", queryParams.get("name")));
+    const qsnap = await getDocs(q);
+
+
+    const docData = qsnap.docs[0].data();
+    console.log(docData)
+    console.log(docData["BookClubName"]);
+    return docData;
+  }
+
+  async function getEmailFromUID(uid)
+  {
+    const q = query(collection(db, "Users"), where("uid", "==", uid));
+    const qsnap = await getDocs(q);
+
+    return qsnap.docs[0].data()["email"];
+  }
+
+  let docData = await getClubDocFromQParams(queryParams);
+
+  document.getElementById("clubName").textContent = docData["BookClubName"]
+  document.getElementById("clubDescription").textContent = docData["clubDescription"]
+
+  for (const uid of docData["ClubUsers"])
+  {
+    const newLI = document.createElement("li");
+    newLI.textContent = await getEmailFromUID(uid);
+
+    const parentUL = document.getElementById("members");
+    parentUL.appendChild(newLI);
+  }
+
+

public/scripts/createClub.js

@@ -24,7 +24,7 @@ auth.onAuthStateChanged(function(user){
 
     clubCreateForm.addEventListener('submit', async function(e){
         e.preventDefault();
-        const clubName = clubCreateForm["clubName"].value;
+        const clubName = clubCreateForm["clubname"].value;
 
         let bookClubsRef = collection(db, "BookClubs");
         const q = query(bookClubsRef, where("BookClubName", "==", clubName));
@@ -35,7 +35,8 @@ auth.onAuthStateChanged(function(user){
         if (qsnap.empty){
             await addDoc(collection(db,"BookClubs"), {
                 BookClubName: clubName,
-                ClubUsers: [user.uid]
+                ClubUsers: [user.uid],
+                clubDescription: "no description"
             }, clubName)
 
             window.location.href = "./dashboard.html";

public/webpages/html/club.html

@@ -123,17 +123,16 @@ <h1>Give Your Club a Name</h1>
           <!-- Left side with form -->
           <div class="club-form-section">
             <img src="../../images/club-icon.jpg" alt="Club Icon" class="club-icon" />
-            <form action="#" method="POST" class="club-creation-form">
+            <form id="createClubForm" action="#" method="POST" class="club-creation-form">
               <label for="club-name" class="club-label">Club Name</label>
               <input
                 type="text"
-                id="club-name"
+                id="clubname"
                 name="club-name"
                 placeholder="Enter Club Name"
                 required
               />
-
-              <a href="invite.html" class="create-club-button">Create My Club</a>
+              <button type="submit">Create Club</button>
 
               <p class="message">
                 Your bookclub name can always be changed!
@@ -152,7 +151,7 @@ <h1>Give Your Club a Name</h1>
         </section>
       </main>
     </div>
-    <script>
+    <!-- <script>
   document.querySelector(".create-club-button").addEventListener("click", function (event) {
       const clubNameInput = document.getElementById("club-name").value.trim();
       if (!clubNameInput) {
@@ -173,7 +172,8 @@ <h1>Give Your Club a Name</h1>
 
       window.location.href = "invite.html";
   });
-</script>
+</script> -->
+<script type="module" src="../../scripts/createClub.js"></script>
 
 
     <footer>

public/webpages/html/clubhomepage.html

@@ -6,7 +6,9 @@
     <title>Document</title>
 </head>
 <body>
-    <script src="../../scripts/clubhome.js"></script>
+    <script type="module" src="../../scripts/clubhome.js"></script>
     <h1 id="clubName">Club Name</h1>
+    <h2 id="clubDescription">club clubDescription</h2>
+    <ul id="members">members</ul>
 </body>
 </html>

public/webpages/html/dashboard.html

@@ -17,14 +17,16 @@
           <ul class="nav-list">
             <li><a href="dashboard.html">Home</a></li>
             <li class="dropdown">
-              <a href="#">My Clubs</a>
+              <a href="MyClubs.html">My Clubs</a>
               <ul class="dropdownmenu" id="userdropdownmenu">
                 <li><a href="overview.html">My Club Creation</a></li>
                 <li><a href="club.html">Create my Club</a></li>
               </ul>
             </li>
 
             <li>
+              <a href="MyClubs.html"><button class="loginbutton">My Clubs</button></button></a>
+              <a href="club.html"><button class="loginbutton">Create A Club</button></button></a>
               <a href="join.html"><button class="loginbutton">Join</button></a>
             </li>