working on reading user chats

.firebaserc

@@ -0,0 +1,5 @@
+{
+  "projects": {
+    "default": "stjernberg-chat"
+  }
+}

.github/workflows/firebase-hosting-merge.yml

@@ -0,0 +1,20 @@
+# This file was auto-generated by the Firebase CLI
+# https://github.com/firebase/firebase-tools
+
+name: Deploy to Firebase Hosting on merge
+'on':
+  push:
+    branches:
+      - main
+jobs:
+  build_and_deploy:
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v3
+      - run: npm ci && npm run build
+      - uses: FirebaseExtended/action-hosting-deploy@v0
+        with:
+          repoToken: '${{ secrets.GITHUB_TOKEN }}'
+          firebaseServiceAccount: '${{ secrets.FIREBASE_SERVICE_ACCOUNT_STJERNBERG_CHAT }}'
+          channelId: live
+          projectId: stjernberg-chat

.github/workflows/firebase-hosting-pull-request.yml

@@ -0,0 +1,17 @@
+# This file was auto-generated by the Firebase CLI
+# https://github.com/firebase/firebase-tools
+
+name: Deploy to Firebase Hosting on PR
+'on': pull_request
+jobs:
+  build_and_preview:
+    if: '${{ github.event.pull_request.head.repo.full_name == github.repository }}'
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v3
+      - run: npm ci && npm run build
+      - uses: FirebaseExtended/action-hosting-deploy@v0
+        with:
+          repoToken: '${{ secrets.GITHUB_TOKEN }}'
+          firebaseServiceAccount: '${{ secrets.FIREBASE_SERVICE_ACCOUNT_STJERNBERG_CHAT }}'
+          projectId: stjernberg-chat

app/auth/page.jsx

