dylan/gander
1
0
Fork 0
Code Issues Pull Requests Actions 1 Packages Projects Releases Wiki Activity

REFACTOR: Repositioning of Components in Project Structure

Browse Source
This commit is contained in:
Chris-1010
2025-02-16 19:36:34 +00:00
parent bd091b079a
commit b3de7ba238
17 changed files with 356 additions and 311 deletions
Download Patch File Download Diff File Expand all files Collapse all files

44
frontend/src/components/Auth/AuthModal.tsx
View File

@@ -1,6 +1,10 @@
import React, { useState } from "react";
import { ToggleButton } from "../Layout/Button";
import { LogIn as LogInIcon, User as UserIcon, CircleHelp as ForgotIcon } from "lucide-react";
import { ToggleButton } from "../Input/Button";
import {
LogIn as LogInIcon,
User as UserIcon,
CircleHelp as ForgotIcon,
} from "lucide-react";
import LoginForm from "./LoginForm";
import RegisterForm from "./RegisterForm";
import ForgotPasswordForm from "./ForgotPasswordForm";
@@ -23,14 +27,19 @@ const AuthModal: React.FC<AuthModalProps> = ({ onClose }) => {
};
const authSwitch = () => {
const formMap: { [key: string]: JSX.Element } = {
Login: <LoginForm onSubmit={(handleSubmit)} onForgotPassword={() => setSelectedTab("Forgot")} />,
Register: <RegisterForm onSubmit={(handleSubmit)} />,
Forgot: <ForgotPasswordForm onSubmit={(handleSubmit)} />
Login: (
<LoginForm
onSubmit={handleSubmit}
onForgotPassword={() => setSelectedTab("Forgot")}
/>
),
Register: <RegisterForm onSubmit={handleSubmit} />,
Forgot: <ForgotPasswordForm onSubmit={handleSubmit} />,
};
return formMap[selectedTab] || <div>Please select a valid option</div>;
{/*
{
/*
if (selectedTab === "Login") {
return <LoginForm onSubmit={(handleSubmit)}/>
} else if (selectedTab === "Register") {
@@ -39,9 +48,9 @@ const AuthModal: React.FC<AuthModalProps> = ({ onClose }) => {
return <ForgotPasswordForm onSubmit={(handleSubmit)}/>
} else
return <div> Please select a valid icon</div>
*/}
}
*/
}
};
return (
<>
@@ -52,7 +61,8 @@ const AuthModal: React.FC<AuthModalProps> = ({ onClose }) => {
></div>
{/*Container*/}
<div id="auth-modal"
<div
id="auth-modal"
className="fixed inset-0 flex flex-col items-center justify-around z-[9000]
h-[95vh] m-auto min-w-[65vw] w-fit py-[80px] rounded-[5rem] transition-all animate-floating "
>
@@ -78,8 +88,6 @@ const AuthModal: React.FC<AuthModalProps> = ({ onClose }) => {
<UserIcon className=" w-[3em] sm:w-[1em] mr-1" />
Register
</ToggleButton>
</div>
<div
@@ -104,18 +112,10 @@ const AuthModal: React.FC<AuthModalProps> = ({ onClose }) => {
✕
</button>
</div>
<>
{authSwitch()}
</>
<>{authSwitch()}</>
</div>
</div>
</div>
</>
);
};

163
frontend/src/components/Auth/ForgotPasswordForm.tsx
View File

@@ -1,95 +1,102 @@
import React, { useState } from "react";
import Input from "../Layout/Input";
import Button from "../Layout/Button";
import Input from "../Input/Input";
import Button from "../Input/Button";
interface ForgotPasswordProps {
email?: string;
email?: string;
}
interface SubmitProps {
onSubmit: () => void;
}
onSubmit: () => void;
}
const ForgotPasswordForm: React.FC<SubmitProps> = ( {onSubmit} ) => {
const [email, setEmail] = useState<string>("");
const [errors, setErrors] = useState<ForgotPasswordProps>({});
const ForgotPasswordForm: React.FC<SubmitProps> = ({ onSubmit }) => {
const [email, setEmail] = useState<string>("");
const [errors, setErrors] = useState<ForgotPasswordProps>({});
const confirmPasswordReset = () => {
alert(`Email has been sent`);
const confirmPasswordReset = () => {
alert(`Email has been sent`);
};
};
const handleEmailChange = (e: React.ChangeEvent<HTMLInputElement>) => {
setEmail(e.target.value);
if (errors.email) {
setErrors((prev) => ({ ...prev, email: undefined }));
}
};
const handleEmailChange = (e: React.ChangeEvent<HTMLInputElement>) => {
setEmail(e.target.value);
if (errors.email) {
setErrors((prev) => ({ ...prev, email: undefined }));
const validateEmail = (): boolean => {
const newErrors: ForgotPasswordProps = {};
if (!email) {
newErrors.email = "Email is required.";
} else if (!/\S+@\S+\.\S+/.test(email)) {
newErrors.email = "Please enter a valid email address.";
}
setErrors(newErrors);
return Object.keys(newErrors).length === 0;
};
const handleSubmit = async (e: React.FormEvent) => {
e.preventDefault();
if (validateEmail()) {
try {
const response = await fetch(`/api/user/forgot_password/${email}`, {
method: "POST",
headers: {
"Content-Type": "application/json",
},
credentials: "include",
});
if (!response.ok) {
const data = await response.json();
throw new Error(
data.message || "An error has occurred while resetting"
);
} else {
confirmPasswordReset();
}
};
} catch (error: any) {
console.error("Password reset error:", error.message);
setErrors((prev) => ({
...prev,
general: error.message || "An unexpected error occurred.",
}));
}
}
};
return (
<div className="h-screen flex items-center justify-center">
<div className="h-[25em] w-[20em] flex flex-col items-center justify-center bg-white shadow-md rounded-lg p-6">
<h2 className="text-2xl font-bold text-center mb-4">Forgot Password</h2>
<form
onSubmit={handleSubmit}
className="flex flex-col items-center space-y-4 w-full m-6"
>
<Input
name="email"
type="email"
placeholder="Enter your email"
value={email}
onChange={handleEmailChange}
extraClasses={`appearance-none bg-transparent text-black m-5 ${
errors.email ? "border-red-500" : ""
}`}
/>
const validateEmail = (): boolean => {
const newErrors: ForgotPasswordProps = {};
if (!email) {
newErrors.email = "Email is required.";
} else if (!/\S+@\S+\.\S+/.test(email)) {
newErrors.email = "Please enter a valid email address.";
}
setErrors(newErrors);
return Object.keys(newErrors).length === 0;
};
{errors.email && (
<p className="text-red-500 mt-2 text-sm">{errors.email}</p>
)}
const handleSubmit = async (e: React.FormEvent) => {
e.preventDefault();
if (validateEmail()) {
try {
const response = await fetch(`/api/user/forgot_password/${email}`, {
method: "POST",
headers: {
"Content-Type": "application/json",
},
credentials: "include",
});
if (!response.ok) {
const data = await response.json();
throw new Error(data.message || "An error has occurred while resetting");
} else {
confirmPasswordReset();
}
} catch (error: any) {
console.error("Password reset error:", error.message);
setErrors((prev) => ({
...prev,
general: error.message || "An unexpected error occurred.",
}));
}
}
};
return (
<div className="h-screen flex items-center justify-center">
<div className="h-[25em] w-[20em] flex flex-col items-center justify-center bg-white shadow-md rounded-lg p-6">
<h2 className="text-2xl font-bold text-center mb-4">Forgot Password</h2>
<form onSubmit={handleSubmit} className="flex flex-col items-center space-y-4 w-full m-6">
<Input
name="email"
type="email"
placeholder="Enter your email"
value={email}
onChange={handleEmailChange}
extraClasses={`appearance-none bg-transparent text-black m-5 ${errors.email ? "border-red-500" : ""}`}
/>
{errors.email && <p className="text-red-500 mt-2 text-sm">{errors.email}</p>}
<Button type="submit" extraClasses="text-black">Send Reset Link</Button>
</form>
</div>
</div>
);
<Button type="submit" extraClasses="text-black">
Send Reset Link
</Button>
</form>
</div>
</div>
);
};
export default ForgotPasswordForm;

63
frontend/src/components/Auth/LoginForm.tsx
View File

@@ -1,6 +1,6 @@
import React, { useState } from "react";
import Input from "../Layout/Input";
import Button, { ToggleButton } from "../Layout/Button";
import Input from "../Input/Input";
import Button, { ToggleButton } from "../Input/Button";
import { useAuth } from "../../context/AuthContext";
import GoogleLogin from "./OAuth";
import { CircleHelp as ForgotIcon } from "lucide-react";
@@ -101,8 +101,8 @@ const LoginForm: React.FC<SubmitProps> = ({ onSubmit, onForgotPassword }) => {
return (
<>
<div className=" flex flex-col items-center p-10">
<h1 className="flex flex-col text-white text-[2.5em] font-[800]"> Login </h1>
<div className="flex flex-col items-center p-10">
<h1 className="flex flex-col text-white text-[2.5em] font-[800]">Login</h1>
<div className="mt-10 bg-white/10 backdrop-blur-md p-6 md:p-16 rounded-xl shadow-lg w-full
md:max-w-[20em] lg:max-w-[27.5em] min-w-[10em] border border-white/10">
@@ -112,22 +112,30 @@ const LoginForm: React.FC<SubmitProps> = ({ onSubmit, onForgotPassword }) => {
className="flex flex-col"
>
{errors.general && (
<p className="text-red-500 text-sm text-center text-[0.75em]">{errors.general}</p>
<p className="text-red-500 text-sm text-center text-[0.75em]">
{errors.general}
</p>
)}
{errors.username && (
<p className="text-red-500 text-center text-[0.75em]">{errors.username}</p>
<p className="text-red-500 text-center text-[0.75em]">
{errors.username}
</p>
)}
<Input
name="username"
placeholder="Username"
value={formData.username}
onChange={handleInputChange}
extraClasses={`w-full mb-[2em] p-3 ${errors.username ? "border-red-500" : ""}`}
extraClasses={`w-full mb-[2em] p-3 ${
errors.username ? "border-red-500" : ""
}`}
/>
{errors.password && (
<p className="text-red-500 text-center text-[0.75em]">{errors.password}</p>
<p className="text-red-500 text-center text-[0.75em]">
{errors.password}
</p>
)}
<div className="mb-[2em]">
@@ -137,25 +145,28 @@ const LoginForm: React.FC<SubmitProps> = ({ onSubmit, onForgotPassword }) => {
placeholder="Password"
value={formData.password}
onChange={handleInputChange}
extraClasses={`w-full p-3 ${errors.password ? "border-red-500" : ""}`}
>
</Input>
extraClasses={`w-full p-3 ${
errors.password ? "border-red-500" : ""
}`}
></Input>
<div className="flex flex-row">
<label className="flex w-full items-center justify-start cursor-pointer w-10px">
<input
type="checkbox"
className="accent-purple-600 w-3 h-3 mr-1"
/>
<span className="sm:text-[0.5em] md:text-[0.8em]">Remember me</span>
</label>
<button
type="button"
className="flex w-full justify-end items-center justify-items-end sm:text-[0.5em] md:text-[0.8em] text-white font-semibold hover:scale-[1.05] transition-all ease-in"
onClick={onForgotPassword}>
<ForgotIcon size={16} className="flex flex-row mr-1" />
<span> Forgot Password </span>
</button>
<label className="flex w-full items-center justify-start cursor-pointer w-10px">
<input
type="checkbox"
className="accent-purple-600 w-3 h-3 mr-1"
/>
<span className="sm:text-[0.5em] md:text-[0.8em]">
Remember me
</span>
</label>
<button
type="button"
className="flex w-full justify-end items-center justify-items-end sm:text-[0.5em] md:text-[0.8em] text-white font-semibold hover:scale-[1.05] transition-all ease-in"
onClick={onForgotPassword}
>
<ForgotIcon size={16} className="flex flex-row mr-1" />
<span> Forgot Password </span>
</button>
</div>
</div>
<Button type="submit">Login</Button>

209
frontend/src/components/Auth/PasswordResetForm.tsx
View File

@@ -1,122 +1,125 @@
import React, { useState } from "react";
import Input from "../Layout/Input";
import Button from "../Layout/Button";
import Input from "../Input/Input";
import Button from "../Input/Button";
import { useAuth } from "../../context/AuthContext";
interface ResetPasswordData {
newPassword: string;
confirmNewPassword: string;
newPassword: string;
confirmNewPassword: string;
}
interface ResetPasswordErrors {
newPasswordError?: string;
confirmNewPasswordError?: string;
newPasswordError?: string;
confirmNewPasswordError?: string;
}
interface SubmitProps {
onSubmit: () => void;
token: string;
onSubmit: () => void;
token: string;
}
const PasswordResetForm: React.FC<SubmitProps> = ({ onSubmit, token }) => {
const [errors, setErrors] = useState<ResetPasswordErrors>({});
const [errors, setErrors] = useState<ResetPasswordErrors>({});
const [resetData, setResetData] = useState<ResetPasswordData>({
newPassword: "",
confirmNewPassword: "",
});
const [resetData, setResetData] = useState<ResetPasswordData>({
newPassword: "",
confirmNewPassword: "",
const handlePasswordChange = (e: React.ChangeEvent<HTMLInputElement>) => {
const { name, value } = e.target;
setResetData((prev) => ({
...prev,
[name]: value,
}));
};
const validateResetForm = (): boolean => {
const newErrors: ResetPasswordErrors = {};
Object.keys(resetData).forEach((key) => {
if (!resetData[key as keyof ResetPasswordData]) {
newErrors[key as keyof ResetPasswordErrors] = "Confirm your password";
}
});
const handlePasswordChange = (e: React.ChangeEvent<HTMLInputElement>) => {
const { name, value } = e.target;
setResetData((prev) => ({
...prev,
[name]: value,
}));
};
const validateResetForm = (): boolean => {
const newErrors: ResetPasswordErrors = {};
Object.keys(resetData).forEach((key) => {
if (!resetData[key as keyof ResetPasswordData]) {
newErrors[key as keyof ResetPasswordErrors] = "Confirm your password";
}
});
if (resetData.newPassword.length < 8) {
newErrors.newPasswordError = "Password must be at least 8 characters long";
}
if (resetData.newPassword !== resetData.confirmNewPassword) {
newErrors.confirmNewPasswordError = "Passwords do not match";
}
setErrors(newErrors);
return Object.keys(newErrors).length === 0;
};
const handleSubmit = async (e: React.FormEvent) => {
e.preventDefault();
onSubmit();
if (validateResetForm()) {
try {
const response = await fetch(`/api/user/reset_password/${token}/${resetData.newPassword}`, {
method: "POST",
headers: {
"Content-Type": "application/json",
},
credentials: "include",
body: JSON.stringify(resetData),
});
if (!response.ok) {
const data = await response.json();
throw new Error(data.error || "An error has occurred while resetting");
} else {
onSubmit(true)
}
} catch (error: any) {
console.error("Password reset error:", error.message);
setErrors((prev) => ({
...prev,
general: error.message || "An unexpected error occurred.",
}));
}
if (resetData.newPassword.length < 8) {
newErrors.newPasswordError =
"Password must be at least 8 characters long";
}
if (resetData.newPassword !== resetData.confirmNewPassword) {
newErrors.confirmNewPasswordError = "Passwords do not match";
}
setErrors(newErrors);
return Object.keys(newErrors).length === 0;
};
const handleSubmit = async (e: React.FormEvent) => {
e.preventDefault();
onSubmit();
if (validateResetForm()) {
try {
const response = await fetch(
`/api/user/reset_password/${token}/${resetData.newPassword}`,
{
method: "POST",
headers: {
"Content-Type": "application/json",
},
credentials: "include",
body: JSON.stringify(resetData),
}
);
if (!response.ok) {
const data = await response.json();
throw new Error(
data.error || "An error has occurred while resetting"
);
} else {
onSubmit(true);
}
} catch (error: any) {
console.error("Password reset error:", error.message);
setErrors((prev) => ({
...prev,
general: error.message || "An unexpected error occurred.",
}));
}
}
};
return (
<form onSubmit={handleSubmit}>
<Input
name="newPassword"
type="password"
placeholder="New Password"
value={resetData.newPassword}
onChange={handlePasswordChange}
extraClasses={`${errors.newPasswordError ? "border-red-500" : ""}`}
/>
{errors.confirmNewPasswordError && (
<p className="text-red-500 mt-3 text-sm">
{errors.confirmNewPasswordError}
</p>
)}
<Input
name="confirmNewPassword"
type="password"
placeholder="Confirm Password"
value={resetData.confirmNewPassword}
onChange={handlePasswordChange}
extraClasses={`${
errors.confirmNewPasswordError ? "border-red-500" : ""
}`}
/>
<Button type="submit">Reset Password</Button>
</form>
);
};
return (
<form onSubmit={handleSubmit}>
<Input
name="newPassword"
type="password"
placeholder='New Password'
value={resetData.newPassword}
onChange={handlePasswordChange}
extraClasses={`${errors.newPasswordError ? "border-red-500" : ""}`}
/>
{errors.confirmNewPasswordError && (
<p className="text-red-500 mt-3 text-sm">{errors.confirmNewPasswordError}</p>
)}
<Input
name="confirmNewPassword"
type="password"
placeholder="Confirm Password"
value={resetData.confirmNewPassword}
onChange={handlePasswordChange}
extraClasses={`${errors.confirmNewPasswordError ? "border-red-500" : ""}`}
/>
<Button type="submit">Reset Password</Button>
</form>
);
};
export default PasswordResetForm
export default PasswordResetForm;

56
frontend/src/components/Auth/RegisterForm.tsx
View File

@@ -1,6 +1,6 @@
import React, { useState } from "react";
import Input from "../Layout/Input";
import Button from "../Layout/Button";
import Input from "../Input/Input";
import Button from "../Input/Button";
import { useAuth } from "../../context/AuthContext";
import GoogleLogin from "./OAuth";
@@ -111,10 +111,13 @@ const RegisterForm: React.FC<SubmitProps> = ({ onSubmit }) => {
<>
<div className="mb-2">
<div className="flex flex-col items-center p-[2.5rem]">
<h1 className="flex flex-col text-white text-[2.5em] font-[800]"> Register </h1>
<div className="mt-5 bg-white/10 backdrop-blur-md p-[2.5rem] md:px-16 rounded-xl shadow-lg w-full
md:max-w-[20em] lg:max-w-[27.5em] min-w-[10em] border border-white/10">
<h1 className="flex flex-col text-white text-[2.5em] font-[800]">
Register
</h1>
<div
className="mt-5 bg-white/10 backdrop-blur-md p-[2.5rem] md:px-16 rounded-xl shadow-lg w-full
md:max-w-[20em] lg:max-w-[27.5em] min-w-[10em] border border-white/10"
>
<form
onSubmit={handleSubmit}
id="register-form"
@@ -122,24 +125,32 @@ const RegisterForm: React.FC<SubmitProps> = ({ onSubmit }) => {
>
<div className="relative w-full">
{errors.general && (
<p className="absolute top-[-1.5em] text-red-500 text-sm text-center w-full">{errors.general}</p>
<p className="absolute top-[-1.5em] text-red-500 text-sm text-center w-full">
{errors.general}
</p>
)}
{errors.username && (
<p className="absolute top-[-1.5em] text-red-500 text-sm text-center w-full">{errors.username}</p>
<p className="absolute top-[-1.5em] text-red-500 text-sm text-center w-full">
{errors.username}
</p>
)}
<Input
name="username"
placeholder="Username"
value={formData.username}
onChange={handleInputChange}
extraClasses={`w-full mb-[1.5em] p-[0.5rem] ${errors.username ? "border-red-500" : ""}`}
extraClasses={`w-full mb-[1.5em] p-[0.5rem] ${
errors.username ? "border-red-500" : ""
}`}
/>
</div>
<div className="relative w-full">
{errors.email && (
<p className="absolute top-[-1.5em] text-red-500 text-sm text-center w-full">{errors.email}</p>
<p className="absolute top-[-1.5em] text-red-500 text-sm text-center w-full">
{errors.email}
</p>
)}
<Input
name="email"
@@ -147,13 +158,17 @@ const RegisterForm: React.FC<SubmitProps> = ({ onSubmit }) => {
placeholder="Email"
value={formData.email}
onChange={handleInputChange}
extraClasses={`w-full mb-[1.5em] p-[0.5rem] ${errors.email ? "border-red-500" : ""}`}
extraClasses={`w-full mb-[1.5em] p-[0.5rem] ${
errors.email ? "border-red-500" : ""
}`}
/>
</div>
<div className="relative w-full">
{errors.password && (
<p className="absolute top-[-1.5em] text-red-500 text-sm text-center w-full">{errors.password}</p>
<p className="absolute top-[-1.5em] text-red-500 text-sm text-center w-full">
{errors.password}
</p>
)}
<Input
name="password"
@@ -161,13 +176,16 @@ const RegisterForm: React.FC<SubmitProps> = ({ onSubmit }) => {
placeholder="Password"
value={formData.password}
onChange={handleInputChange}
extraClasses={`w-full mb-[1.5em] p-[0.5rem] ${errors.password ? "border-red-500" : ""}`}
extraClasses={`w-full mb-[1.5em] p-[0.5rem] ${
errors.password ? "border-red-500" : ""
}`}
/>
</div>
<div className="relative w-full">
{errors.confirmPassword && (
<p className="absolute top-[-1.5em] text-red-500 text-sm text-center w-full">{errors.confirmPassword}</p>
<p className="absolute top-[-1.5em] text-red-500 text-sm text-center w-full">
{errors.confirmPassword}
</p>
)}
<Input
name="confirmPassword"
@@ -175,17 +193,17 @@ const RegisterForm: React.FC<SubmitProps> = ({ onSubmit }) => {
placeholder="Confirm Password"
value={formData.confirmPassword}
onChange={handleInputChange}
extraClasses={`w-full mb-[1.5em] p-[0.5rem] ${errors.confirmPassword ? "border-red-500" : ""}`}
extraClasses={`w-full mb-[1.5em] p-[0.5rem] ${
errors.confirmPassword ? "border-red-500" : ""
}`}
/>
</div>
<Button type="submit" >Register</Button>
<Button type="submit">Register</Button>
</form>
</div>
</div>
</div>
</>
);
};

0
frontend/src/components/Layout/Button.tsx → frontend/src/components/Input/Button.tsx
View File

0
frontend/src/components/Layout/Input.tsx → frontend/src/components/Input/Input.tsx
View File

0
frontend/src/components/Layout/SearchBar.tsx → frontend/src/components/Input/SearchBar.tsx
View File

41
frontend/src/components/Layout/Navbar.tsx → frontend/src/components/Navigation/Navbar.tsx
View File

@@ -1,6 +1,6 @@
import React, { useState } from "react";
import Logo from "./Logo";
import Button from "./Button";
import Logo from "../Layout/Logo";
import Button from "../Input/Button";
import Sidebar from "./Sidebar";
import { Sidebar as SidebarIcon } from "lucide-react";
import {
@@ -8,11 +8,11 @@ import {
LogOut as LogOutIcon,
Settings as SettingsIcon,
} from "lucide-react";
import SearchBar from "./SearchBar";
import SearchBar from "../Input/SearchBar";
import AuthModal from "../Auth/AuthModal";
import { useAuthModal } from "../../hooks/useAuthModal";
import { useAuth } from "../../context/AuthContext";
import QuickSettings from "./QuickSettings";
import QuickSettings from "../Settings/QuickSettings";
interface NavbarProps {
variant?: "home" | "default";
@@ -42,14 +42,14 @@ const Navbar: React.FC<NavbarProps> = ({ variant = "default" }) => {
setShowSideBar(!showSideBar);
};
return (
<div
id="navbar"
className={`flex justify-center items-center ${variant === "home"
className={`flex justify-center items-center ${
variant === "home"
? "h-[45vh] flex-col"
: "h-[15vh] col-span-2 flex-row"
}`}
}`}
>
<Logo variant={variant} />
<Button
@@ -73,18 +73,22 @@ const Navbar: React.FC<NavbarProps> = ({ variant = "default" }) => {
<>
<Button
onClick={() => handleSideBar()}
extraClasses={`fixed ${showSideBar
extraClasses={`absolute ${
showSideBar
? `fixed top-[20px] left-[20px] p-2 text-[1.5rem] text-white hover:text-white
bg-black/30 hover:bg-purple-500/80 rounded-md border border-gray-300 hover:border-white h
over:border-b-4 hover:border-l-4 active:border-b-2 active:border-l-2 transition-all `
: "top-[75px] left-[20px]"
} transition-all duration-300 z-[99]`}
} transition-all duration-300 z-[99]`}
>
<SidebarIcon className="top-[0.20em] left-[10em] mr-1 z-[90]" />
</Button>
<div
className={`fixed top-0 left-0 w-[250px] h-screen bg-[var(--bg-color)] text-[var(--text-color)] z-[90] overflow-y-auto scrollbar-hide
transition-opacity duration-500 ease-in-out ${showSideBar ? "translate-x-0 opacity-100" : "-translate-x-full opacity-0"
transition-transform transition-opacity duration-500 ease-in-out ${
showSideBar
? "translate-x-0 opacity-100"
: "-translate-x-full opacity-0"
}`}
>
<Sidebar />
@@ -99,14 +103,17 @@ const Navbar: React.FC<NavbarProps> = ({ variant = "default" }) => {
<SettingsIcon className="h-15 w-15 mr-1 " />
Quick Settings
</Button>
<div
className={`fixed top-0 right-0 w-[250px] h-screen ] z-[90] overflow-y-auto scrollbar-hide
transition-opacity duration-500 ease-in-out ${showQuickSettings? "translate-x-0 opacity-100" : "translate-x-full opacity-0"
}`}
>
<QuickSettings />
</div>
className={`fixed top-0 right-0 w-[250px] h-screen ] z-[90] overflow-y-auto scrollbar-hide
transition-opacity duration-500 ease-in-out ${
showQuickSettings
? "translate-x-0 opacity-100"
: "translate-x-full opacity-0"
}`}
>
<QuickSettings />
</div>
<SearchBar />

6
frontend/src/components/Layout/Sidebar.tsx → frontend/src/components/Navigation/Sidebar.tsx
View File

@@ -47,7 +47,7 @@ const Sidebar: React.FC<SideBarProps> = () => {
const shownCategory = Object.entries(testCategory).map(([dummyCategory, { dummyLink, dummyImage }]) => {
return (
<li key={dummyCategory} className="flex items-center border border-7 border-black space-x-3 rounded-md p-0 text-center
hover:bg-[#800020] hover:shadow-[-1px_1.5px_10px_white] transition-all duration-250 m-[0.25em]">
hover:bg-[#800020] hover:scale-110 hover:shadow-[-1px_1.5px_10px_white] transition-all duration-250 m-[0.25em]">
<img src={dummyImage} alt={dummyCategory} className="w-[2em] h-[2em] bg-white ml-[0.25em]" />
<a href={dummyLink} className="pr-[7.5em] pt-[0.75em] pb-[0.75em]">{dummyCategory}</a>
</li>
@@ -57,13 +57,13 @@ const Sidebar: React.FC<SideBarProps> = () => {
return (
<>
<div className="overflow-hidden">
<div>
<h1 className="style"> Followed </h1>
<ul>
{shownStreamers}
</ul>
<h1 className="category-style pt-[0.50em] overflow-hidden"> Your Categories </h1>
<h1 className="category-style pt-[0.50em]"> Your Categories </h1>
<ul>
{shownCategory}
</ul>

8
frontend/src/components/Layout/QuickSettings.tsx → frontend/src/components/Settings/QuickSettings.tsx
View File

@@ -1,13 +1,15 @@
import React from "react";
import Theme from "./Theme";
import Theme from "./ThemeSetting";
import { useTheme } from "../../context/ThemeContext";
const QuickSettings: React.FC = () => {
const { theme } = useTheme();
return (
<div className="fixed top-0 right-0 w-[250px] h-screen p-4 z-[90] overflow-y-auto"
style={{ backgroundColor: 'var(--bg-color)', color: 'var(--text-color)' }}>
<div
className="fixed top-0 right-0 w-[250px] h-screen p-4 z-[90] overflow-y-auto"
style={{ backgroundColor: "var(--bg-color)", color: "var(--text-color)" }}
>
<h3 className="text-xl">Current Theme: {theme}</h3>
<Theme />
</div>

0
frontend/src/components/Layout/Theme.tsx → frontend/src/components/Settings/ThemeSetting.tsx
View File

19
frontend/src/components/Video/ChatPanel.tsx
View File

@@ -1,6 +1,6 @@
import React, { useState, useEffect, useRef } from "react";
import Input from "../Layout/Input";
import Button from "../Layout/Button";
import Input from "../Input/Input";
import Button from "../Input/Button";
import AuthModal from "../Auth/AuthModal";
import { useAuthModal } from "../../hooks/useAuthModal";
import { useAuth } from "../../context/AuthContext";
@@ -117,7 +117,9 @@ const ChatPanel: React.FC<ChatPanelProps> = ({
className="max-w-[30vw] h-full flex flex-col rounded-lg p-4"
style={{ gridArea: "1 / 2 / 3 / 3" }}
>
<h2 className="text-xl font-bold mb-4 text-white text-center">Stream Chat</h2>
<h2 className="text-xl font-bold mb-4 text-white text-center">
Stream Chat
</h2>
<div
ref={chatContainerRef}
@@ -135,7 +137,7 @@ const ChatPanel: React.FC<ChatPanelProps> = ({
src="/images/monkey.png"
alt="User Avatar"
className="w-full h-full object-cover"
style={{ width: '2.5em', height: '2.5em' }}
style={{ width: "2.5em", height: "2.5em" }}
/>
</div>
@@ -143,10 +145,11 @@ const ChatPanel: React.FC<ChatPanelProps> = ({
<div className="flex items-center space-x-0.5em">
{/* Username */}
<span
className={`font-bold text-[1em] ${msg.chatter_username === username
? "text-purple-600"
: "text-green-400"
}`}
className={`font-bold text-[1em] ${
msg.chatter_username === username
? "text-purple-600"
: "text-green-400"
}`}
>
{msg.chatter_username}
</span>

18
frontend/src/components/aside/GenreList.tsx
View File

@@ -1,18 +0,0 @@
import React from 'react'
import { useState } from "react";
interface GenreListProps {
}
const GenreList: React.FC<GenreListProps> = () => {
const [genres, setGenres] = useState(true)
return (
<div>GenreList</div>
)
}
export default GenreList;

2
frontend/src/pages/NotFoundPage.tsx
View File

@@ -1,6 +1,6 @@
import React, { useState, useEffect } from "react";
import { useNavigate } from "react-router-dom";
import Button from "../components/Layout/Button";
import Button from "../components/Input/Button";
const NotFoundPage: React.FC = () => {
const navigate = useNavigate();

6
frontend/src/pages/UserPage.tsx
View File

@@ -1,13 +1,13 @@
import React, { useState, useEffect } from "react";
import Navbar from "../components/Layout/Navbar";
import Navbar from "../components/Navigation/Navbar";
import AuthModal from "../components/Auth/AuthModal";
import { useAuthModal } from "../hooks/useAuthModal";
import { useAuth } from "../context/AuthContext";
import { useParams } from "react-router-dom";
import { ListItem } from "../components/Layout/ListRow";
import ListItem from "../components/Layout/ListItem";
import { useFollow } from "../hooks/useFollow";
import { useNavigate } from "react-router-dom";
import Button from "../components/Layout/Button";
import Button from "../components/Input/Button";
interface UserProfileData {
id: number;

32
frontend/src/pages/VideoPage.tsx
View File

@@ -1,6 +1,6 @@
import React, { useState, useEffect } from "react";
import Navbar from "../components/Layout/Navbar";
import Button, { ToggleButton } from "../components/Layout/Button";
import Navbar from "../components/Navigation/Navbar";
import { ToggleButton } from "../components/Input/Button";
import ChatPanel from "../components/Video/ChatPanel";
import { useNavigate, useParams } from "react-router-dom";
import { useAuthModal } from "../hooks/useAuthModal";
@@ -9,7 +9,7 @@ import { useFollow } from "../hooks/useFollow";
import VideoPlayer from "../components/Video/VideoPlayer";
import { SocketProvider } from "../context/SocketContext";
import AuthModal from "../components/Auth/AuthModal";
import CheckoutForm, {Return} from "../components/Checkout/CheckoutForm";
import CheckoutForm, { Return } from "../components/Checkout/CheckoutForm";
interface VideoPageProps {
streamerId: number;
@@ -101,8 +101,9 @@ const VideoPage: React.FC<VideoPageProps> = ({ streamerId }) => {
<div
id="container"
className={`grid ${isChatOpen ? "w-[100vw]" : "w-[125vw]"
} grid-rows-[auto_1fr] bg-gray-900 h-full grid-cols-[auto_25vw] transition-all`}
className={`grid ${
isChatOpen ? "w-[100vw]" : "w-[125vw]"
} grid-rows-[auto_1fr] bg-gray-900 h-full grid-cols-[auto_25vw] transition-all`}
>
<div className="relative">
<VideoPlayer streamId={streamerId} />
@@ -115,7 +116,9 @@ const VideoPage: React.FC<VideoPageProps> = ({ streamerId }) => {
>
{isChatOpen ? "Hide Chat" : "Show Chat"}
<small className="absolute right-0 left-0 -bottom-0 group-hover:-bottom-5 opacity-0 group-hover:opacity-100 text-white transition-all">Press C</small>
<small className="absolute right-0 left-0 -bottom-0 group-hover:-bottom-5 opacity-0 group-hover:opacity-100 text-white transition-all">
Press C
</small>
</ToggleButton>
<ChatPanel
@@ -191,7 +194,10 @@ const VideoPage: React.FC<VideoPageProps> = ({ streamerId }) => {
<span className="text-gray-400 text-[0.75em]">Started</span>
<span className="text-[0.75em]">
{streamData
? `${Math.floor((Date.now() - new Date(streamData.startTime).getTime()) / 3600000)} hours ago`
? `${Math.floor(
(Date.now() - new Date(streamData.startTime).getTime()) /
3600000
)} hours ago`
: "Loading..."}
</span>
</div>
@@ -211,11 +217,17 @@ const VideoPage: React.FC<VideoPageProps> = ({ streamerId }) => {
Subscribe
</button>
</div>
</div>
{showCheckout && <CheckoutForm onClose={() => setShowCheckout(false)} streamerID={streamerId}/>}
{showCheckout && (
<CheckoutForm
onClose={() => setShowCheckout(false)}
streamerID={streamerId}
/>
)}
{showReturn && <Return />}
{showAuthModal && <AuthModal onClose={() => setShowAuthModal(false)} />}
{showAuthModal && (
<AuthModal onClose={() => setShowAuthModal(false)} />
)}
</div>
</div>
</SocketProvider>