Skip to content

Commit

Permalink
Merge pull request #92 from SEP4Y-S24/dev
Browse files Browse the repository at this point in the history 
Dev
  • Loading branch information
@ricardofernandes21
ricardofernandes21 authored May 28, 2024
2 parents 0559ebe + a0d5b3f commit b611f76
Show file tree
Hide file tree
Showing 26 changed files with 467 additions and 423 deletions.
6 changes: 4 additions & 2 deletions src/components/Elements/Button/Button.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,16 +5,18 @@ interface Props{
onClick?: () => void;
type?: "button" | "submit" | "reset";
className?: string;
disabled?: boolean;
}

const Button = ({text, onClick, styleType, className, type}: Props) => {
const Button = ({text, onClick, styleType, className, type, disabled}: Props) => {
let border;
let textColor;
let hover;
let color;
if (type === undefined) {
type = "button";
}
let isDisabled = disabled ? disabled : false;

switch (styleType) {
case "danger":
Expand Down Expand Up @@ -57,7 +59,7 @@ const Button = ({text, onClick, styleType, className, type}: Props) => {
return (
<button className={clsx(
`${color} ${hover} ${className} py-2 px-4 rounded ${border} ${textColor}`
)} onClick={onClick} type={type}>{text}</button>
)} onClick={onClick} type={type} disabled={disabled}>{text}</button>
);
};

Expand Down
52 changes: 34 additions & 18 deletions src/components/Layout/MainLayout.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -11,6 +11,8 @@ import {NavLink, Link} from 'react-router-dom';
import logo from '../../assets/Logo.svg';
import {useLogout, useUser} from "../../lib/auth";
import Heading from "../Elements/Headings/Heading";
import {getPokemonPicById} from "../../features/avatarPic/api";
import {useEffect} from "react";
import storage from '../../utils/storage';


Expand Down Expand Up @@ -38,8 +40,6 @@ const SideNavigation = () => {
const handleClick = (index:any) => {
setActive(index);
};



return (
<>
Expand Down Expand Up @@ -69,8 +69,12 @@ type UserNavigationItem = {
};

const UserNavigation = () => {

const [userAvatar, setUserAvatar] = React.useState<string | null>(null);
const logout = useLogout();
const user = useUser();
const userName = user.data?.email;
let userAvatarId:number = parseInt(user.data?.avatarId);


const userNavigation = [
{name: 'Your Profile', to: './profile'},
Expand All @@ -79,31 +83,44 @@ const UserNavigation = () => {
to: '',
onClick: () => {
logout.mutate({});
storage.clearClock() // clear the clock settings
console.log('Sign out');
},
},
].filter(Boolean) as UserNavigationItem[];
const user = useUser();
const userName = user.data?.email;



useEffect(() => {
if (userAvatarId === undefined || isNaN(userAvatarId))
{
userAvatarId = 1;
}
const fetchUserAvatar = async () => {
if (userAvatarId) {
const avatar = await getPokemonPicById(userAvatarId);
setUserAvatar(avatar);
}
};
fetchUserAvatar();
}, [userAvatarId]);

return (
<Menu as="div" className="ml-3 relative">
{({open}) => (
<>
<div>
<Menu.Button
className="max-w-xs p-2 flex items-center text-sm rounded-full focus:outline-none ">
className="max-w-xs p-2 flex items-center text-sm rounded-full focus:outline-none">
<div className='grid grid-cols-1 pr-4'>
<div><span className='text-dark font-medium'>{userName}</span></div>
<div><span className='text-xs text-primaryText'>Clock user</span></div>
</div>
<div className='rounded-3xl max-w-10 max-h-10'>
<img alt='userAvatar' className='rounded-full'
src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcRlyG6nAdKXe4OsY7Un96eqGuC7XxxSBaUKZQ&usqp=CAU"/>
</div>
{userAvatar && (
<img
className="h-8 w-8 rounded-full"
src={userAvatar}
alt="User Avatar"
/>
)}
</Menu.Button>
</div>
<Transition
Expand All @@ -118,14 +135,13 @@ const UserNavigation = () => {
>
<Menu.Items
static
className="origin-top-right absolute right-0 mt-2 w-48 rounded-md shadow-lg py-1 bg-white "
>
className="origin-top-right z-10 absolute right-0 mt-2 w-48 rounded-md shadow-lg py-1 bg-white ring-1 ring-black ring-opacity-5 focus:outline-none">
{userNavigation.map((item) => (
<Menu.Item key={item.name}>
{({active}) => (
<Link
onClick={item.onClick}
to={item.to}
onClick={item?.onClick}
className={clsx(
'block px-4 py-2 text-sm text-primaryText font-medium hover:bg-primaryColorOpacity hover:text-primaryColor',
)}
Expand All @@ -143,6 +159,8 @@ const UserNavigation = () => {
);
};

export default UserNavigation;

type MobileSidebarProps = {
sidebarOpen: boolean;
setSidebarOpen: React.Dispatch<React.SetStateAction<boolean>>;
Expand Down Expand Up @@ -273,7 +291,6 @@ type MainLayoutProps = {

export const MainLayout = ({children}: MainLayoutProps) => {
const [sidebarOpen, setSidebarOpen] = React.useState(false);

return (
<div className="h-screen flex overflow-hidden bg-gray-100">
<MobileSidebar sidebarOpen={sidebarOpen} setSidebarOpen={setSidebarOpen}/>
Expand All @@ -282,8 +299,7 @@ export const MainLayout = ({children}: MainLayoutProps) => {
<div className="relative z-10 flex-shrink-0 flex h-16 bg-white shadow">
<button
className="px-4 border-gray-200 text-gray-500 focus:outline-none focus:ring-2 focus:ring-inset focus:ring-indigo-500 md:hidden"
onClick={() => setSidebarOpen(true)}
>
onClick={() => setSidebarOpen(true)}>
<span className="sr-only">Open sidebar</span>
<Bars4Icon className="h-6 w-6" aria-hidden="true"/>
</button>
Expand Down
129 changes: 59 additions & 70 deletions src/features/alarm/components/AddAlarm.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,90 +1,87 @@
import {useEffect, useState} from "react";
import { useEffect, useState } from "react";
import Heading from "../../../components/Elements/Headings/Heading";
import InputField from "../../../components/Form/InputField";
import { LocalizationProvider, TimePicker } from "@mui/x-date-pickers";
import { AdapterDayjs } from "@mui/x-date-pickers/AdapterDayjs";
import React from "react";
import { Dayjs } from "dayjs";
import Button from "../../../components/Elements/Button";
import {CreateAlarmProps} from "../types";
import { createAlarm} from "../api/alarmApi";
import SelectForm from "../../../components/Form/selectForm";
import {ClockPropsResponse, SimpleClockProps} from "../../clockSettings/types";
import {getAllClocks} from "../../clockSettings/api/clockApi";
import { CreateAlarmProps } from "../types";
import { createAlarm } from "../api/alarmApi";
import { SimpleClockProps } from "../../clockSettings/types";
import { getAllClocks } from "../../clockSettings/api/clockApi";
import storage from "../../../utils/storage";

import PopUp from "../../../components/Elements/PopUp/PopUp";

interface AddAlarmProps {
setChange: React.Dispatch<React.SetStateAction<boolean>>;
}

change: boolean;
setChange: React.Dispatch<React.SetStateAction<boolean>>;
}

const AddAlarm: React.FC<AddAlarmProps> = ({ setChange}) => {
const AddAlarm: React.FC<AddAlarmProps> = ({ change, setChange }) => {
const [alarmName, setAlarmName] = useState("");
const [nameError, setNameError] = useState("");
const [alarmTime, setAlarmTime] = React.useState<Dayjs | null>(null);
const [timeError, setTimeError] = useState("");
const [clockError, setClockError] = useState("");
const [selectedClock, setSelectedClock] = useState<{ id: number; name: string }>({
id: 0,
name: "Select",
});
const [clocks, setClocks] = useState<SimpleClockProps[]>([]);
useEffect(() => {
const fetchClocks = async () => {
try {
console.log("inside try of fetching clocks");
const response = await getAllClocks(storage.getUser().userId); // Adjust the endpoint to your API
const clocks: SimpleClockProps[] = response.map(clock => ({
id: clock.id,
name: clock.name
}));
setClocks(clocks);
console.log("clocks"+clocks);
} catch (error) {
console.error('Error fetching clocks:', error);
}
};
const [clocks, setClocks] = useState<SimpleClockProps[]>([]);
const [clockId, setClockId] = useState<string | null>(null);

fetchClocks();
}, []);
useEffect(() => {
try {
const storedClockId = storage.getClock()?.clockId || null;
setClockId(storedClockId);
} catch (error) {
console.error("Error fetching clock ID from storage:", error);
setClockId(null);
}

const toggleChangeAfterTwoSeconds = () => {
setTimeout(() => {
setChange(prevChange => !prevChange);
}, 500); // 2000 milliseconds = 2 seconds
const fetchClocks = async () => {
try {
const response = await getAllClocks(storage.getUser().userId);
const clocks: SimpleClockProps[] = response.map((clock) => ({
id: clock.id,
name: clock.name,
}));
setClocks(clocks);
} catch (error) {
console.error("Error fetching clocks:", error);
}
};

fetchClocks();
}, []);

const toggleChangeAfterTwoSeconds = () => {
setTimeout(() => {
setChange((prevChange) => !prevChange);
}, 2000); // 2000 milliseconds = 2 seconds
};

const handleAddAlarm = () => {
if (!alarmTime) {
setTimeError("Please select a time.");
return;
}
if (!alarmName) {
setNameError("Please enter a name.");
if (clockId != null) {
if (alarmTime == null) {
setTimeError("Please select a time.");
return;
}
if (selectedClock.id === 0) {
setClockError("Please select a clock");
return;
}
else{
} else {
let createAlarmData: CreateAlarmProps = {
clock_id: selectedClock.id.toString(),
hours: Number(alarmTime.format("HH")),
minutes: Number(alarmTime.format("mm")),
name: alarmName,
}
clock_id: clockId,
hours: Number(alarmTime.format("HH")),
minutes: Number(alarmTime.format("mm")),
name: alarmName,
};
console.log(createAlarmData);
createAlarm(createAlarmData).then((response) => {
createAlarm(createAlarmData)
.then((response) => {
console.log(response);
toggleChangeAfterTwoSeconds()
}).catch(
(error) => {
console.log(error);
}
)
setChange((prevChange) => !prevChange);
})
.catch((error) => {
console.log(error);
});
}
}

// Reset fields
setAlarmName("");
setAlarmTime(null);
Expand All @@ -93,7 +90,6 @@ const AddAlarm: React.FC<AddAlarmProps> = ({ setChange}) => {
setClockError("");
};


return (
<>
<Heading text={"Add an alarm"} type={"heading1"} className="mb-3" />
Expand All @@ -107,14 +103,6 @@ const AddAlarm: React.FC<AddAlarmProps> = ({ setChange}) => {
}
error={nameError}
/>
<SelectForm
dropdownLabel="Select a clock"
options={clocks}
className="mb-5"
value={selectedClock}
onChange={setSelectedClock}
error={clockError}
/>
<LocalizationProvider dateAdapter={AdapterDayjs}>
<div className="mt-2">
<TimePicker
Expand All @@ -135,6 +123,7 @@ const AddAlarm: React.FC<AddAlarmProps> = ({ setChange}) => {
styleType={"info"}
className={"mt-5 justify-center"}
type="submit"
disabled={clockId === null}
/>
</>
);
Expand Down
Loading

0 comments on commit b611f76

Please sign in to comment.