+
,
+ el,
+ );
+};
diff --git a/src/components/Elements/Modal/index.ts b/src/components/Elements/Modal/index.ts
new file mode 100644
index 0000000..1ecfeed
--- /dev/null
+++ b/src/components/Elements/Modal/index.ts
@@ -0,0 +1 @@
+export * from "./Modal";
diff --git a/src/components/Elements/Spinner/Spinner.tsx b/src/components/Elements/Spinner/Spinner.tsx
new file mode 100644
index 0000000..b27461d
--- /dev/null
+++ b/src/components/Elements/Spinner/Spinner.tsx
@@ -0,0 +1,50 @@
+const sizes = {
+ sm: "h-4 w-4",
+ md: "h-8 w-8",
+ lg: "h-16 w-16",
+ xl: "h-24 w-24",
+};
+
+const variants = {
+ light: "text-white",
+ primary: "text-blue-600",
+};
+
+export type SpinnerProps = {
+ size?: keyof typeof sizes;
+ variant?: keyof typeof variants;
+ className?: string;
+};
+
+export const Spinner = ({
+ size = "md",
+ variant = "primary",
+ className = "",
+}: SpinnerProps) => {
+ return (
+ <>
+
+ Loading
+
+ );
+};
diff --git a/src/components/Elements/Spinner/index.ts b/src/components/Elements/Spinner/index.ts
new file mode 100644
index 0000000..2f83b96
--- /dev/null
+++ b/src/components/Elements/Spinner/index.ts
@@ -0,0 +1 @@
+export * from "./Spinner";
diff --git a/src/components/Elements/TextField/TextField.tsx b/src/components/Elements/TextField/TextField.tsx
new file mode 100644
index 0000000..efdcb3b
--- /dev/null
+++ b/src/components/Elements/TextField/TextField.tsx
@@ -0,0 +1,46 @@
+import { UseFormRegister, FieldValues, FieldErrors } from "react-hook-form";
+
+type TextFieldProps = {
+ name: string;
+ label: string;
+ register: UseFormRegister
+
+ {children}
+
+
+
+
+ {errors[name] && typeof errors[name]!.message === "string" && (
+
+ );
+};
diff --git a/src/components/Elements/TextField/index.ts b/src/components/Elements/TextField/index.ts
new file mode 100644
index 0000000..79aaa71
--- /dev/null
+++ b/src/components/Elements/TextField/index.ts
@@ -0,0 +1 @@
+export * from "./TextField";
diff --git a/src/components/Elements/index.ts b/src/components/Elements/index.ts
new file mode 100644
index 0000000..0d072e9
--- /dev/null
+++ b/src/components/Elements/index.ts
@@ -0,0 +1,3 @@
+export * from "./Modal";
+export * from "./Spinner";
+export * from "./TextField";
diff --git a/src/components/ImageGallery/ImageGallery.tsx b/src/components/ImageGallery/ImageGallery.tsx
new file mode 100644
index 0000000..bd1e665
--- /dev/null
+++ b/src/components/ImageGallery/ImageGallery.tsx
@@ -0,0 +1,35 @@
+import { useState } from "react";
+
+export const ImageGallery = ({ images }: { images: string[] }) => {
+ const [selectedImage, setSelectedImage] = useState(images[0]);
+
+ return (
+ + {errors[name]!.message as string} +
+ )} +
+
+ );
+};
+
+export default ImageGallery;
diff --git a/src/components/ImageGallery/index.ts b/src/components/ImageGallery/index.ts
new file mode 100644
index 0000000..ba7656e
--- /dev/null
+++ b/src/components/ImageGallery/index.ts
@@ -0,0 +1 @@
+export * from "./ImageGallery";
diff --git a/src/components/Layout.tsx b/src/components/Layout.tsx
new file mode 100644
index 0000000..0e89992
--- /dev/null
+++ b/src/components/Layout.tsx
@@ -0,0 +1,333 @@
+import { useAuth } from "@/hooks";
+import { NavLink, Link } from "react-router-dom";
+import React, { useState } from "react";
+import { Modal } from "./Elements";
+import { postFeedback } from "@/features/dashboard/api";
+
+// // Use this to implement dropdown Sign out later
+// export const Dashboard = () => {
+// const { logoutFn } = useAuth();
+// };
+
+export const Layout = ({ children }: { children: React.ReactNode }) => {
+ const { logoutFn, user } = useAuth();
+
+ const [isDropdownOpen, setIsDropdownOpen] = useState(false);
+ const [isFeedbackModalOpen, setIsFeedbackModalOpen] = useState(false);
+ const [feedbackText, setFeedbackText] = useState("");
+ const [appRating, setAppRating] = useState(5);
+
+ const toggleDropdown = () => setIsDropdownOpen(!isDropdownOpen);
+ const closeDropdown = () => setIsDropdownOpen(false);
+
+ const handleFeedbackFormSubmit = async () => {
+ await postFeedback(
+ { feedbackText, appRating },
+ user?.firebaseUser.uid ?? "",
+ );
+ setIsFeedbackModalOpen(false);
+ };
+
+ return (
+
+ 
+
+
+ {images.map((url, index) => (
+ 
setSelectedImage(url)}
+ className={`shadow-md rounded-md w-24 h-24 object-cover cursor-pointer ${
+ selectedImage === url ? "ring-2 ring-blue-500" : ""
+ }`}
+ />
+ ))}
+
+
+
+
+
+
+ {children}
+
+
+ {
+ setIsFeedbackModalOpen(false);
+ }}
+ >
+
+
+ );
+};
diff --git a/src/components/SingleListing/SingleListing.tsx b/src/components/SingleListing/SingleListing.tsx
new file mode 100644
index 0000000..64b6894
--- /dev/null
+++ b/src/components/SingleListing/SingleListing.tsx
@@ -0,0 +1,42 @@
+import { Listing } from "@/types";
+import { useNavigate } from "react-router-dom";
+
+export const SingleListing = ({ listing }: { listing: Listing }) => {
+ const navigate = useNavigate();
+
+ const formatPrice = (price) => {
+ return new Intl.NumberFormat("en-US", {
+ style: "currency",
+ currency: "USD",
+ minimumFractionDigits: 2,
+ }).format(price);
+ };
+
+ return (
+
+
+ Feedback?
+ + navigate(`/listing/${listing.id}`)}
+ className="w-full sm:w-1/2 md:w-1/3 lg:w-1/4 p-2 cursor-pointer"
+ >
+
+ );
+};
diff --git a/src/components/SingleListing/index.ts b/src/components/SingleListing/index.ts
new file mode 100644
index 0000000..c80773f
--- /dev/null
+++ b/src/components/SingleListing/index.ts
@@ -0,0 +1 @@
+export * from "./SingleListing";
diff --git a/src/features/auth/index.ts b/src/features/auth/index.ts
new file mode 100644
index 0000000..9bf9b1b
--- /dev/null
+++ b/src/features/auth/index.ts
@@ -0,0 +1 @@
+export * from "./routes";
diff --git a/src/features/auth/routes/Login.tsx b/src/features/auth/routes/Login.tsx
new file mode 100644
index 0000000..511b6de
--- /dev/null
+++ b/src/features/auth/routes/Login.tsx
@@ -0,0 +1,117 @@
+import { Link, useNavigate } from "react-router-dom";
+import { useAuth } from "@/hooks";
+import { z } from "zod";
+import { useForm } from "react-hook-form";
+import { zodResolver } from "@hookform/resolvers/zod";
+import { TextField } from "@/components/Elements";
+
+const loginSchema = z.object({
+ email: z.string().email("Invalid email format"),
+ password: z.string().min(8, "Password must be at least 8 characters"),
+});
+
+export const Login = () => {
+ const { user, loginFn } = useAuth();
+ const navigate = useNavigate();
+
+ if (user) {
+ navigate("/");
+ }
+
+ const {
+ register,
+ handleSubmit,
+ formState: { errors },
+ } = useForm
+ {/* TODO: get image[0] from listing */}
+
+
+
+
+ {listing.title}
+ {/* TODO: redirect to ind listings, get price */}
+ {/* Seller: {listing.author}
*/} ++ {formatPrice(listing.price)} +
+
+
+
+ Georgia Tech Marketplace
+
+
+
+
+
+
+ + Login +
+ +
+
+ {/* REPLACE SRC WITH PROPER SVG */}
+
+ Georgia Tech Marketplace
+
+
+
+
+
+
+ + Create an Account +
+ +
+
+
+ Georgia Tech Marketplace
+
+
+ );
+};
diff --git a/src/features/auth/routes/index.tsx b/src/features/auth/routes/index.tsx
new file mode 100644
index 0000000..1e5fa51
--- /dev/null
+++ b/src/features/auth/routes/index.tsx
@@ -0,0 +1,17 @@
+import { Route, Routes } from "react-router-dom";
+
+import { Login } from "./Login";
+import { Register } from "./Register";
+import { Verify } from "./Verify";
+import { Logout } from "./Logout";
+
+export const AuthRoutes = () => {
+ return (
+
+
+ + Verify Your Email +
++ Thanks for signing up! Before getting started, please verify your + email by checking your email at {user?.email} for an email. +
+
+
+
+
+
+ );
+ }
+
+ return (
+
+ {/* TODO: Add search bar */}
+
+ );
+};
diff --git a/src/features/chat/index.ts b/src/features/chat/index.ts
new file mode 100644
index 0000000..9bf9b1b
--- /dev/null
+++ b/src/features/chat/index.ts
@@ -0,0 +1 @@
+export * from "./routes";
diff --git a/src/features/chat/routes/Chat.tsx b/src/features/chat/routes/Chat.tsx
new file mode 100644
index 0000000..a1f0f26
--- /dev/null
+++ b/src/features/chat/routes/Chat.tsx
@@ -0,0 +1,157 @@
+import { useAuth } from "@/hooks";
+import { SingleChat } from "../components/SingleChat";
+import { useLastMessageForConversations } from "../api";
+import { useState, useEffect, useRef } from "react";
+import { Conversation } from "../types";
+
+export const Chat = () => {
+ const { user } = useAuth();
+ const chats = useLastMessageForConversations(user?.firebaseUser.uid ?? "");
+ const [selectedConversation, setSelectedConversation] =
+ useState
+
+
+ navigate(`/profile/${sender?.id}`)}
+ >
+
+
+ 
+
+ + {sender?.name} +
+
+
+
+
+
+ {/* 
*/}
+
+ */}
+
+ {messages.messages.map((message: Message, index) =>
+ message.sender === user?.firebaseUser.uid ? (
+ // Message sent by the user
+
+
+
+ ) : (
+ // Message received by the user
+
+
+
+
+ {new Date(message.createdAt).toLocaleTimeString([], {
+ hourCycle: "h23",
+ hour: "2-digit",
+ minute: "2-digit",
+ })}{" "}
+
+
+ + {message.content} +
+
+
+ ),
+ )}
+
+
+
+
+ {new Date(message.createdAt).toLocaleTimeString([], {
+ hourCycle: "h23",
+ hour: "2-digit",
+ minute: "2-digit",
+ })}{" "}
+
+
+ + {message.content} +
+
+
+
+
+
+
+
+ //
+ // );
+ // }
+
+ useEffect(() => {
+ if (
+ chats.conversations &&
+ chats.conversations.length > 0 &&
+ !defaultConversationSet.current
+ ) {
+ setSelectedConversation(chats.conversations[0]);
+ defaultConversationSet.current = true;
+ }
+ }, [chats.conversations]);
+
+ const filteredConversations = chats.conversations.filter((conversation) => {
+ return conversation.participants.some((participant) =>
+ participant.name.toLowerCase().includes(searchQuery.toLowerCase()),
+ );
+ });
+
+ return (
+
+
+ );
+};
diff --git a/src/features/chat/routes/index.ts b/src/features/chat/routes/index.ts
new file mode 100644
index 0000000..3245daf
--- /dev/null
+++ b/src/features/chat/routes/index.ts
@@ -0,0 +1 @@
+export * from "./Chat";
diff --git a/src/features/chat/types/index.ts b/src/features/chat/types/index.ts
new file mode 100644
index 0000000..0fcca10
--- /dev/null
+++ b/src/features/chat/types/index.ts
@@ -0,0 +1,16 @@
+import { ExternalUserData } from "@/types";
+
+export type Message = {
+ createdAt: Date;
+ sender: string;
+ content: string;
+ id: string;
+};
+
+export type Conversation = {
+ conversationId: string;
+ createdAt: Date;
+ lastMessage: string;
+ lastMessageCreatedAt: Date;
+ participants: ExternalUserData[];
+};
diff --git a/src/features/dashboard/api/getListings.ts b/src/features/dashboard/api/getListings.ts
new file mode 100644
index 0000000..796a8d1
--- /dev/null
+++ b/src/features/dashboard/api/getListings.ts
@@ -0,0 +1,38 @@
+import { useState, useEffect } from "react";
+import { db } from "@/lib/firebase";
+import { collection, query, getDocs, where } from "firebase/firestore";
+import type { Listing } from "@/types";
+
+export const useListings = () => {
+ const [listings, setListings] = useState
+
+ {/* FUNCTION: RETURN ALL OPEN CHATS FOR USER*/} + {filteredConversations.map((chat) => ( +
+ {selectedConversation ? (
+ Chats
+ {/* CAN REMOVE THIS ENTIRE SEARCH SECTION IF NOT IMPLEMENTED LATER */} + +
+
+
+
+
+
+ Search icon
+
+ setSearchQuery(e.target.value)}
+ />
+ + {/* FUNCTION: RETURN ALL OPEN CHATS FOR USER*/} + {filteredConversations.map((chat) => ( +
{
+ setSelectedConversation(chat);
+ }}
+ className="group flex flex-wrap justify-between items-center px-4 py-2 lg:visible hover:bg-navy-blue/80"
+ >
+
+ ))}
+
+
+
+
+ participant.id !== user?.firebaseUser.uid,
+ )?.profilePicture
+ }
+ />
+
+
+
+ + { + chat.participants.find( + (participant) => + participant.id !== user?.firebaseUser.uid, + )?.name + } +
+
+
+
+
+ + {chat.lastMessage} +
++ {chat.lastMessageCreatedAt && + chat.lastMessageCreatedAt.toLocaleTimeString([], { + hour: "2-digit", + minute: "2-digit", + hour12: false, + })} +
+
+
+
+
+ {/* Optional: Add a spinner or a message here */}
+
+ )}
+ There's nothing here yet
+
+
+ );
+ }
+
+ return (
+
+
+ {/* Filters | insert categories */}
+
+ );
+};
diff --git a/src/features/dashboard/routes/index.ts b/src/features/dashboard/routes/index.ts
new file mode 100644
index 0000000..3cf0d27
--- /dev/null
+++ b/src/features/dashboard/routes/index.ts
@@ -0,0 +1 @@
+export * from "./Dashboard";
diff --git a/src/features/listing/api/createConversation.ts b/src/features/listing/api/createConversation.ts
new file mode 100644
index 0000000..dcb0141
--- /dev/null
+++ b/src/features/listing/api/createConversation.ts
@@ -0,0 +1 @@
+export const createConversation = () => {};
diff --git a/src/features/listing/api/favoriteListing.ts b/src/features/listing/api/favoriteListing.ts
new file mode 100644
index 0000000..956f436
--- /dev/null
+++ b/src/features/listing/api/favoriteListing.ts
@@ -0,0 +1,37 @@
+import { db } from "@/lib/firebase";
+import {
+ doc,
+ runTransaction,
+ arrayUnion,
+ arrayRemove,
+} from "firebase/firestore";
+
+// Is for both favoriting and unfavoriting.
+export const favoriteListing = async ({
+ userId,
+ listingId,
+}: {
+ userId: string;
+ listingId: string;
+}) => {
+ const userRef = doc(db, "users", userId);
+ try {
+ await runTransaction(db, async (transaction) => {
+ const userDoc = await transaction.get(userRef);
+ if (!userDoc.exists()) {
+ throw "Document does not exist!";
+ }
+ const userData = userDoc.data();
+ const favorites = userData.favorites || [];
+
+ if (favorites.includes(listingId)) {
+ transaction.update(userRef, { favorites: arrayRemove(listingId) });
+ } else {
+ transaction.update(userRef, { favorites: arrayUnion(listingId) });
+ }
+ });
+ console.log("Transaction successfully committed!");
+ } catch (e) {
+ console.log("Transaction failed: ", e);
+ }
+};
diff --git a/src/features/listing/api/getListing.ts b/src/features/listing/api/getListing.ts
new file mode 100644
index 0000000..ffa80a5
--- /dev/null
+++ b/src/features/listing/api/getListing.ts
@@ -0,0 +1,28 @@
+import { useState, useEffect } from "react";
+import { db } from "@/lib/firebase";
+import { getDoc, doc } from "firebase/firestore";
+import type { Listing } from "@/types";
+
+export const useListing = (id: string) => {
+ const [listing, setListing] = useState
+
+
+ Categories
++
-
+ {[
+ "Apparel",
+ "Bedroom",
+ "Bathroom",
+ "Electronics",
+ "Kitchen",
+ "Office & School Supplies",
+ "Toys & Games",
+ ].map((category) => (
+
- handleCategoryClick(category)} + className={`cursor-pointer flex items-center justify-between p-2 rounded-lg ${ + selectedTag === category ? "bg-gray-200" : "" + }`} + > + + {category} + + {selectedTag === category && ( + + )} + + ))} +
+
+
+
+ All Listings
+
+
+
+
+
+
+
+
+
+
+
+ Search icon
+
+ setSearchQuery(e.target.value)}
+ />
+
+ {paginatedData.map((listing) => (
+
+
+
+ );
+ }
+
+ const handleStatusChange = async (event) => {
+ const isChecked = event.target.checked;
+ await updateListingStatus(id ?? "", isChecked);
+ setIsActive(isChecked);
+ };
+
+ const formatPrice = (price) => {
+ return new Intl.NumberFormat("en-US", {
+ style: "currency",
+ currency: "USD",
+ minimumFractionDigits: 2,
+ }).format(price);
+ };
+
+ return (
+
+
+
+
+
+ );
+};
diff --git a/src/features/listing/routes/Sell.tsx b/src/features/listing/routes/Sell.tsx
new file mode 100644
index 0000000..25fbb17
--- /dev/null
+++ b/src/features/listing/routes/Sell.tsx
@@ -0,0 +1,342 @@
+import { useAuth } from "@/hooks";
+import { useListings } from "../api/getListings";
+import { Spinner, Modal, TextField } from "@/components/Elements";
+import React, { useState, useRef } from "react";
+import { useForm, Controller, SubmitHandler } from "react-hook-form";
+import type { PostListing } from "../types";
+import { postListing } from "../api/postListing";
+import { z } from "zod";
+import { zodResolver } from "@hookform/resolvers/zod";
+import { SingleListing } from "@/components/SingleListing";
+
+const postListingSchema = z.object({
+ title: z.string().min(1, { message: "Title cannot be empty" }),
+ price: z.coerce
+ .number()
+ .positive({ message: "Price must be greater than 0" })
+ .multipleOf(0.01, { message: "Input a valid price" }),
+ description: z.string(),
+ tag: z.string().optional(), // Assuming tag is optional
+ images: z
+ .array(z.any())
+ .refine((images) => images.filter(Boolean).length > 0, {
+ message: "At least one image is required",
+ }),
+});
+
+export const Sell = () => {
+ const { user } = useAuth();
+ const listings = useListings();
+
+ const [isOpen, setIsOpen] = useState(false);
+ const [showCreatedPopup, setShowCreatedPopup] = useState(false);
+ const fileInputRefs = useRef<(HTMLInputElement | null)[]>([]);
+
+ const handleImageChange = (
+ e: React.ChangeEvent
+
+
+
+
+
+
+
+
+ + {listing?.title} +
+ navigate(`/profile/${authorUser.user?.id}`)}
+ id="sellerInfo"
+ >
+
+
+ + Seller:{" "} + + {authorUser.user?.name} + +
+
+
+ + {formatPrice(listing?.price)} +
++ Category: {listing?.tag ?? "None"} +
+ +
+
+ + Your listing is currently:{" "} + + {isActive + ? "Visible to Other Users" + : "Hidden from Other Users"} + +
+ {/* */} + +
+
+
+
+
+
+ +
Description
+{listing?.description}
+
+
+ );
+ }
+
+ return (
+
+ setIsOpen(false)}>
+
+
+
+ {showCreatedPopup && (
+
+ );
+};
diff --git a/src/features/listing/routes/index.ts b/src/features/listing/routes/index.ts
new file mode 100644
index 0000000..376b872
--- /dev/null
+++ b/src/features/listing/routes/index.ts
@@ -0,0 +1,2 @@
+export * from "./ItemListing";
+export * from "./Sell";
diff --git a/src/features/listing/types/index.ts b/src/features/listing/types/index.ts
new file mode 100644
index 0000000..3656bfb
--- /dev/null
+++ b/src/features/listing/types/index.ts
@@ -0,0 +1,2 @@
+import type { Listing } from "@/types";
+export type PostListing = Omit
+ Listing Created
+
+ )}
+
+
+
+ Your Listings
+ +
+ {listings.listings.length > 0 ? (
+ listings.listings.map((listing) => (
+
+ + You have no listings created. +
+ )} +
+
+ );
+ }
+ if (!user) return null;
+
+ return (
+
+ {/* User Avatar */}
+
+ );
+};
diff --git a/src/features/users/routes/Settings.tsx b/src/features/users/routes/Settings.tsx
new file mode 100644
index 0000000..7fd2f81
--- /dev/null
+++ b/src/features/users/routes/Settings.tsx
@@ -0,0 +1,142 @@
+import { TextField } from "@/components/Elements";
+import { useAuth } from "@/hooks/useAuth";
+import { z } from "zod";
+import { SubmitHandler, useForm, Controller } from "react-hook-form";
+import { zodResolver } from "@hookform/resolvers/zod";
+import { putProfile } from "../api";
+import React, { useState } from "react";
+
+const settingsSchema = z.object({
+ name: z.string().min(1),
+ major: z.string().min(1),
+ year: z.enum(["", "Freshman", "Sophomore", "Junior", "Senior", "Graduate"]),
+ profilePicture: z.instanceof(File).optional(),
+});
+
+export const Settings = () => {
+ const { user } = useAuth();
+ const [submissionStatus, setSubmissionStatus] = useState("");
+ const [submissionError, setSubmissionError] = useState("");
+
+ const {
+ register,
+ handleSubmit,
+ control,
+ formState: { errors, touchedFields },
+ } = useForm
+
+ {/* User Information: Name, Year, Major, Sales, etc. */}
+
+ {/* Images need to be square */}
+ 
+
+
+
+
+ {/* Favorited Listings of individual user only */}
+ + {user?.name ?? "George P. Burdell"} +
+{user?.major}
+{user?.year}
+ {/* TODO: Route this button to settings */} +
+ {currentUser?.firebaseUser.uid !== id && (
+
+
+
+
+ )}
+
+
+
+
+ {/* If not currentUser profile, show all created listings of current profile */}
+ {/* TODO: CHANGE TO SHOW THE CORRECT LISTINGS OF THE ID'S CREATED LISTINGS */}
+ + Your Favorited Listings +
++
+ {listings.listings.map((listing) => (
+
+
+
+
+ + {user?.name}'s Listings +
++
+ {listings.listings.map((listing) => (
+
+
+
+