Skip to content

Commit

Permalink
feat: create components
Browse files Browse the repository at this point in the history
  • Loading branch information
Ramin Rezaei committed May 28, 2024
1 parent 24899dc commit 9f9876e
Show file tree
Hide file tree
Showing 4 changed files with 70 additions and 42 deletions.
33 changes: 33 additions & 0 deletions src/domains/counter/counter-chat-item.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,33 @@
import { animator } from "shared/utils/animator";
import { classnames } from "shared/utils/classnames";

interface CounterChatItemProps {
text: string;
created: string;
isLeft: boolean;
}

export function CounterChatItem({ text, created, isLeft }: CounterChatItemProps) {
return (
<div className={classnames(
'w-full flex items-center',
{
'justify-end': isLeft,
'justify-start': !isLeft
}
)}>
<div className={classnames(
'relative max-w-full py-2 px-3 text-sm overflow-hidden',
{
'dark:bg-slate-700 bg-slate-200 rounded-r-xl rounded-tl-xl': isLeft,
'dark:bg-slate-500 bg-slate-300 rounded-l-xl rounded-tr-xl': !isLeft
},
animator({ name: isLeft ? "bounceInLeft" : "bounceInRight" })
)}
>
<p className="whitespace-pre-line text-right leading-6">{text}</p>
<span dir="ltr" className="text-xs mt-1 opacity-40">{created}</span>
</div>
</div>
);
}
29 changes: 29 additions & 0 deletions src/domains/counter/counter-header.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,29 @@
import { useSelector } from "react-redux";
import { useEffect, useState } from "react";
import { animator } from "../../shared/utils/animator";
import { classnames } from "../../shared/utils/classnames";
import { appSelectors } from "../../shared/redux/app/app-selectors";
import { calculateTimeDifference } from "../../shared/utils/calculate-time-difference";

export function CounterHeader({ length = 0 }) {
const [time, setTime] = useState<string>('Loading ...');
const { startDate, startTime } = useSelector(appSelectors.appData);

useEffect(() => {
const intervalId = (startDate && startTime) ? setInterval(() => {
setTime(calculateTimeDifference(startDate, startTime));
}, 1000) : undefined;
return () => clearInterval(intervalId);
}, [startDate, startTime]);

return (
<header className={classnames(
"top-0 z-20 fixed w-full flex flex-col items-center justify-center shadow-md p-5 bg-white/20 dark:bg-black/20 backdrop-blur-sm",
animator({ name: 'fadeInDown' })
)}>
<h1 className="tas-font text-2xl mt-4">The Memories 🩵</h1>
<h3 className="text-s mt-1">{`You have ${length} memories now.`}</h3>
<h3 className="text-app-color text-sm leading-8 mt-1">{time}</h3>
</header>
);
}
48 changes: 7 additions & 41 deletions src/domains/counter/index.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -3,28 +3,27 @@ import { useNavigate } from "react-router-dom";
import { useEffect, useState, FormEvent } from "react";
import { useDispatch, useSelector } from "react-redux";

import { CounterHeader } from "./counter-header";
import { CounterChatItem } from "./counter-chat-item";
import { ROUTES } from "../../shared/constants/routes";
import { animator } from "../../shared/utils/animator";
import { classnames } from "../../shared/utils/classnames";
import { appSelectors } from "../../shared/redux/app/app-selectors";
import { userLogoutAction } from "../../shared/redux/user/user-slice";
import { userSelectors } from "../../shared/redux/user/user-selectors";
import { calculateTimeDifference } from "../../shared/utils/calculate-time-difference";

import LOVE_ANIMATION from '../../shared/assets/love-animation.json';

export function CounterPage() {
const dispatch = useDispatch();
const navigate = useNavigate();
const [text, setText] = useState<string>('');
const [time, setTime] = useState<string>('Loading ...');
const { isAuthenticated } = useSelector(userSelectors.userInfo);
const { startDate, startTime } = useSelector(appSelectors.appData);

const [items, setItems] = useState<{ text: string; isLeft: boolean; created: string; }[]>([]);

const onSubmit = (e: FormEvent<HTMLButtonElement>) => {
e.preventDefault();
// TODO: Request
const date = new Date();
const created = `${date.getFullYear()} / ${date.getMonth()} / ${date.getDay()} - ${date.getHours()}:${date.getMinutes()}`;
setItems([
Expand All @@ -41,50 +40,17 @@ export function CounterPage() {
}
}, [isAuthenticated]);

useEffect(() => {
const intervalId = (startDate && startTime) ? setInterval(() => {
setTime(calculateTimeDifference(startDate, startTime));
}, 1000) : undefined;
return () => clearInterval(intervalId);
}, [startDate, startTime]);

return (
<div className="w-full min-h-screen overflow-y-auto flex flex-col items-center overflow-x-hidden">
<header className={classnames(
"top-0 z-20 fixed w-full flex flex-col items-center justify-center shadow-md p-5 bg-white/20 dark:bg-black/20 backdrop-blur-sm",
animator({ name: 'fadeInDown' })
)}>
<h1 className="tas-font text-2xl mt-4">The Memories 🩵</h1>
<h3 className="text-s mt-1">{`You have ${items.length} memories now.`}</h3>
<h3 className="text-app-color text-sm leading-8 mt-1">{time}</h3>
</header>
<div className="w-full h-screen flex flex-col items-center">
<CounterHeader />

<section
dir="rtl"
style={{ height: 'calc(100vh - 60px)' }}
className="w-full flex flex-col justify-end items-end px-5 pb-4 gap-2 z-10"
>
{items.map(({ text, created, isLeft }, index) => (
<div key={index} className={classnames(
'w-full flex items-center',
{
'justify-end': isLeft,
'justify-start': !isLeft
}
)}>
<div className={classnames(
'relative max-w-full py-2 px-3 text-sm overflow-hidden',
{
'dark:bg-slate-700 bg-slate-200 rounded-r-xl rounded-tl-xl': isLeft,
'dark:bg-slate-500 bg-slate-300 rounded-l-xl rounded-tr-xl': !isLeft
},
animator({ name: isLeft ? "bounceInLeft" : "bounceInRight" })
)}
>
<p className="whitespace-pre-line text-right leading-6">{text}</p>
<span dir="ltr" className="text-xs mt-1 opacity-40">{created}</span>
</div>
</div>
{items.map((item, index) => (
<CounterChatItem key={index} {...item} />
))}
</section>

Expand Down
2 changes: 1 addition & 1 deletion src/shared/layout/index.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -25,7 +25,7 @@ export function Layout({ children }: GCommonComponentPropertiesWithChildren) {
}, []);

return (
<main className='h-screen select-none flex flex-col w-full overflow-hidden bg-slate-100 dark:bg-slate-800 text-black dark:text-white relative'>
<main className='h-screen select-none flex flex-col w-full bg-slate-100 dark:bg-slate-800 text-black dark:text-white relative'>
<div className="absolute top-0 left-4 z-30 flex items-start justify-center gap-2">
<ToggleThemeButton />
<ExitButton />
Expand Down

0 comments on commit 9f9876e

Please sign in to comment.