refactor(components/hooks): restructure components and hooks directories

- Moved Profile-related components to 'src/components/Profile'
- Moved auth-related hooks to 'src/hooks/auth'
- Organized data-related hooks into 'src/hooks/data'
- Updated paths in various files to match the new structure

src/App.jsx

@@ -1,15 +1,14 @@
 import React, { useState } from 'react';
 
+import Footer from '@components/common/Footer';
+import Header from '@components/common/Header';
+import GroupsPage from '@components/GroupsPage';
+import HomePage from '@components/HomePage';
+import EditProfile from '@components/Profile/EditProfile';
+import ProfilePage from '@components/Profile/ProfilePage';
 import { ThemeProvider } from '@mui/material/styles';
+import { theme } from '@utils/theme';
 import { BrowserRouter, Routes, Route, useLocation } from 'react-router-dom';
-
-import Footer from './components/common/Footer';
-import Header from './components/common/Header';
-import EditProfile from './components/EditProfile';
-import GroupsPage from './components/GroupsPage';
-import HomePage from './components/HomePage';
-import ProfilePage from './components/ProfilePage';
-import { theme } from './utils/theme';
 import './App.css';
 
 const AppContent = ({ currentPage, setCurrentPage }) => {

src/components/GroupsPage.jsx

@@ -1,14 +1,13 @@
 import { useState, useEffect } from 'react';
 
+import { useAuthState } from '@auth/useAuthState';
+import ProfileCard from '@components/Profile/ProfileCard';
+import StudentCard from '@components/Profile/UserCard';
+import useUserProfile from '@data/useUserProfile';
+import { resolveMatchRequest, getUserMatches } from '@firestore/matches';
+import { fetchUserProfile } from '@firestore/userProfile';
 import { Box, Stack, Typography } from '@mui/material';
 
-import ProfileCard from './ProfileCard';
-import StudentCard from './UserCard';
-import { useAuthState } from '../hooks/useAuthState';
-import useUserProfile from '../hooks/useUserProfile';
-import { resolveMatchRequest, getUserMatches } from '../utils/firestore/matches';
-import { fetchUserProfile } from '../utils/firestore/userProfile';
-
 function GroupsPage() {
   const [user] = useAuthState();
   const { userProfile, loading } = useUserProfile(user);

src/components/Home/StudentFilter.jsx

@@ -1,5 +1,6 @@
 import React from 'react';
 
+import useMajors from '@data/useMajors';
 import {
   Box,
   Autocomplete,
@@ -12,8 +13,6 @@ import {
   OutlinedInput,
 } from '@mui/material';
 
-import useMajors from '../../hooks/useMajors';
-
 export default function StudentFilter({
   selectedMajors,
   setSelectedMajors,

src/components/Home/StudentList.jsx

@@ -1,12 +1,11 @@
 import React from 'react';
 
+import CustomPagination from '@components/common/CustomPagination';
+import StudentCard from '@components/Profile/UserCard';
+import useStudentData from '@data/useStudentData';
+import usePagination from '@hooks/utils/usePagination';
 import { Box, Stack, Typography } from '@mui/material';
-
-import usePagination from '../../hooks/usePagination';
-import useStudentData from '../../hooks/useStudentData';
-import { createMatch } from '../../utils/firestore/matches';
-import CustomPagination from '../common/CustomPagination';
-import StudentCard from '../UserCard';
+import { createMatch } from '@utils/firestore/matches';
 
 export default function StudentList({
   userProfile,

src/components/HomePage.jsx

@@ -1,13 +1,12 @@
 import React, { useState, useEffect } from 'react';
 
+import { useAuthState } from '@auth/useAuthState';
+import StudentFilter from '@components/Home/StudentFilter';
+import StudentList from '@components/Home/StudentList';
+import useUserProfile from '@data/useUserProfile';
 import { Box, CircularProgress, Typography } from '@mui/material';
 import { useNavigate } from 'react-router-dom';
 
-import StudentFilter from './Home/StudentFilter';
-import StudentList from './Home/StudentList';
-import { useAuthState } from '../hooks/useAuthState';
-import useUserProfile from '../hooks/useUserProfile';
-
 export default function HomePage() {
   const [user] = useAuthState();
   const { userProfile, requestedUsers, setRequestedUsers, matchedUserUids, loading } =

src/components/EditProfile.jsx → src/components/Profile/EditProfile.jsx

@@ -1,5 +1,7 @@
 import React from 'react';
 
+import { useAuthState } from '@auth/useAuthState';
+import useEditProfileForm from '@hooks/useEditProfileForm';
 import ArrowBackIcon from '@mui/icons-material/ArrowBack';
 import {
   TextField,
@@ -11,9 +13,6 @@ import {
 } from '@mui/material';
 import { useNavigate } from 'react-router-dom';
 
-import { useAuthState } from '../hooks/useAuthState';
-import useEditProfileForm from '../hooks/useEditProfileForm';
-
 const EditProfile = () => {
   const [user] = useAuthState();
   const {

src/components/ProfileCard.jsx → src/components/Profile/ProfileCard.jsx

@@ -1,10 +1,9 @@
 import React from 'react';
 
+import { useCopyToClipboard } from '@hooks/utils/useCopyToClipboard';
 import { Avatar, Box, Card, CardContent, CardHeader, Modal, Typography } from '@mui/material';
 import { useTheme, lighten } from '@mui/system';
 
-import { useCopyToClipboard } from '../hooks/useCopyToClipboard';
-
 export default function ProfileCard({ profileData, open, onClose }) {
   const theme = useTheme();
   const { handleCopyToClipboard, SnackbarComponent } = useCopyToClipboard();

src/components/ProfilePage.jsx → src/components/Profile/ProfilePage.jsx

@@ -1,5 +1,6 @@
 import React, { useState } from 'react';
 
+import useUserProfile from '@data/useUserProfile';
 import { Email, Phone, School, CalendarToday, ListAlt } from '@mui/icons-material';
 import {
   Avatar,
@@ -16,7 +17,6 @@ import {
 import { useParams, useNavigate } from 'react-router-dom';
 
 import SignOutDialog from './SignOutDialog';
-import useUserProfile from '../hooks/useUserProfile';
 
 export default function ProfilePage() {
   const { id } = useParams();

src/components/SignOutDialog.jsx → src/components/Profile/SignOutDialog.jsx

@@ -8,10 +8,9 @@ import {
   DialogTitle,
   Button,
 } from '@mui/material';
+import { handleSignOut } from '@utils/auth';
 import { useNavigate } from 'react-router-dom';
 
-import { handleSignOut } from '../utils/auth';
-
 export default function SignOutDialog({ open, onClose }) {
   const navigate = useNavigate();
 

src/components/common/Footer.jsx

@@ -4,10 +4,10 @@ import GroupsIcon from '@mui/icons-material/Groups';
 import HomeIcon from '@mui/icons-material/Home';
 import { Box, BottomNavigation, BottomNavigationAction } from '@mui/material';
 import { useTheme } from '@mui/material/styles';
+import { navigateToPage } from '@utils/navigateToPage';
 import { useNavigate } from 'react-router-dom';
 
 // import MessageIcon from '@mui/icons-material/Message';
-import { navigateToPage } from '../../utils/navigateToPage';
 
 export default function Footer({ currentPage, setCurrentPage }) {
   const navigate = useNavigate();

src/components/common/Header.jsx

@@ -1,12 +1,11 @@
 import React from 'react';
 
+import { useAuthNavigation } from '@auth/useAuthNavigation';
 import { ArrowBack } from '@mui/icons-material';
 import { AppBar, Toolbar, Typography, IconButton, Avatar, Button, Box } from '@mui/material';
 import { useTheme } from '@mui/material/styles';
 import { useNavigate, useLocation } from 'react-router-dom';
 
-import { useAuthNavigation } from '../../hooks/useAuthNavigation';
-
 export default function Header() {
   const { user, handleProfileClick, signInAndCheckFirstTimeUser } = useAuthNavigation();
   const theme = useTheme();

src/hooks/useAuthNavigation.js → src/hooks/auth/useAuthNavigation.js

@@ -1,8 +1,7 @@
+import { useAuthState } from '@auth/useAuthState';
+import { handleSignIn } from '@utils/auth';
 import { useNavigate } from 'react-router-dom';
 
-import { useAuthState } from './useAuthState';
-import { handleSignIn } from '../utils/auth';
-
 export const useAuthNavigation = () => {
   const [user] = useAuthState();
   const navigate = useNavigate();

src/hooks/useAuthState.js → src/hooks/auth/useAuthState.js

@@ -1,9 +1,8 @@
 import { useEffect, useState } from 'react';
 
+import { auth } from '@utils/firebaseConfig';
 import { onAuthStateChanged } from 'firebase/auth';
 
-import { auth } from '../utils/firebaseConfig';
-
 // Hook to get the current user
 export const useAuthState = () => {
   const [user, setUser] = useState(null);

src/hooks/useMajors.js → src/hooks/data/useMajors.js

@@ -1,6 +1,6 @@
 import { useEffect, useState } from 'react';
 
-import { getMajors } from '../utils/firestore/general';
+import { getMajors } from '@firestore/general';
 
 export default function useMajors() {
   const [majorsList, setMajorsList] = useState([]);

src/hooks/useStudentData.js → src/hooks/data/useStudentData.js

@@ -1,6 +1,6 @@
 import { useEffect, useState } from 'react';
 
-import { getAllUsers } from '../utils/firestore/general';
+import { getAllUsers } from '@firestore/general';
 
 export default function useStudentData() {
   const [studentData, setStudentData] = useState(null);

src/hooks/useUserProfile.js → src/hooks/data/useUserProfile.js

@@ -1,7 +1,7 @@
 import { useEffect, useState } from 'react';
 
-import { getMatchedUserUids } from '../utils/firestore/matches';
-import { fetchUserProfile } from '../utils/firestore/userProfile';
+import { getMatchedUserUids } from '@firestore/matches';
+import { fetchUserProfile } from '@firestore/userProfile';
 
 export default function useUserProfile(user) {
   const [userProfile, setUserProfile] = useState(null);

src/hooks/useEditProfileForm.js

@@ -1,7 +1,7 @@
 import { useEffect, useState } from 'react';
 
-import { getMajors } from '../utils/firestore/general';
-import { getUserProfile, updateUserProfile } from '../utils/firestore/userProfile';
+import { getMajors } from '@firestore/general';
+import { getUserProfile, updateUserProfile } from '@firestore/userProfile';
 
 const useEditProfileForm = (user) => {
   const [loading, setLoading] = useState(true);

src/utils/auth.js

@@ -1,9 +1,8 @@
+import { fetchAndStoreClassData } from '@firestore/classData';
+import { checkUserProfile } from '@firestore/userProfile';
+import { auth } from '@utils/firebaseConfig';
 import { GoogleAuthProvider, signInWithPopup, signOut } from 'firebase/auth';
 
-import { auth } from './firebaseConfig';
-import { fetchAndStoreClassData } from './firestore/classData';
-import { checkUserProfile } from './firestore/userProfile';
-
 const provider = new GoogleAuthProvider();
 
 // Google Sign-In

src/utils/firestore/classData.js

@@ -1,8 +1,7 @@
 // Functions for fetching and storing class data in Firestore
+import { db } from '@utils/firebaseConfig';
 import { collection, doc, getDoc, setDoc, updateDoc } from 'firebase/firestore';
 
-import { db } from '../firebaseConfig';
-
 // Get latest term from APi and update if necessary
 const checkAndInsertLatestTerm = async () => {
   try {

src/utils/firestore/general.js

@@ -1,8 +1,7 @@
 // General Firestore functions (shared utilities)
+import { db } from '@utils/firebaseConfig';
 import { collection, getDocs, doc, getDoc } from 'firebase/firestore';
 
-import { db } from '../firebaseConfig';
-
 // Get all users from Firestore
 export const getAllUsers = async () => {
   try {

src/utils/firestore/matches.js

@@ -1,3 +1,5 @@
+import { fetchUserProfile } from '@firestore/userProfile';
+import { db } from '@utils/firebaseConfig';
 import {
   doc,
   getDoc,
@@ -7,9 +9,6 @@ import {
   arrayRemove,
 } from 'firebase/firestore';
 
-import { fetchUserProfile } from './userProfile';
-import { db } from '../firebaseConfig';
-
 // Utility function to fetch a match document by ID
 const fetchMatchDocument = async (matchId) => {
   try {

src/utils/firestore/userProfile.js

@@ -1,8 +1,7 @@
 // User profile operations (get, update, check)
+import { db } from '@utils/firebaseConfig';
 import { doc, setDoc, getDoc, updateDoc } from 'firebase/firestore';
 
-import { db } from '../firebaseConfig';
-
 // Unified function to fetch user profile by UID
 // (supports both regular and transaction-based fetches)
 export const fetchUserProfile = async (uid, transaction) => {