Implement frontend for the folder system

- Implement folder page to display user folders
- Add folder card component for folder representation
- Added 'add to folder' button in apartment page
- Debugged authentication issues in folder operations

Author: Lauren Pothuru

backend/src/app.ts

@@ -1764,7 +1764,6 @@ app.get('/api/folders', authenticate, async (req, res) => {
   try {
     if (!req.user) throw new Error('Not authenticated');
     const { uid } = req.user;
-
     // Fetch all folders for this user
     const folderSnapshot = await folderCollection.where('userId', '==', uid).get();
 
@@ -1834,11 +1833,12 @@ app.put('/api/folders/:folderId', authenticate, async (req, res) => {
 });
 
 // Endpoint to add an apartment to a folder
-app.post('/api/folders/:id/apartments/:apartmentId', authenticate, async (req, res) => {
+app.post('/api/folders/:folderId/apartments', authenticate, async (req, res) => {
   try {
     if (!req.user) throw new Error('Not authenticated');
     const { uid } = req.user;
-    const { folderId, aptId } = req.body;
+    const { folderId } = req.params;
+    const { aptId } = req.body;
 
     const folderRef = folderCollection.doc(folderId);
     const folderDoc = await folderRef.get();
@@ -1866,11 +1866,11 @@ app.post('/api/folders/:id/apartments/:apartmentId', authenticate, async (req, r
 });
 
 // Endpoint to remove an apartment from a folder
-app.post('/api/folders/:id/apartments/:apartmentId', authenticate, async (req, res) => {
+app.delete('/api/folders/:folderId/apartments/:apartmentId', authenticate, async (req, res) => {
   try {
     if (!req.user) throw new Error('Not authenticated');
     const { uid } = req.user;
-    const { folderId, aptId } = req.body;
+    const { folderId, apartmentId } = req.params;
 
     const folderRef = folderCollection.doc(folderId);
     const folderDoc = await folderRef.get();
@@ -1884,7 +1884,7 @@ app.post('/api/folders/:id/apartments/:apartmentId', authenticate, async (req, r
     }
 
     let apartments = folderDoc.data()?.apartments || [];
-    apartments = apartments.filter((id: string) => id !== aptId);
+    apartments = apartments.filter((id: string) => id !== apartmentId);
     await folderRef.update({ apartments });
     return res.status(200).send('Apartment removed from folder successfully');
   } catch (err) {
@@ -1893,4 +1893,30 @@ app.post('/api/folders/:id/apartments/:apartmentId', authenticate, async (req, r
   }
 });
 
+// Endpoint to get all apartments in a folder
+app.get('/api/folders/:folderId/apartments', authenticate, async (req, res) => {
+  try {
+    if (!req.user) throw new Error('Not authenticated');
+    const { uid } = req.user;
+    const { folderId } = req.params;
+
+    const folderRef = folderCollection.doc(folderId);
+    const folderDoc = await folderRef.get();
+
+    if (!folderDoc.exists) {
+      return res.status(404).send('Folder not found');
+    }
+
+    if (folderDoc.data()?.userId !== uid) {
+      return res.status(403).send('Unauthorized to access this folder');
+    }
+
+    const apartments = folderDoc.data()?.apartments || [];
+    return res.status(200).json(apartments);
+  } catch (err) {
+    console.error(err);
+    return res.status(500).send('Error fetching apartments from folder');
+  }
+});
+
 export default app;

frontend/src/App.tsx

@@ -6,6 +6,8 @@ import FAQPage from './pages/FAQPage';
 import ReviewPage from './pages/ReviewPage';
 import LandlordPage from './pages/LandlordPage';
 import ProfilePage from './pages/ProfilePage';
+import FolderPage from './pages/FolderPage';
+import FolderDetailPage from './pages/FolderDetailPage';
 import BookmarksPage from './pages/BookmarksPage';
 import { ThemeProvider } from '@material-ui/core';
 import { createTheme } from '@material-ui/core/styles';
@@ -137,6 +139,15 @@ const App = (): ReactElement => {
               path="/bookmarks"
               component={() => <BookmarksPage user={user} setUser={setUser} />}
             />
+            <Route
+              exact
+              path="/folders"
+              component={() => <FolderPage user={user} setUser={setUser} />}
+            />
+            <Route
+              path="/folders/:folderId"
+              component={() => <FolderDetailPage user={user} setUser={setUser} />}
+            />
             <Route
               path="/apartment/:aptId"
               component={() => <ApartmentPage user={user} setUser={setUser} />}

frontend/src/components/Folder/AddToFolderModal.tsx

@@ -0,0 +1,294 @@
+import React, { useState, useEffect } from 'react';
+import {
+  Dialog,
+  DialogTitle,
+  DialogContent,
+  DialogActions,
+  Button,
+  List,
+  ListItem,
+  ListItemText,
+  Checkbox,
+  TextField,
+  Typography,
+  Box,
+  CircularProgress,
+} from '@material-ui/core';
+import { makeStyles } from '@material-ui/core/styles';
+import AddIcon from '@material-ui/icons/Add';
+import axios from 'axios';
+import { getUser, createAuthHeaders } from '../../utils/firebase';
+import { colors } from '../../colors';
+
+const useStyles = makeStyles({
+  dialogContent: {
+    minHeight: '300px',
+    maxHeight: '400px',
+  },
+  folderItem: {
+    border: `1px solid ${colors.gray3}`,
+    borderRadius: '8px',
+    marginBottom: '8px',
+    '&:hover': {
+      backgroundColor: colors.gray3,
+    },
+  },
+  createFolderSection: {
+    padding: '16px',
+    backgroundColor: colors.gray3,
+    borderRadius: '8px',
+    marginTop: '16px',
+  },
+  addButton: {
+    backgroundColor: colors.red1,
+    color: 'white',
+    '&:hover': {
+      backgroundColor: colors.red2,
+    },
+  },
+});
+
+type Folder = {
+  id: string;
+  name: string;
+  userId: string;
+  createdAt: any;
+  apartments?: string[];
+};
+
+type Props = {
+  open: boolean;
+  onClose: () => void;
+  apartmentId: string;
+  apartmentName: string;
+  user: firebase.User | null;
+  setUser: React.Dispatch<React.SetStateAction<firebase.User | null>>;
+  onSuccess: () => void;
+};
+
+const AddToFolderModal = ({
+  open,
+  onClose,
+  apartmentId,
+  apartmentName,
+  user,
+  setUser,
+  onSuccess,
+}: Props) => {
+  const classes = useStyles();
+  const [folders, setFolders] = useState<Folder[]>([]);
+  const [selectedFolders, setSelectedFolders] = useState<Set<string>>(new Set());
+  const [loading, setLoading] = useState(false);
+  const [showCreateNew, setShowCreateNew] = useState(false);
+  const [newFolderName, setNewFolderName] = useState('');
+  const [error, setError] = useState('');
+
+  useEffect(() => {
+    if (open) {
+      fetchFolders();
+    }
+  }, [open]);
+
+  const fetchFolders = async () => {
+    try {
+      setLoading(true);
+      if (!user) {
+        const loggedInUser = await getUser(true);
+        setUser(loggedInUser);
+        if (!loggedInUser) return;
+      }
+      const token = await user!.getIdToken(true);
+      const response = await axios.get('/api/folders', createAuthHeaders(token));
+      setFolders(response.data);
+
+      // Pre-select folders that already contain this apartment
+      const preSelected = new Set<string>();
+      response.data.forEach((folder: Folder) => {
+        if (folder.apartments?.includes(apartmentId)) {
+          preSelected.add(folder.id);
+        }
+      });
+      setSelectedFolders(preSelected);
+    } catch (err) {
+      console.error('Error fetching folders:', err);
+      setError('Failed to load folders');
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  const handleToggleFolder = (folderId: string) => {
+    setSelectedFolders((prev) => {
+      const newSet = new Set(prev);
+      if (newSet.has(folderId)) {
+        newSet.delete(folderId);
+      } else {
+        newSet.add(folderId);
+      }
+      return newSet;
+    });
+  };
+
+  const handleCreateFolder = async () => {
+    if (!newFolderName.trim()) {
+      setError('Folder name cannot be empty');
+      return;
+    }
+    try {
+      if (!user) {
+        const loggedInUser = await getUser(true);
+        setUser(loggedInUser);
+        if (!loggedInUser) return;
+      }
+      const token = await user!.getIdToken(true);
+      const response = await axios.post(
+        '/api/folders',
+        { folderName: newFolderName },
+        createAuthHeaders(token)
+      );
+      const newFolder = response.data;
+      setFolders([...folders, newFolder]);
+      setSelectedFolders((prev) => new Set(prev).add(newFolder.id));
+      setNewFolderName('');
+      setShowCreateNew(false);
+    } catch (err) {
+      console.error('Error creating folder:', err);
+      setError('Failed to create folder');
+    }
+  };
+
+  const handleSave = async () => {
+    try {
+      setLoading(true);
+      if (!user) {
+        const loggedInUser = await getUser(true);
+        setUser(loggedInUser);
+        if (!loggedInUser) return;
+      }
+      const token = await user!.getIdToken(true);
+
+      // Determine which folders need to be added/removed
+      const currentFolders = folders.filter((f) => f.apartments?.includes(apartmentId));
+      const currentFolderIds = new Set(currentFolders.map((f) => f.id));
+
+      // Add apartment to newly selected folders
+      for (const folderId of selectedFolders) {
+        if (!currentFolderIds.has(folderId)) {
+          await axios.post(
+            `/api/folders/${folderId}/apartments`,
+            { aptId: apartmentId },
+            createAuthHeaders(token)
+          );
+        }
+      }
+
+      // Remove apartment from deselected folders
+      for (const folder of currentFolders) {
+        if (!selectedFolders.has(folder.id)) {
+          await axios.delete(
+            `/api/folders/${folder.id}/apartments/${apartmentId}`,
+            createAuthHeaders(token)
+          );
+        }
+      }
+
+      onSuccess();
+      onClose();
+    } catch (err) {
+      console.error('Error updating folders:', err);
+      setError('Failed to update folders');
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  return (
+    <Dialog open={open} onClose={onClose} maxWidth="sm" fullWidth>
+      <DialogTitle>Add "{apartmentName}" to Folder</DialogTitle>
+      <DialogContent className={classes.dialogContent}>
+        {loading && folders.length === 0 ? (
+          <Box display="flex" justifyContent="center" alignItems="center" minHeight="200px">
+            <CircularProgress />
+          </Box>
+        ) : folders.length === 0 ? (
+          <Box textAlign="center" py={4}>
+            <Typography color="textSecondary">No folders yet. Create one below!</Typography>
+          </Box>
+        ) : (
+          <List>
+            {folders.map((folder) => (
+              <ListItem
+                key={folder.id}
+                button
+                onClick={() => handleToggleFolder(folder.id)}
+                className={classes.folderItem}
+              >
+                <Checkbox
+                  checked={selectedFolders.has(folder.id)}
+                  onChange={() => handleToggleFolder(folder.id)}
+                  color="primary"
+                />
+                <ListItemText
+                  primary={folder.name}
+                  secondary={`${folder.apartments?.length || 0} apartments`}
+                />
+              </ListItem>
+            ))}
+          </List>
+        )}
+
+        {error && (
+          <Typography color="error" variant="body2" style={{ marginTop: '8px' }}>
+            {error}
+          </Typography>
+        )}
+
+        <Box className={classes.createFolderSection}>
+          {!showCreateNew ? (
+            <Button
+              startIcon={<AddIcon />}
+              onClick={() => setShowCreateNew(true)}
+              fullWidth
+              variant="outlined"
+            >
+              Create New Folder
+            </Button>
+          ) : (
+            <Box>
+              <TextField
+                autoFocus
+                fullWidth
+                label="New Folder Name"
+                value={newFolderName}
+                onChange={(e) => setNewFolderName(e.target.value)}
+                onKeyPress={(e) => {
+                  if (e.key === 'Enter') {
+                    handleCreateFolder();
+                  }
+                }}
+                variant="outlined"
+                size="small"
+              />
+              <Box display="flex" mt={1} style={{ gap: 8 }}>
+                <Button onClick={handleCreateFolder} className={classes.addButton} size="small">
+                  Create
+                </Button>
+                <Button onClick={() => setShowCreateNew(false)} size="small">
+                  Cancel
+                </Button>
+              </Box>
+            </Box>
+          )}
+        </Box>
+      </DialogContent>
+      <DialogActions>
+        <Button onClick={onClose}>Cancel</Button>
+        <Button onClick={handleSave} color="primary" disabled={loading}>
+          {loading ? <CircularProgress size={24} /> : 'Save'}
+        </Button>
+      </DialogActions>
+    </Dialog>
+  );
+};
+
+export default AddToFolderModal;