- {DOMAINS.map((domain) => {
+ {distinctSubjectData.tags.map((domain) => {
const isSelected = domains.includes(domain);
const isNemamSelected = domains.includes("Немам");
@@ -476,5 +602,5 @@
- {TECHNOLOGIES.map((tech) => {
+ {distinctSubjectData.technologies.map((tech) => {
const isSelected = technologies.includes(tech);
const isNemamSelected = technologies.includes("Немам");
@@ -529,4 +655,5 @@
key={ev}
onClick={() => {
+ // todo: sredi ova
if (ev === "Немам") {
if (evaluation.includes("Немам")) {
@@ -562,24 +689,48 @@
-
- Омилени професори
-
+
+
+ Омилени професори
+
+ {studyTrack != "" && (
+ setProfessorSearchTerm(e.target.value)}
+ value={professorsSearchTerm}
+ type="text"
+ className="w-60 px-3 py-2.5 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-blue-500 focus:border-blue-500 text-gray-900 text-sm"
+ placeholder="Пребарај професор"
+ />
+ )}
+
- {professors.map((prof) => (
+ {filteredProfessors
+ .slice(0, showProfessors ? undefined : 10)
+ .map((prof) => (
+
+ ))}
+ {filteredProfessors.length == 0 && (
+
Нема таков професор
+ )}
+ {filteredProfessors.length > 10 && (
- ))}
+ )}
Index: frontend/src/components/SubjectCatalog/FilterSidebar.tsx
===================================================================
--- frontend/src/components/SubjectCatalog/FilterSidebar.tsx (revision 36797f6a171f176d1b9fe7e9eb66f8a01c69af6f)
+++ frontend/src/components/SubjectCatalog/FilterSidebar.tsx (revision adb1885b31d1369ca9e759cd6011049b7e898e51)
@@ -1,264 +1,304 @@
+import { useState } from "react";
import { PROGRAMS } from "../../constants/subjects";
import { Filters } from "../types";
import { resetFilters } from "./utils";
interface FilterSidebarProps {
- setSearchTerm: (term: string) => void;
- setProfessorSearchTerm: (term: string) => void;
- setAssistantSearchTerm: (term: string) => void;
- setFilters: (filters: (prev: Filters) => Filters) => void;
- filters: Filters;
+ setSearchTerm: (term: string) => void;
+ setProfessorSearchTerm: (term: string) => void;
+ setAssistantSearchTerm: (term: string) => void;
+ setFilters: (filters: (prev: Filters) => Filters) => void;
+ filters: Filters;
+ tags: string[];
}
const FilterSidebar = ({
- setSearchTerm,
- setProfessorSearchTerm,
- setAssistantSearchTerm,
- setFilters,
- filters,
+ setSearchTerm,
+ setProfessorSearchTerm,
+ setAssistantSearchTerm,
+ setFilters,
+ filters,
+ tags,
}: FilterSidebarProps) => {
- return (
-
-
-
Филтри
-
-
-
- {/* filter by season*/}
-
-
Семестар
-
- {["Летен", "Зимски"].map((season) => {
- const seasonValue = season === "Летен" ? "S" : "W";
- return (
-
-
- setFilters((prev) => ({
- ...prev,
- season: prev.season === seasonValue ? "" : seasonValue,
- }))
- }
- checked={filters.season === seasonValue}
- className="h-4 w-4 rounded border-gray-300 text-blue-600"
- />
-
-
- );
- })}
-
-
-
- {/* filter by semester*/}
-
- {/*
Семестар
*/}
-
- {Array.from(Array(8)).map((_, index) => {
- const i = index + 1;
- return (
-
-
- setFilters((prev) => ({
- ...prev,
- semester: prev.semester.includes(i)
- ? prev.semester.filter((item) => item !== i)
- : [...prev.semester, i],
- }))
- }
- checked={filters.semester.includes(i)}
- className="h-4 w-4 rounded border-gray-300 text-blue-600"
- />
-
-
- );
- })}
-
-
- {/* filter by level */}
-
-
Ниво
-
- {Array.from(Array(3)).map((_, index) => {
- const i = index + 1;
- const level = `L${i}`;
- return (
-
-
- setFilters((prev) => ({
- ...prev,
- level: prev.level.includes(i)
- ? prev.level.filter((item) => item !== i)
- : [...prev.level, i],
- }))
- }
- checked={filters.level.includes(i)}
- className="h-4 w-4 rounded border-gray-300 text-blue-600"
- />
-
-
- );
- })}
-
-
- {/* filter by activation*/}
-
-
Активирани
-
- {["Активирани", "Неактивирани"].map((value) => {
- const activeValue =
- value === "Активирани" ? "activated" : "not_activated";
- return (
-
-
- setFilters((prev) => ({
- ...prev,
- activated:
- prev.activated === activeValue ? "" : activeValue,
- }))
- }
- checked={filters.activated === activeValue}
- className="h-4 w-4 rounded border-gray-300 text-blue-600"
- />
-
-
- );
- })}
-
-
- {/* filter by mandatoryFor */}
-
-
Задолжителен за:
-
- {PROGRAMS.map((program) => {
- const programName = program.replace(/\d+$/, "");
- return (
-
-
- setFilters((prev) => ({
- ...prev,
- mandatoryFor: prev.mandatoryFor.includes(program)
- ? prev.mandatoryFor.filter((item) => item !== program)
- : [...prev.mandatoryFor, program],
- }))
- }
- checked={filters.mandatoryFor.includes(program)}
- className="h-4 w-4 rounded border-gray-300 text-blue-600"
- />
-
-
- );
- })}
-
-
- {/* filter by electiveFor */}
-
-
Изборен за:
-
- {PROGRAMS.map((program) => {
- const programName = program.replace(/\d+$/, "");
- return (
-
-
- setFilters((prev) => ({
- ...prev,
- electiveFor: prev.electiveFor.includes(program)
- ? prev.electiveFor.filter((item) => item !== program)
- : [...prev.electiveFor, program],
- }))
- }
- checked={filters.electiveFor.includes(program)}
- className="h-4 w-4 rounded border-gray-300 text-blue-600"
- />
-
-
- );
- })}
-
-
- {/* filter by prereq */}
-
-
-
- setFilters((prev) => ({
- ...prev,
- hasPrerequisites: !prev.hasPrerequisites,
- }))
- }
- checked={filters.hasPrerequisites}
- className="h-4 w-4 rounded border-gray-300 text-blue-600"
- />
-
-
-
-
-
- );
+ const [showTags, setShowTags] = useState(false);
+ return (
+
+
+
Филтри
+
+
+
+ {/* filter by season*/}
+
+
Семестар
+
+ {["Летен", "Зимски"].map((season) => {
+ const seasonValue = season === "Летен" ? "S" : "W";
+ return (
+
+
+ setFilters((prev) => ({
+ ...prev,
+ season: prev.season === seasonValue ? "" : seasonValue,
+ }))
+ }
+ checked={filters.season === seasonValue}
+ className="h-4 w-4 rounded border-gray-300 text-blue-600"
+ />
+
+
+ );
+ })}
+
+
+ {/* filter by semester*/}
+
+ {/*
Семестар
*/}
+
+ {Array.from(Array(8)).map((_, index) => {
+ const i = index + 1;
+ return (
+
+
+ setFilters((prev) => ({
+ ...prev,
+ semester: prev.semester.includes(i)
+ ? prev.semester.filter((item) => item !== i)
+ : [...prev.semester, i],
+ }))
+ }
+ checked={filters.semester.includes(i)}
+ className="h-4 w-4 rounded border-gray-300 text-blue-600"
+ />
+
+
+ );
+ })}
+
+
+ {/* filter by level */}
+
+
Ниво
+
+ {Array.from(Array(3)).map((_, index) => {
+ const i = index + 1;
+ const level = `L${i}`;
+ return (
+
+
+ setFilters((prev) => ({
+ ...prev,
+ level: prev.level.includes(i)
+ ? prev.level.filter((item) => item !== i)
+ : [...prev.level, i],
+ }))
+ }
+ checked={filters.level.includes(i)}
+ className="h-4 w-4 rounded border-gray-300 text-blue-600"
+ />
+
+
+ );
+ })}
+
+
+ {/* filter by activation*/}
+
+
Активирани
+
+ {["Активирани", "Неактивирани"].map((value) => {
+ const activeValue =
+ value === "Активирани" ? "activated" : "not_activated";
+ return (
+
+
+ setFilters((prev) => ({
+ ...prev,
+ activated:
+ prev.activated === activeValue ? "" : activeValue,
+ }))
+ }
+ checked={filters.activated === activeValue}
+ className="h-4 w-4 rounded border-gray-300 text-blue-600"
+ />
+
+
+ );
+ })}
+
+
+ {/* filter by mandatoryFor */}
+
+
Задолжителен за:
+
+ {PROGRAMS.map((program) => {
+ const programName = program.replace(/\d+$/, "");
+ return (
+
+
+ setFilters((prev) => ({
+ ...prev,
+ mandatoryFor: prev.mandatoryFor.includes(program)
+ ? prev.mandatoryFor.filter((item) => item !== program)
+ : [...prev.mandatoryFor, program],
+ }))
+ }
+ checked={filters.mandatoryFor.includes(program)}
+ className="h-4 w-4 rounded border-gray-300 text-blue-600"
+ />
+
+
+ );
+ })}
+
+
+ {/* filter by electiveFor */}
+
+
Изборен за:
+
+ {PROGRAMS.map((program) => {
+ const programName = program.replace(/\d+$/, "");
+ return (
+
+
+ setFilters((prev) => ({
+ ...prev,
+ electiveFor: prev.electiveFor.includes(program)
+ ? prev.electiveFor.filter((item) => item !== program)
+ : [...prev.electiveFor, program],
+ }))
+ }
+ checked={filters.electiveFor.includes(program)}
+ className="h-4 w-4 rounded border-gray-300 text-blue-600"
+ />
+
+
+ );
+ })}
+
+
+ {/* filter by prereq */}
+
+
+
+ setFilters((prev) => ({
+ ...prev,
+ hasPrerequisites: !prev.hasPrerequisites,
+ }))
+ }
+ checked={filters.hasPrerequisites}
+ className="h-4 w-4 rounded border-gray-300 text-blue-600"
+ />
+
+
+
+
+
Тагови:
+
+ {tags.slice(0, showTags ? undefined : 4).map((tag) => {
+ return (
+
+
+ setFilters((prev) => ({
+ ...prev,
+ tags: prev.tags.includes(tag)
+ ? prev.tags.filter((item) => item !== tag)
+ : [...prev.tags, tag],
+ }))
+ }
+ checked={filters.tags.includes(tag)}
+ className="h-4 w-4 rounded border-gray-300 text-blue-600"
+ />
+
+
+ );
+ })}
+ {tags.length > 4 && (
+
+ )}
+
+
+
+
+ );
};
Index: frontend/src/components/SubjectCatalog/SubjectCatalog.tsx
===================================================================
--- frontend/src/components/SubjectCatalog/SubjectCatalog.tsx (revision 36797f6a171f176d1b9fe7e9eb66f8a01c69af6f)
+++ frontend/src/components/SubjectCatalog/SubjectCatalog.tsx (revision adb1885b31d1369ca9e759cd6011049b7e898e51)
@@ -1,3 +1,4 @@
import { useEffect, useState } from "react";
+import { Filters, Subject } from "../types";
import FilterSidebar from "./FilterSidebar";
import SkeletonCard from "./SkeletonCard";
@@ -5,187 +6,193 @@
import SubjectList from "./SubjectList";
import SubjectModal from "./SubjectModal";
-import { Filters, Subject } from "../types";
import { filterSubjects, getRandomStaff, resetFilters } from "./utils";
const SubjectCatalog = () => {
- const [visibleCourses, setVisibleCourses] = useState
(10);
- const [searchTerm, setSearchTerm] = useState("");
- const [professorSearchTerm, setProfessorSearchTerm] = useState("");
- const [assistantSearchTerm, setAssistantSearchTerm] = useState("");
- const [selectedSubject, setSelectedSubject] = useState(null);
- const [subjectData, setSubjectData] = useState([]);
- const [isLoaded, setIsLoaded] = useState(false);
- const [randomStaff, setRandomStaff] = useState(["", ""]);
- const [showModal, setShowModal] = useState(false);
- const [filters, setFilters] = useState({
- season: "",
- semester: [],
- level: [],
- activated: "",
- mandatoryFor: [],
- electiveFor: [],
- professors: [],
- assistants: [],
- hasPrerequisites: false,
- });
+ const [visibleCourses, setVisibleCourses] = useState(10);
+ const [searchTerm, setSearchTerm] = useState("");
+ const [professorSearchTerm, setProfessorSearchTerm] = useState("");
+ const [assistantSearchTerm, setAssistantSearchTerm] = useState("");
+ const [selectedSubject, setSelectedSubject] = useState(null);
+ const [subjectData, setSubjectData] = useState([]);
+ const [isLoaded, setIsLoaded] = useState(false);
+ const [randomStaff, setRandomStaff] = useState(["", ""]);
+ const [showModal, setShowModal] = useState(false);
+ const [tags, setTags] = useState([]);
+ const [filters, setFilters] = useState({
+ season: "",
+ semester: [],
+ level: [],
+ activated: "",
+ mandatoryFor: [],
+ electiveFor: [],
+ professors: [],
+ assistants: [],
+ tags: [],
+ hasPrerequisites: false,
+ });
+ const filteredSubjects: Subject[] = filterSubjects({
+ subjectData,
+ searchTerm,
+ professorSearchTerm,
+ assistantSearchTerm,
+ filters,
+ });
- const filteredSubjects: Subject[] = filterSubjects({
- subjectData,
- searchTerm,
- professorSearchTerm,
- assistantSearchTerm,
- filters,
- });
+ useEffect(() => {
+ const fetchData = async () => {
+ const response = await fetch("http://localhost:8000/subjects");
+ const data = await response.json();
+ console.log(data);
+ setSubjectData(data);
+ setIsLoaded(true);
+ };
+ fetchData();
+ }, []);
- useEffect(() => {
- const fetchData = async () => {
- const response = await fetch("http://localhost:8000/subjects");
- const data = await response.json();
- console.log(data);
- setSubjectData(data);
- setIsLoaded(true);
- };
- fetchData();
- }, []);
+ useEffect(() => {
+ getRandomStaff(subjectData, setRandomStaff);
+ setTags(
+ Array.from(
+ new Set(filteredSubjects.flatMap((sub) => sub.subject_info.tags))
+ )
+ );
+ console.log(
+ Array.from(
+ new Set(
+ filteredSubjects.flatMap((sub) => sub.subject_info.technologies)
+ )
+ )
+ );
+ }, [subjectData]);
- useEffect(() => {
- getRandomStaff(subjectData, setRandomStaff);
- }, [subjectData]);
+ const loadMore = () => {
+ setVisibleCourses((prev) => prev + 10);
+ };
- const loadMore = () => {
- setVisibleCourses((prev) => prev + 10);
- };
+ const openSubjectDetails = (subject: Subject) => {
+ setSelectedSubject(
+ subjectData.find((item) => item.id == subject.id) ?? null
+ );
+ setShowModal(true);
+ };
- const openSubjectDetails = (subject: Subject) => {
- setSelectedSubject(
- subjectData.find((item) => item.id == subject.id) ?? null
- );
- setShowModal(true);
- };
+ const closeModal = () => {
+ setShowModal(false);
+ };
- const closeModal = () => {
- setShowModal(false);
- };
+ const getSubjectPrerequisites = (): "Нема предуслов" | number | string[] => {
+ const prerequisite = selectedSubject?.subject_info?.prerequisite;
- const getSubjectPrerequisites = (): "Нема предуслов" | number | string[] => {
- const prerequisite = selectedSubject?.subject_info?.prerequisite;
-
- if (!prerequisite) return "Нема предуслов";
-
- if ("subjects" in prerequisite && Array.isArray(prerequisite.subjects)) {
- const names = prerequisite.subjects.map(
- (item) =>
- subjectData.find((subject) => subject.id === item)?.name || "/"
- );
- return names.length > 0 ? names : "Нема предуслов";
- }
-
- if ("credits" in prerequisite && typeof prerequisite.credits === "number") {
- return prerequisite.credits;
- }
-
- return "Нема предуслов";
- };
-
+ if (!prerequisite) return "Нема предуслов";
- return (
-
-
Преглед на сите предмети
-
-
-
-
-
- {/* Main content */}
-
- {/* Search bar */}
-
-
setSearchTerm(e.target.value)}
- className="w-full p-3 pl-4 pr-12 border border-gray-300 rounded-lg
+ if ("subjects" in prerequisite && Array.isArray(prerequisite.subjects)) {
+ const names = prerequisite.subjects.map(
+ (item) =>
+ subjectData.find((subject) => subject.id === item)?.name || "/"
+ );
+ return names.length > 0 ? names : "Нема предуслов";
+ }
+
+ if ("credits" in prerequisite && typeof prerequisite.credits === "number") {
+ return prerequisite.credits;
+ }
+
+ return "Нема предуслов";
+ };
+
+ return (
+
+
Преглед на сите предмети
+
+
+
+
+
+ {/* Main content */}
+
+ {/* Search bar */}
+
+ setSearchTerm(e.target.value)}
+ className="w-full p-3 pl-4 pr-12 border border-gray-300 rounded-lg
focus:ring-2 focus:ring-blue-500 focus:border-blue-500"
- />
- {/* */}
-
+ />
+
- {/* Course grid */}
+ {/* Course grid */}
- {!isLoaded ? (
-
- {[...Array(9)].map((_, index) => (
-
- ))}
-
- ) : (
-
- )}
+ {!isLoaded ? (
+
+ {[...Array(9)].map((_, index) => (
+
+ ))}
+
+ ) : (
+
+ )}
- {/* Load more button */}
- {isLoaded && filteredSubjects.length > visibleCourses && (
-
-
-
- )}
+ {/* Load more button */}
+ {isLoaded && filteredSubjects.length > visibleCourses && (
+
+
+
+ )}
- {/* No results message */}
- {isLoaded && filteredSubjects.length === 0 && (
-
-
- Не постојат такви предмети
-
-
-
- )}
-
-
- {showModal && selectedSubject && (
-
- )}
-
- );
+ {/* No results message */}
+ {isLoaded && filteredSubjects.length === 0 && (
+
+
+ Не постојат такви предмети
+
+
+
+ )}
+
+
+ {showModal && selectedSubject && (
+
+ )}
+
- {filteredSubjects.slice(0, visibleCourses).map((subject) => (
-
+ {filteredSubjects.slice(0, visibleCourses).map((subject) => (
+
-
-
-
-
{subject.name}
-
{subject.code}
-
-
+ >
+
+
+
+
{subject.name}
+
{subject.code}
+
+
- {/*
+ {/*
{subject.abstract}
*/}
-
- {/* these tags are for listing the domains a subject covers, ex. backend, AI ...*/}
- {["Web Development", "Machine Learning", "Data Science"].map(
- (tag) => (
-
- {tag}
-
- )
- )}
-
+
+ {/* these tags are for listing the domains a subject covers, ex. backend, AI ...*/}
+ {subject.subject_info.tags.map((tag) => (
+
+ {tag}
+
+ ))}
+
-
- {/* these tags could be used as certain flags for some subjects, like most picked subject, best match etc. */}
- {/*
+
+ {/* these tags could be used as certain flags for some subjects, like most picked subject, best match etc. */}
+ {/*
*/}
-
-
-
-
- ))}
-
- );
+
+
+
+
+ ))}
+
-
-
- );
+ return (
+
+
+
+ );
};
Index: frontend/src/pages/Login.tsx
===================================================================
--- frontend/src/pages/Login.tsx (revision 36797f6a171f176d1b9fe7e9eb66f8a01c69af6f)
+++ frontend/src/pages/Login.tsx (revision adb1885b31d1369ca9e759cd6011049b7e898e51)
@@ -6,98 +6,98 @@
interface LoginForm {
- email: string;
- password: string;
+ email: string;
+ password: string;
}
const Login: React.FC = () => {
- const [formData, setFormData] = useState({
- email: "",
- password: "",
- });
- const [errors, setErrors] = useState<
- Partial & { detail?: string[] }
- >({});
- const navigate = useNavigate();
- const { login } = useAuth();
+ const [formData, setFormData] = useState({
+ email: "",
+ password: "",
+ });
+ const [errors, setErrors] = useState<
+ Partial & { detail?: string[] }
+ >({});
+ const navigate = useNavigate();
+ const { login } = useAuth();
- const handleChange = (e: React.ChangeEvent) => {
- setFormData({
- ...formData,
- [e.target.name]: e.target.value,
- });
- };
+ const handleChange = (e: React.ChangeEvent) => {
+ setFormData({
+ ...formData,
+ [e.target.name]: e.target.value,
+ });
+ };
- const handleLogin = async (e: React.FormEvent) => {
- e.preventDefault();
- setErrors({});
+ const handleLogin = async (e: React.FormEvent) => {
+ e.preventDefault();
+ setErrors({});
- try {
- const response = await axios.post<{ token: string }>(
- "http://localhost:8000/auth/login/",
- {
- email: formData.email,
- password: formData.password,
- }
- );
- const { access, refresh } = response.data;
- login(access, refresh);
- navigate("/");
- } catch (err: unknown) {
- const axiosError = err as AxiosError<{
- [key: string]: string[] | string;
- }>;
- console.log("Error response data:", axiosError.response?.data);
+ try {
+ const response = await axios.post<{
+ access: string;
+ refresh: string;
+ }>("http://localhost:8000/auth/login/", {
+ email: formData.email,
+ password: formData.password,
+ });
+ const { access, refresh } = response.data;
+ login(access, refresh);
+ navigate("/");
+ } catch (err: unknown) {
+ const axiosError = err as AxiosError<{
+ [key: string]: string[] | string;
+ }>;
+ console.log("Error response data:", axiosError.response?.data);
- if (axiosError.response && axiosError.response.data) {
- const errorData = axiosError.response.data;
- const normalizedErrors: { [key: string]: string[] } = {};
- Object.entries(errorData).forEach(([field, message]) => {
- normalizedErrors[field] = Array.isArray(message)
- ? message
- : [message];
- });
- setErrors(normalizedErrors);
- } else {
- setErrors({ detail: ["An unknown error occurred."] });
- }
- }
- };
- return (
-
- );
+ if (axiosError.response && axiosError.response.data) {
+ const errorData = axiosError.response.data;
+ const normalizedErrors: { [key: string]: string[] } = {};
+ Object.entries(errorData).forEach(([field, message]) => {
+ normalizedErrors[field] = Array.isArray(message)
+ ? message
+ : [message];
+ });
+ setErrors(normalizedErrors);
+ } else {
+ setErrors({ detail: ["An unknown error occurred."] });
+ }
+ }
+ };
+ return (
+
+ );
};
Index: frontend/src/pages/Register.tsx
===================================================================
--- frontend/src/pages/Register.tsx (revision 36797f6a171f176d1b9fe7e9eb66f8a01c69af6f)
+++ frontend/src/pages/Register.tsx (revision adb1885b31d1369ca9e759cd6011049b7e898e51)
@@ -1,4 +1,4 @@
+import axios, { AxiosError } from "axios";
import React, { useState } from "react";
-import axios, { AxiosError } from "axios";
import { useNavigate } from "react-router-dom";
import PasswordInput from "../components/PasswordInput";
@@ -6,139 +6,139 @@
interface RegisterForm {
- email: string;
- password: string;
- confirmPassword: string;
- fullName: string;
+ email: string;
+ password: string;
+ confirmPassword: string;
+ fullName: string;
}
const Register: React.FC = () => {
- const [formData, setFormData] = useState({
- email: "",
- password: "",
- confirmPassword: "",
- fullName: "",
- });
- const [loading, setLoading] = useState(false);
- const [errors, setErrors] = useState<
- Partial> & {
- non_field_errors?: string[];
- }
- >({});
- const navigate = useNavigate();
- const { login } = useAuth();
+ const [formData, setFormData] = useState({
+ email: "",
+ password: "",
+ confirmPassword: "",
+ fullName: "",
+ });
+ const [loading, setLoading] = useState(false);
+ const [errors, setErrors] = useState<
+ Partial> & {
+ non_field_errors?: string[];
+ }
+ >({});
+ const navigate = useNavigate();
+ const { login } = useAuth();
- const handleChange = (e: React.ChangeEvent) => {
- setFormData({
- ...formData,
- [e.target.name]: e.target.value,
- });
- };
+ const handleChange = (e: React.ChangeEvent) => {
+ setFormData({
+ ...formData,
+ [e.target.name]: e.target.value,
+ });
+ };
- const handleRegister = async (e: React.FormEvent) => {
- e.preventDefault();
- setErrors({});
- if (formData.password !== formData.confirmPassword) {
- setErrors({ confirmPassword: ["Password do not match. "] });
- return;
- }
- setLoading(true);
+ const handleRegister = async (e: React.FormEvent) => {
+ e.preventDefault();
+ setErrors({});
+ if (formData.password !== formData.confirmPassword) {
+ setErrors({ confirmPassword: ["Password do not match. "] });
+ return;
+ }
+ setLoading(true);
- try {
- console.log(formData);
- const response = await axios.post(
- "http://localhost:8000/auth/register/",
- {
- email: formData.email,
- password: formData.password,
- confirm_password: formData.confirmPassword,
- full_name: formData.fullName,
- }
- );
- console.log(response);
- const { access, refresh } = response.data;
- console.log(access, refresh);
- login(access, refresh);
- navigate("/");
- } catch (err: unknown) {
- const axiosError = err as AxiosError<{
- [key: string]: string[] | string;
- }>;
- if (axiosError.response && axiosError.response.data) {
- const errorData = axiosError.response.data;
- const normalizedErrors: { [key: string]: string[] } = {};
- Object.entries(errorData).forEach(([field, message]) => {
- normalizedErrors[field] = Array.isArray(message)
- ? message
- : [message];
- });
- setErrors(normalizedErrors);
- } else {
- setErrors({ non_field_errors: ["An unexpected error occurred."] });
- }
- } finally {
- setLoading(false);
- }
- };
- return (
-
- );
+ try {
+ console.log(formData);
+ const response = await axios.post<{
+ access: string;
+ refresh: string;
+ }>("http://localhost:8000/auth/register/", {
+ email: formData.email,
+ password: formData.password,
+ confirm_password: formData.confirmPassword,
+ full_name: formData.fullName,
+ });
+ console.log(response);
+ const { access, refresh } = response.data;
+ console.log(access, refresh);
+ login(access, refresh);
+ navigate("/");
+ } catch (err: unknown) {
+ const axiosError = err as AxiosError<{
+ [key: string]: string[] | string;
+ }>;
+ if (axiosError.response && axiosError.response.data) {
+ const errorData = axiosError.response.data;
+ const normalizedErrors: { [key: string]: string[] } = {};
+ Object.entries(errorData).forEach(([field, message]) => {
+ normalizedErrors[field] = Array.isArray(message)
+ ? message
+ : [message];
+ });
+ setErrors(normalizedErrors);
+ } else {
+ setErrors({ non_field_errors: ["An unexpected error occurred."] });
+ }
+ } finally {
+ setLoading(false);
+ }
+ };
+ return (
+
+ );
};
export default Register;