update add-item to manage list. update firestore.js to include necess…

…ary functions for managing users.

src/App.jsx

@@ -1,41 +1,52 @@
 import { BrowserRouter as Router, Routes, Route } from 'react-router-dom';
 
-import { AddItem, Home, Layout, List } from './views';
+import { Home, Layout, List, ManageList } from './views';
 
 import { useShoppingListData } from './api';
 
 import { useStateWithStorage } from './utils';
 
 export function App() {
  /**
- * This custom hook takes a token pointing to a shopping list
+ * This custom hook takes the path of a shopping list
  * in our database and syncs it with localStorage for later use.
  * Check ./utils/hooks.js for its implementation.
  *
- * We use `my test list` by default so we can see the list
- * of items that was prepopulated for this project.
- * We'll later set this to `null` by default (since new users do not
- * have tokens), and use `setListToken` when we allow a user
- * to create and join a new list.
+ * We'll later use `setListPath` when we allow a user
+ * to create and switch between lists.
  */
- const [listToken, setListToken] = useStateWithStorage(
- 'tcl-shopping-list-token',
- 'my test list',
+ const [listPath, setListPath] = useStateWithStorage(
+ 'tcl-shopping-list-path',
+ null,
  );
 
+ /**
+ * This custom hook holds info about the current signed in user.
+ * Check ./api/useAuth.jsx for its implementation.
+ */
+ const { user } = useAuth();
+ const userId = user?.uid;
+ const userEmail = user?.email;
+
+ /**
+ * This custom hook takes a user ID and email and fetches
+ * the shopping lists that the user has access to.
+ * Check ./api/firestore.js for its implementation.
+ */
+ const lists = useShoppingLists(userId, userEmail);
  /**
  * This custom hook takes our token and fetches the data for our list.
  * Check ./api/firestore.js for its implementation.
  */
- const data = useShoppingListData(listToken);
+ const data = useShoppingListData(listPath);
 
  return (
  <Router>
  <Routes>
  <Route path="/" element={<Layout />}>
  <Route index element={<Home />} />
  <Route path="/list" element={<List data={data} />} />
- <Route path="/add-item" element={<AddItem />} />
+ <Route path="/manage-list" element={<ManageList />} />
  </Route>
  </Routes>
  </Router>

src/api/firebase.js

@@ -3,24 +3,59 @@ import { useEffect, useState } from 'react';
 import { db } from './config';
 import { getFutureDate } from '../utils';
 
+/**
+ * A custom hook that subscribes to the user's shopping lists in our Firestore
+ * database and returns new data whenever the lists change.
+ * @param {string | null} userId 
+ * @param {string | null} userEmail 
+ * @returns 
+ */
+export function useShoppingLists(userId, userEmail) {
+ // Start with an empty array for our data.
+ const initialState = [];
+ const [data, setData] = useState(initialState);
+
+ useEffect(() => {
+ // If we don't have a userId or userEmail (the user isn't signed in),
+ // we can't get the user's lists.
+ if (!userId || !userEmail) return;
+
+ // When we get a userEmail, we use it to subscribe to real-time updates
+ const userDocRef = doc(db, 'users', userEmail);
+
+ onSnapshot(userDocRef, (docSnap) => {
+ if (docSnap.exists()) {
+ const listRefs = docSnap.data().sharedLists;
+ const newData = listRefs.map((listRef) => {
+ return { name: listRef.id, path: listRef.path };
+ });
+ setData(newData);
+ }
+ });
+
+ }, [userId, userEmail]);
+
+ return data;
+}
+
 /**
  * A custom hook that subscribes to a shopping list in our Firestore database
  * and returns new data whenever the list changes.
- * @param {string | null} listId
+ * @param {string | null} listPath
  * @see https://firebase.google.com/docs/firestore/query-data/listen
  */
-export function useShoppingListData(listId) {
+export function useShoppingListData(listPath) {
  // Start with an empty array for our data.
  /** @type {import('firebase/firestore').DocumentData[]} */
  const initialState = [];
  const [data, setData] = useState(initialState);
 
  useEffect(() => {
- if (!listId) return;
+ if (!listPath) return;
 
  // When we get a listId, we use it to subscribe to real-time updates
  // from Firestore.
- return onSnapshot(collection(db, listId), (snapshot) => {
+ return onSnapshot(collection(db, listPath, 'items'), (snapshot) => {
  // The snapshot is a real-time update. We iterate over the documents in it
  // to get the data.
  const nextData = snapshot.docs.map((docSnapshot) => {
@@ -43,15 +78,79 @@ export function useShoppingListData(listId) {
  return data;
 }
 
+/**
+ * Add a new user to the users collection in Firestore.
+ * @param {Object} user The user object from Firebase Auth.
+ */
+export async function addUserToDatabase(user) {
+ // Check if the user already exists in the database.
+ const userDoc = await getDoc(doc(db, 'users', user.email));
+ // If the user already exists, we don't need to do anything.
+ if (userDoc.exists()) {
+ return;
+ } else {
+ // If the user doesn't exist, add them to the database.
+ // We'll use the user's email as the document id
+ // because it's more likely that the user will know their email
+ // than their uid.
+ await setDoc(doc(db, 'users', user.email), {
+ email: user.email,
+ name: user.displayName,
+ uid: user.uid,
+ });
+ }
+}
+
+/**
+ * Create a new list and add it to a user's lists in Firestore.
+ * @param {string} userId The id of the user who owns the list.
+ * @param {string} userEmail The email of the user who owns the list.
+ * @param {string} listName The name of the new list.
+ */
+export async function createList(userId, userEmail, listName) {
+ const listDocRef = doc(db, userId, listName);
+
+ await setDoc(listDocRef, {
+ owner: userId,
+ });
+
+ const userDocumentRef = doc(db, 'users', userEmail);
+
+ updateDoc(userDocumentRef, {
+ sharedLists: arrayUnion(listDocRef),
+ });
+}
+
+/**
+ * Shares a list with another user.
+ * @param {string} listPath The path to the list to share.
+ * @param {string} recipientEmail The email of the user to share the list with.
+ */
+export async function shareList(listPath, recipientEmail) {
+ // Get the document for the recipient user.
+ const usersCollectionRef = collection(db, 'users');
+ const recipientDoc = await getDoc(doc(usersCollectionRef, recipientEmail));
+ // If the recipient user doesn't exist, we can't share the list.
+ if (!recipientDoc.exists()) {
+ return;
+ }
+ // Add the list to the recipient user's sharedLists array.
+ const listDocumentRef = doc(db, listPath);
+ const userDocumentRef = doc(db, 'users', recipientEmail);
+ updateDoc(userDocumentRef, {
+ sharedLists: arrayUnion(listDocumentRef),
+ });
+}
+
 /**
  * Add a new item to the user's list in Firestore.
- * @param {string} listId The id of the list we're adding to.
+ * @param {string} listPath The path of the list we're adding to.
  * @param {Object} itemData Information about the new item.
  * @param {string} itemData.itemName The name of the item.
  * @param {number} itemData.daysUntilNextPurchase The number of days until the user thinks they'll need to buy the item again.
  */
-export async function addItem(listId, { itemName, daysUntilNextPurchase }) {
- const listCollectionRef = collection(db, listId);
+export async function addItem(listPath, { itemName, daysUntilNextPurchase }) {
+ const listCollectionRef = collection(db, listPath, 'items');
  // TODO: Replace this call to console.log with the appropriate
  // Firebase function, so this information is sent to your database!
  return console.log(listCollectionRef, {

src/api/useAuth.jsx

@@ -2,6 +2,11 @@ import { useEffect, useState } from 'react';
 import { auth } from './config.js';
 import { GoogleAuthProvider, signInWithRedirect } from 'firebase/auth';
 
+/**
+ * A button that signs the user in using Google OAuth. When clicked,
+ * the button redirects the user to the Google OAuth sign-in page.
+ * After the user signs in, they are redirected back to the app.
+ */
 export const SignInButton = () => (
  <button
  type="button"
@@ -11,12 +16,20 @@ export const SignInButton = () => (
  </button>
 );
 
+/**
+ * A button that signs the user out of the app using Firebase Auth.
+ */
 export const SignOutButton = () => (
  <button type="button" onClick={() => auth.signOut()}>
  Sign Out
  </button>
 );
 
+/**
+ * A custom hook that listens for changes to the user's auth state.
+ * Check out the Firebase docs for more info on auth listeners:
+ * @see https://firebase.google.com/docs/auth/web/start#set_an_authentication_state_observer_and_get_user_data
+ */
 export const useAuth = () => {
  const [user, setUser] = useState(null);
 

src/views/Home.jsx

@@ -1,11 +1,15 @@
 import './Home.css';
 
-export function Home() {
+export function Home({ lists }) {
  return (
  <div className="Home">
  <p>
  Hello from the home (<code>/</code>) page!
  </p>
+ {/**
+ * TODO: write some JavaScript that renders the `lists` array
+ * so we can see which lists the user has access to.
+ */}
  </div>
  );
 }

src/views/ManageItem.jsx

@@ -0,0 +1,3 @@
+export function ManageList() {
+ return <p>Hello from the <code>/manage-list</code> page!</p>
+}

src/views/index.js

@@ -1,4 +1,4 @@
-export * from './AddItem';
+export * from './ManageItem';
 export * from './Home';
 export * from './Layout';
 export * from './List';