@@ -11,14 +11,12 @@ export default function Auth() {
   if (!loading && currentUser) redirect("/");
 
   const handleAuth = async () => {
-    try {
-      const res = await googleAuth();
-
-      if (res) console.log("succeeded");
-    } catch (err) {
-      console.log(err.message);
-      setErr(err.message);
-    }
+    const user = await googleAuth();
+    if (user) {
+      console.log(user); 
+      const resFromWrite = await writeUserData(user);
+      console.log(resFromWrite);
+    } else console.log("did not run")
   };
 
   if (!loading)
@@ -34,7 +32,7 @@ export default function Auth() {
           </div>
           {err && <div>{err}</div>}
           <button
-            onClick={handleAuth}
+          onClick={() => googleAuth()}
             className="bg-white py-2.5 rounded-lg border border-slate-400 w-full dark:border-none flex justify-center text-center grow hover:scale-105 transition cursor-pointer"
           >
             <SVG

app/page.js

@@ -1,29 +1,54 @@
 "use client";
 import { useAuth } from "@/firebase/context/AuthContext";
-
-import { useState } from "react";
+import { useEffect, useState } from "react";
 import { redirect } from "next/navigation";
 import ContactSection from "@/components/sections/ContactSection";
 import ChatSection from "@/components/sections/ChatSection";
+import { testWrite } from "@/firebase/hooks/write";
+import { readUserChats } from "@/firebase/hooks/read";
 
 export default function Home() {
-  const { currentUser, logout, googleAuth, loading } = useAuth();
-  const [input, setInput] = useState("");
-
-  const writeToDd = async () => {
-    const res = await writeData(currentUser.uid, input);
-    if (res) {
-      setInput("");
-      console.log(res);
-    }
+  const { currentUser, logout, loading } = useAuth();
+
+  //fetch user chats on page load
+  useEffect(() => {
+    // if (currentUser && !loading) {
+    //   console.log("ran")
+    //   getUserChats();
+    // }
+  }, []);
+
+  const getUserChats = async () => {
+    const res = await readUserChats(currentUser);
+    console.log(res);
   };
 
+
   if (!loading && !currentUser) redirect("/auth");
 
   return (
     <div className="flex flex-row gap-5 py-5 px-5 md:px-10 lg:px-14 h-screen">
       <ContactSection />
       <ChatSection />
+      <div className="flex flex-col gap-5">
+        <button className="border" onClick={logout}>
+          logout
+        </button>
+        {/* <button className="border" onClick={writeToDd}>
+          write To rtdb
+        </button> */}
+      </div>
     </div>
   );
 }
+
+//-NZksAaxaoF4jnX5iY5U
+
+//stack overflow for cloudfunctions to read data
+//https://stackoverflow.com/questions/48375904/read-data-from-cloud-firestore-with-firebase-cloud-function
+
+//yt tutorials for cloud functions
+//https://www.youtube.com/watch?v=7EJeLbDVIgM&list=PL4cUxeGkcC9i_aLkr62adUTJi53y7OjOf&index=11
+
+//cd functions && npm run lint -- --fix && cd ..
+//firebase emulators:start --only functions

components/ChatInput.jsx

@@ -1,11 +1,14 @@
 "use client";
 import { useRef, useEffect } from "react";
 import SVG from "react-inlinesvg";
+
 const ChatInput = () => {
   const inputRef = useRef(null);
+
   useEffect(() => {
     inputRef.current.focus();
   }, []);
+
   return (
     <div className="sticky bottom-0 py-3 px-10 flex gap-5">
       <div className="flex gap-5 items-center">

components/NewBtn.jsx

@@ -0,0 +1,27 @@
+"use client";
+import { useState } from "react";
+import SVG from "react-inlinesvg";
+import NewSection from "./sections/NewSection";
+const NewBtn = () => {
+  const [isNewSectionOpen, setIsNewSectionOpen] = useState(false);
+
+  return (
+    <>
+      <div
+        onClick={() => setIsNewSectionOpen(true)}
+        className="bg-white sticky bottom-5 mr-5 z-20 rounded-full bg-opacity-20 hover:bg-opacity-100 p-3 self-end hover:scale-105 shadow-2xl hover:shadow-glow hover:shadow-cyan-400 hover:bg-cyan-400 transition cursor-pointer"
+      >
+        <SVG
+          src="icons/remove.svg"
+          className="h-8 fill-white rotate-45"
+          loader={<div className="h-8 w-8" />}
+        />
+      </div>
+      {isNewSectionOpen && (
+        <NewSection closeSection={() => setIsNewSectionOpen(false)} />
+      )}
+    </>
+  );
+};
+
+export default NewBtn;

components/actions/NewContactAction.jsx

@@ -0,0 +1,61 @@
+"use client";
+import { useEffect, useState } from "react";
+import {
+  getFunctions,
+  httpsCallable,
+  connectFunctionsEmulator,
+} from "firebase/functions";
+import UserCard from "../cards/UserCard";
+import { useAuth } from "@/firebase/context/AuthContext";
+
+const NewContactAction = () => {
+  const { currentUser } = useAuth();
+  const [loading, setLoading] = useState(true);
+  const [data, setData] = useState([]);
+  const [error, setError] = useState("");
+
+  useEffect(() => {
+    handleGetUsers();
+  }, []);
+
+  //fetch users that are addable;
+  const handleGetUsers = () => {
+    const functions = getFunctions();
+    connectFunctionsEmulator(functions, "127.0.0.1", 5001);
+    const getUserAddableContacts = httpsCallable(
+      functions,
+      "getUserAddableContacts"
+    );
+    getUserAddableContacts({ uid: currentUser.uid })
+      .then((res) => {
+        setData(res.data);
+        setLoading(false);
+      })
+      .catch((err) => {
+        console.log(err);
+        setError(err.message);
+        setLoading(false);
+      });
+  };
+
+  if (loading || !data) return <div>loading...</div>;
+  if (error) return <div>{error}</div>;
+
+  return (
+    <>
+      <div className="text-3xl font-light">Our Users:</div>
+      <div className="flex flex-col gap-3 max-h-[400px] overflow-y-auto p-3 scrollbar-none ">
+        {data.map((i) => (
+          <UserCard
+            name={i.name}
+            photoURL={i.photoURL}
+            uid={i.uid}
+            key={i.uid}
+          />
+        ))}
+      </div>
+    </>
+  );
+};
+
+export default NewContactAction;

components/ContactCard.jsx → components/cards/ContactCard.jsx

@@ -16,7 +16,7 @@ const ContactCard = ({ img, name, lastText, notify, selected }) => {
         <img src={img} className="h-14 min-w-[56px] rounded-full" />
       </div>
       <div className="w-full max-w-[252px]">
-        <div className="font-light text-lg">{name}</div>
+        <div className="font-light text-lg truncate">{name}</div>
         <div className={`text-sm transition truncate ${isSelected ? "text-white text-opacity-90" : "text-[#aaaaaa]"}`}>{lastText}</div>
       </div>
       <div

components/cards/DropdownCard.jsx

@@ -0,0 +1,38 @@
+//"use client"
+import { acceptContactRequest } from "@/firebase/hooks/write";
+
+const DropdownCard = ({ name, photoURL, uid, currentUserUID }) => {
+  const handleAccept = async () => {
+    const res = await acceptContactRequest(currentUserUID, uid);
+    console.log(res)
+  };
+
+  return (
+    <div
+      className={`flex relative items-center py-3 px-5 gap-5 rounded-lg w-[400px] transition bg-white bg-opacity-5`}
+    >
+      <div>
+        <img src={photoURL} className="h-14 min-w-[56px] rounded-full" />
+      </div>
+      <div className="w-full max-w-[200px] flex flex-col">
+        <div className="text-xs font-light text-[#aaaaaa]">
+          New contact request from
+        </div>
+        <div className="font-medium text-base truncate">{name}</div>
+      </div>
+      <div className="text-sm gap-1 flex flex-col">
+        <button
+          onClick={handleAccept}
+          className="py-1 px-2 rounded-full bg-white bg-opacity-20 hover:bg-opacity-100 hover:scale-105 hover:shadow-glow hover:shadow-cyan-400 hover:bg-cyan-400 transition cursor-pointer"
+        >
+          Accept
+        </button>
+        <button className="rounded-full bg-white bg-opacity-0 hover:bg-opacity-5 py-1 px-2">
+          Decline
+        </button>
+      </div>
+    </div>
+  );
+};
+
+export default DropdownCard;

components/cards/MessageCard.jsx

@@ -0,0 +1,16 @@
+const MessageCard = ({ content, time, isOwnMessage }) => {
+  return (
+    <div
+      className={`p-2 rounded-2xl pr-16 relative max-w-2xl ${
+        isOwnMessage
+          ? "bg-cyan-500 rounded-tr-sm self-end"
+          : "bg-white bg-opacity-20 rounded-tl-sm self-start"
+      }`}
+    >
+      {content.text}
+      <div className="absolute bottom-1 right-3 text-xs font-light">{time}</div>
+    </div>
+  );
+};
+
+export default MessageCard;