add counter reader

Author: codercatdev

firestore.rules

@@ -3,6 +3,10 @@ service cloud.firestore {
   match /databases/{database}/documents {
     match /{document=**} {
       allow read, write: if false;
+
+      match /counts/{id} {
+        allow read, write: if true;
+      }
     }
   }
 }

src/App.svelte

@@ -1,7 +1,9 @@
 <script>
   import Firebase_Logo_Logomark from "./assets/Firebase_Logo_Logomark.svg";
+  import ReCaptcha from "./assets/recaptcha_48dp.png";
   import { initializeApp } from "firebase/app";
-  import { getFirestore } from "firebase/firestore";
+  import Counter from "./lib/Counter.svelte";
+  import CounterReader from "./lib/CounterReader.svelte";
 
   const firebaseConfig = {
     apiKey: "AIzaSyAH2JT998LjBxxJO0eX_V5LPAyhhxV2fQQ",
@@ -14,18 +16,31 @@
 
   // Initialize Firebase
   const app = initializeApp(firebaseConfig);
-  const db = getFirestore(app);
 </script>
 
 <main>
   <div>
     <a href="https://firebase.google.com" target="_blank" rel="noreferrer">
-      <img src={Firebase_Logo_Logomark} class="logo" alt="Firebase Logo" />
+      <img
+        src={Firebase_Logo_Logomark}
+        class="logo firebase"
+        alt="Firebase Logo"
+      />
+    </a>
+    <a
+      href="https://developers.google.com/recaptcha"
+      target="_blank"
+      rel="noreferrer"
+    >
+      <img src={ReCaptcha} class="logo" alt="Recaptcha Logo" />
     </a>
   </div>
-  <h1>Firebase without App Check</h1>
+  <h1>Firebase with App Check (using reCAPTCHA)</h1>
 
-  <div class="card" />
+  <div class="card">
+    <Counter {app} />
+    <CounterReader {app} />
+  </div>
 
   <p>
     Check out <a
@@ -46,10 +61,7 @@
   .logo:hover {
     filter: drop-shadow(0 0 2em #646cffaa);
   }
-  .logo.svelte:hover {
-    filter: drop-shadow(0 0 2em #ff3e00aa);
-  }
-  .read-the-docs {
-    color: #888;
+  .logo.firebase:hover {
+    filter: drop-shadow(0 0 2em #ffea00fb);
   }
 </style>

src/app.css

@@ -51,7 +51,7 @@ button {
   border-radius: 8px;
   border: 1px solid transparent;
   padding: 0.6em 1.2em;
-  font-size: 1em;
+  font-size: 3em;
   font-weight: 500;
   font-family: inherit;
   background-color: #1a1a1a;

src/assets/no-recaptcha.png

@@ -1,8 +1,21 @@
 <script>
-  let count = 0
-  const increment = () => {
-    count += 1
-  }
+  export let app;
+  import { addDoc, collection, getFirestore } from "firebase/firestore";
+  const db = getFirestore(app);
+
+  let count = 0;
+  const increment = async () => {
+    count += 1;
+    try {
+      const docRef = await addDoc(collection(db, "counts"), {
+        date: new Date(),
+        count,
+      });
+      console.log("Document written with ID: ", docRef.id);
+    } catch (e) {
+      console.error("Error adding document: ", e);
+    }
+  };
 </script>
 
 <button on:click={increment}>

src/assets/recaptcha_48dp.png

@@ -0,0 +1,70 @@
+<script>
+  import { onDestroy } from "svelte";
+
+  export let app;
+  import {
+    collection,
+    getFirestore,
+    increment,
+    onSnapshot,
+    query,
+    orderBy,
+    limit,
+    Timestamp,
+  } from "firebase/firestore";
+  const db = getFirestore(app);
+  const q = query(collection(db, "counts"), orderBy("date", "desc"), limit(5));
+
+  $: counts = [];
+
+  const unsubscribe = onSnapshot(q, (querySnapshot) => {
+    const allCounts = [];
+    querySnapshot.forEach((doc) => {
+      allCounts.push({ id: doc.id, ...doc.data() });
+    });
+    counts = allCounts;
+  });
+
+  onDestroy(() => {
+    unsubscribe();
+  });
+</script>
+
+<h2>Last 5</h2>
+
+<section>
+  {#each counts as count}
+    <div class="count-container card">
+      <div><span>ID: </span><span>{count.id}</span></div>
+      <div>
+        <span>Time: </span><span
+          >{count.date.toDate().toLocaleTimeString()}</span
+        >
+      </div>
+      <div><span>Count: </span><span>{count.count}</span></div>
+    </div>
+  {/each}
+</section>
+
+<style>
+  section {
+    display: flex;
+    justify-content: center;
+    gap: 0.5rem;
+    padding: 1rem;
+  }
+  .count-container {
+    display: flex;
+    flex-direction: column;
+    align-items: start;
+    max-width: 300px;
+
+    border-radius: 8px;
+    border: 1px solid transparent;
+    padding: 0.6em 1.2em;
+    font-size: 1em;
+    font-weight: 500;
+    font-family: inherit;
+    background-color: #1a1a1a;
+  }
+</style>