4nk/lecoffre-back
4
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

✨ Front integration of the notification component done

Browse Source
This commit is contained in:
Hugo Lextrait 2023-02-22 12:00:01 +01:00
parent fa7bc24fed
commit cb59b9eef8
8 changed files with 79 additions and 52 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
src/front/Stores/Toasts.tsx
View File

@ -23,7 +23,7 @@ export default class Toasts {
private toastList: IToast[] = [];
private uid: number = 0;
private defaultTime: IToast["time"] = 40000;
private defaultTime: IToast["time"] = 5000;
private defaultClosable: IToast["closable"] = true;
private defaultPriority: IToast["priority"] = EToastPriority.LOW;

5
src/front/assets/icons/info.svg Normal file
View File

@ -0,0 +1,5 @@
<svg width="12" height="12" viewBox="0 0 12 12" fill="none" xmlns="http://www.w3.org/2000/svg">
<circle cx="6" cy="6" r="6" fill="#FFB017"/>
<path d="M6 3V5.66667" stroke="white" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
<circle cx="6" cy="9" r="1" fill="white"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 295 B

9
src/front/components/DesignSystem/Header/Notifications/NotificationModal/classes.module.scss
View File

@ -26,3 +26,12 @@
overflow-y: auto;
}
}
.background{
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: transparent;
}

59
src/front/components/DesignSystem/Header/Notifications/NotificationModal/index.tsx
View File

@ -27,40 +27,43 @@ export default class NotificationModal extends React.Component<IProps, IState> {
public override render(): JSX.Element | null {
if (!this.props.isOpen) return null;
return <div className={classes["root"]}>
<div className={classes["notification-header"]}>
<Typography typo={ITypo.P_16}>
Notifications
</Typography>
<div className={classes["close-icon"]} onClick={this.props.closeModal}>
<Image src={CloseIcon} alt="Close notification modal" className={classes["close-icon"]}></Image>
</div>
</div>;
return <>
<div className={classes["background"]} onClick={this.props.closeModal}/>
<div className={classes["root"]}>
<div className={classes["notification-header"]}>
<Typography typo={ITypo.P_16}>
Notifications
</Typography>
<div className={classes["close-icon"]} onClick={this.props.closeModal}>
<Image src={CloseIcon} alt="Close notification modal" className={classes["close-icon"]}></Image>
</div>
</div>;
<div className={classes["notification-body"]}>
<>
{Toasts.getInstance().toasts.length === 0
?
<div>
<Typography typo={ITypo.P_16}>No notification yet</Typography>
</div>
: <ToastHandler />}
</>
<div className={classes["notification-body"]}>
<>
{Toasts.getInstance().toasts.length === 0
?
<div>
<Typography typo={ITypo.P_16}>No notification yet</Typography>
</div>
: <ToastHandler />}
</>
</div>
</div>
</div>
</>
}
public override componentDidMount() {
this.removeOnToastChange = Toasts.getInstance().onChange(this.handleToastChange);
}
this.removeOnToastChange = Toasts.getInstance().onChange(this.handleToastChange);
}
public override componentWillUnmount() {
this.removeOnToastChange();
}
public override componentWillUnmount() {
this.removeOnToastChange();
}
private handleToastChange(toastList: IToast[] | null) {
this.setState({
toastList,
});
}
this.setState({
toastList,
});
}
}

7
src/front/components/DesignSystem/Header/Notifications/classes.module.scss
View File

@ -3,7 +3,8 @@
.root {
.icon-container{
position: relative;
cursor: pointer;
.notification-icon{
height: 24px;
width: 24px;
@ -12,10 +13,6 @@
position: absolute;
top: 0;
right: 0;
height: 12px;
width: 12px;
border-radius: 50%;
background-color: $orange-flash;
}
}
}

36
src/front/components/DesignSystem/Header/Notifications/index.tsx
View File

@ -2,37 +2,61 @@ import React from "react";
import classes from "./classes.module.scss";
import Image from "next/image";
import NotificationIcon from "@Assets/icons/notification.svg";
import Toasts from "@Front/Stores/Toasts";
import Toasts, { IToast } from "@Front/Stores/Toasts";
import NotificationModal from "./NotificationModal";
import InfoIcon from "@Assets/icons/info.svg";
type IProps = {};
type IState = {
hasNotifications: boolean;
isModalOpen: boolean;
toastList: IToast[] | null;
};
export default class Notifications extends React.Component<IProps, IState> {
private removeOnToastChange: () => void = () => { };
constructor(props: IProps) {
super(props);
this.state = {
hasNotifications: true,
isModalOpen: true,
isModalOpen: false,
toastList: Toasts.getInstance().toasts, //TODO : Get from bbd
hasNotifications: Toasts.getInstance().toasts.length > 0, // TODO: Change this when we have notification stored in bbd, unread notifications
};
this.openModal = this.openModal.bind(this);
this.closeModal = this.closeModal.bind(this);
this.handleToastChange = this.handleToastChange.bind(this);
}
public override render(): JSX.Element {
const hasNotifications = Toasts.getInstance().toasts.length;
console.log(hasNotifications)
return <div className={classes["root"]}>
<div className={classes["icon-container"]} onClick={this.openModal}>
<Image alt="notifications" src={NotificationIcon} className={classes["notification-icon"]} />
{this.state.hasNotifications && <div className={classes["notification-dot"]}></div>}
{this.state.hasNotifications &&
<Image className={classes["notification-dot"]} src={InfoIcon} alt="Unread notification" />
}
</div>
{this.state.isModalOpen && <NotificationModal isOpen={this.state.isModalOpen} closeModal={this.closeModal} />}
</div>;
}
public override componentDidMount() {
this.removeOnToastChange = Toasts.getInstance().onChange(this.handleToastChange);
}
public override componentWillUnmount() {
this.removeOnToastChange();
}
private handleToastChange(toastList: IToast[] | null) {
this.setState({
toastList,
hasNotifications: toastList ? toastList.length > 0 : false
});
}
private openModal() {
this.setState({ isModalOpen: true });
};

9
src/front/components/DesignSystem/Toasts/ToastsContainer/ToastElement/classes.module.scss
View File

@ -1,14 +1,5 @@
@import "@Themes/constants.scss";
// @keyframes loadbar-animation {
// from {
// transform: scaleX(1);
// }
// to {
// transform: scaleX(0);
// }
// }
@keyframes slide-left {
from {
opacity: 0;

4
src/front/components/Layouts/Home/index.tsx
View File

@ -8,9 +8,7 @@ export default class Home extends BasePage {
return (
<DefaultTemplate title={"HomePage"}>
<div className={classes["root"]}>
<div style={{ fontSize: "20px" }}>JDJADJIZDIAZN?DIAZ?</div>
<Typography typo={ITypo.H1}>COUCOU JE SUIS UNE TYPO</Typography>
<Typography typo={ITypo.H1Bis}>COUCOU JE SUIS UNE TYPO</Typography>
<Typography typo={ITypo.H1}>HomePage</Typography>
</div>
</DefaultTemplate>
);