Re-organize frontend folders

frontend/src/presentation/components/AuthLogo.tsx → frontend/src/presentation/components/auth/AuthLogo.tsx

@@ -1,27 +1,27 @@
-import styles from './AuthLogo.module.css';
+import styles from "./AuthLogo.module.css";
 import { Card } from "antd";
-import PeerPrepLogo from '../../assets/images/PeerPrepLogo.png';
-import { useLocation } from 'react-router-dom';
-import { MESSAGES } from 'presentation/utils/constants';
-import { SignInSignUpButton } from './buttons/SignInSignUpButton';
+import PeerPrepLogo from "../../../assets/images/PeerPrepLogo.png"
+import { useLocation } from "react-router-dom";
+import { MESSAGES } from "presentation/utils/constants";
+import { SignInSignUpButton } from "../common/buttons/SignInSignUpButton";
 
 export const AuthLogo: React.FC = () => {
     const location = useLocation();
-    const isRegister = location.pathname.includes('register');
+    const isRegister = location.pathname.includes("register");
     return (
         <div className={styles.cardWrapper}>
             <Card className={styles.card}>
                 <div className={styles.content}>
                     <div>
                         <img src={PeerPrepLogo} alt="PeerPrep Logo" width="60%" />
                     </div>
-                    
+
                     <div className={styles.promptContainer}>
-                        <h3 className={styles.h3}>{isRegister ?  MESSAGES.SIGN_IN_PROMPT : MESSAGES.SIGN_UP_PROMPT}</h3>
+                        <h3 className={styles.h3}>{isRegister ? MESSAGES.SIGN_IN_PROMPT : MESSAGES.SIGN_UP_PROMPT}</h3>
                         <SignInSignUpButton />
                     </div>
                 </div>
             </Card>
         </div>
     );
-};
+};

frontend/src/presentation/components/SignUpForm/SignUpForm.tsx → frontend/src/presentation/components/auth/SignUpForm/SignUpForm.tsx

@@ -9,7 +9,7 @@ import { useForm } from "antd/es/form/Form";
 import { IUserRegisterInput } from "domain/users/IUser";
 import { toast } from "react-toastify";
 import { getEqualityValidator, getPasswordStrengthValidator, validateMessages } from "presentation/utils/formUtils";
-import { PasswordInputLabel } from "../common/PasswordInputLabel/PasswordInputLabel";
+import { PasswordInputLabel } from "presentation/components/common/PasswordInputLabel/PasswordInputLabel";
 
 export const SignUpForm: React.FC = () => {
     const [form] = useForm();

frontend/src/presentation/components/LandingComponent.tsx → frontend/src/presentation/components/home/LandingComponent.tsx

@@ -1,9 +1,9 @@
 import React from "react";
 import { Card } from "antd";
 import styles from "./LandingComponent.module.css";
-import { AddQuestionButton } from "./buttons/AddQuestionButton";
+import { AddQuestionButton } from "../common/buttons/AddQuestionButton";
 import { LANDING_CARD_TEXT } from "presentation/utils/constants";
-import { UserCard } from "./cards/UserCard";
+import { UserCard } from "../common/cards/UserCard";
 
 interface LandingComponentProps {
     onAddQuestion?: () => void;

frontend/src/presentation/components/ProfileContainer.tsx → frontend/src/presentation/components/home/ProfileContainer.tsx

@@ -1,12 +1,12 @@
 import styles from "./ProfileContainer.module.css";
 import React, { useState } from "react";
-import SampleProfilePicture from "../../assets/images/sample-profile-picture.jpg";
+import SampleProfilePicture from "../../../assets/images/sample-profile-picture.jpg";
 import { EditOutlined, MailOutlined, UnorderedListOutlined, UserOutlined } from "@ant-design/icons";
 import { useAuth } from "domain/context/AuthContext";
 import { Modal } from "antd";
-import { UpdateProfileForm } from "./UpdateProfileForm/UpdateProfileForm";
+import { UpdateProfileForm } from "../users/UpdateProfileForm/UpdateProfileForm";
 import { Link } from "react-router-dom";
-import { DeleteUserForm } from "./DeleteUserForm/DeleteUserForm";
+import { DeleteUserForm } from "../users/DeleteUserForm/DeleteUserForm";
 
 export const ProfileContainer: React.FC = () => {
     const { user, isUserAdmin } = useAuth();

frontend/src/presentation/components/RecentAttemptsTable.tsx → frontend/src/presentation/components/home/RecentAttemptsTable.tsx

@@ -5,7 +5,7 @@ import type { ColumnsType } from 'antd/es/table';
 import styles from "./RecentAttemptsTable.module.css";
 import { HistoryEntry } from "domain/entities/HistoryEntry";
 import { historyUseCases } from "domain/usecases/HistoryUseCases";
-import { ReactMarkdown } from "./common/ReactMarkdown";
+import { ReactMarkdown } from "../common/ReactMarkdown";
 import TabPane from "antd/es/tabs/TabPane";
 import { useNavigate } from "react-router-dom";
 import { EyeOutlined, TeamOutlined } from "@ant-design/icons";

frontend/src/presentation/components/EditQuestionForm/EditQuestionForm.tsx → frontend/src/presentation/components/questions/EditQuestionForm/EditQuestionForm.tsx

@@ -11,7 +11,7 @@ import { toast } from "react-toastify";
 import { Category } from "domain/entities/Category";
 import { questionUseCases } from "domain/usecases/QuestionUseCases";
 import { difficultyOptions } from "presentation/utils/QuestionUtils";
-import { ReactMarkdown } from "../common/ReactMarkdown";
+import { ReactMarkdown } from "presentation/components/common/ReactMarkdown";
 import axios from "axios";
 import { validateMessages } from "presentation/utils/formUtils";
 

frontend/src/presentation/components/NewQuestionForm/NewQuestionForm.tsx → frontend/src/presentation/components/questions/NewQuestionForm/NewQuestionForm.tsx

@@ -10,7 +10,7 @@ import { toast } from "react-toastify";
 import { categoryUseCases } from "domain/usecases/CategoryUseCases";
 import { Category } from "domain/entities/Category";
 import { Question } from "domain/entities/Question";
-import { ReactMarkdown } from "../common/ReactMarkdown";
+import { ReactMarkdown } from "presentation/components/common/ReactMarkdown";
 import axios from "axios";
 import { validateMessages } from "presentation/utils/formUtils";
 
@@ -23,7 +23,7 @@ export const NewQuestionForm: React.FC<NewQuestionFormProps> = ({ onSubmit }) =>
     const [categoryOptions, setCategoryOptions] = useState<{ value: string; label: string }[]>([]);
     const [categories, setCategories] = useState<Category[]>([]);
     const [loadingCategories, setLoadingCategories] = useState<boolean>(false);
-    const [description, setDescription] = useState<string>(initialQuestionInput?.description)
+    const [description, setDescription] = useState<string>(initialQuestionInput?.description);
 
     const { FIELD_TITLE, FIELD_DIFFICULTY, FIELD_DESCRIPTION, FIELD_CATEGORIES, FIELD_URL } = QUESTION_FORM_FIELDS;
 

frontend/src/presentation/components/QuestionDetail.tsx → frontend/src/presentation/components/questions/QuestionDetail/QuestionDetail.tsx

@@ -1,16 +1,16 @@
 // QuestionDetail.tsx
 import React, { useState } from "react";
 import { Tag, Divider, Modal, Button, Card } from "antd";
-import { Question } from "../../domain/entities/Question";
-import { getDifficultyColor } from "../utils/QuestionUtils";
+import { Question } from "../../../../domain/entities/Question";
+import { getDifficultyColor } from "presentation/utils/QuestionUtils";
 import styles from "./QuestionDetail.module.css";
-import { EditQuestionForm } from "./EditQuestionForm/EditQuestionForm";
-import { ReactMarkdown } from "./common/ReactMarkdown";
+import { EditQuestionForm } from "../EditQuestionForm/EditQuestionForm";
+import { ReactMarkdown } from "presentation/components/common/ReactMarkdown";
 import { DeleteOutlined, EditOutlined, PlayCircleOutlined } from "@ant-design/icons";
 import { questionUseCases } from "domain/usecases/QuestionUseCases";
 import { toast } from "react-toastify";
 import axios from "axios";
-import { UserCard } from "./cards/UserCard";
+import { UserCard } from "presentation/components/common/cards/UserCard";
 
 interface QuestionDetailProps {
     question: Question;
@@ -39,8 +39,6 @@ export const QuestionDetail: React.FC<QuestionDetailProps> = ({
         onEdit?.(updatedQuestion);
     };
 
-
-
     const handleDeleteQuestion = async () => {
         try {
             await questionUseCases.deleteQuestion(question._id);

frontend/src/presentation/components/questions/QuestionList/QuestionCard.tsx

@@ -0,0 +1,41 @@
+// QuestionCard.tsx
+
+import React from "react";
+import { Card, Tag } from "antd";
+import { Question } from "../../../../domain/entities/Question";
+import styles from "./QuestionCard.module.css";
+import { getDifficultyColor } from "presentation/utils/QuestionUtils";
+
+interface QuestionCardProps {
+    question: Question;
+    isSelected: boolean;
+    onClick: () => void;
+    isNarrow: boolean;
+}
+
+export const QuestionCard: React.FC<QuestionCardProps> = ({ question, isSelected, onClick, isNarrow }) => {
+    return (
+        <Card
+            className={`${styles.card} ${isSelected ? styles.selectedCard : ""} ${isNarrow ? styles.narrowCard : ""}`}
+            hoverable
+            onClick={onClick}
+        >
+            <div className={styles.header}>
+                <h2 className={styles.title}>{question.title}</h2>
+            </div>
+
+            <div className={styles.footer}>
+                <Tag color={getDifficultyColor(question.difficulty)} className={styles.difficultyTag}>
+                    {question.difficulty}
+                </Tag>
+                <div className={styles.categoriesContainer}>
+                    {question.categories.map((category) => (
+                        <Tag key={category._id} color="blue" className={styles.categoryTag}>
+                            {category.name}
+                        </Tag>
+                    ))}
+                </div>
+            </div>
+        </Card>
+    );
+};

frontend/src/presentation/components/QuestionFilters.tsx → frontend/src/presentation/components/questions/QuestionList/QuestionFilters.tsx

@@ -3,10 +3,10 @@
 import { DownOutlined } from "@ant-design/icons";
 import styles from "./QuestionFilters.module.css";
 import { difficultyOptions } from "presentation/utils/QuestionUtils";
-import { CategoryFilter } from "./Category/CategoryFilter";
+import { CategoryFilter } from "../Category/CategoryFilter";
 import { categoryUseCases } from "domain/usecases/CategoryUseCases";
 import { Category } from "domain/entities/Category";
-import { SearchBar } from "./SearchBar";
+import { SearchBar } from "../../common/SearchBar";
 
 interface QuestionFiltersProps {
     onFiltersChange?: (filters: {
@@ -65,7 +65,7 @@
             selectedCategories,
             searchTerm
         });
     }, [selectedDifficulty, selectedCategories, searchTerm]);
 
     useEffect(() => {
         memoizedOnFiltersChange();

frontend/src/presentation/components/QuestionList.tsx → frontend/src/presentation/components/questions/QuestionList/QuestionList.tsx

@@ -1,6 +1,6 @@
 import React, { useState, useEffect } from "react";
 import { List, Spin, Alert } from "antd";
-import { Question } from "../../domain/entities/Question";
+import { Question } from "../../../../domain/entities/Question";
 import { QuestionCard } from "./QuestionCard";
 import { QuestionFilters } from "./QuestionFilters";
 import { Category } from "domain/entities/Category";

frontend/src/presentation/components/UpdateProfileForm/UpdateProfileForm.tsx → frontend/src/presentation/components/users/UpdateProfileForm/UpdateProfileForm.tsx

@@ -10,7 +10,7 @@ import { handleError } from "presentation/utils/errorHandler";
 import { useForm } from "antd/es/form/Form";
 import { IUserUpdateInput } from "domain/users/IUser";
 import { getEqualityValidator, getPasswordStrengthValidator, validateMessages } from "presentation/utils/formUtils";
-import { PasswordInputLabel } from "../common/PasswordInputLabel/PasswordInputLabel";
+import { PasswordInputLabel } from "presentation/components/common/PasswordInputLabel/PasswordInputLabel";
 
 interface UpdateProfileFormProps {
     user: User;