fix: Screenshot Details Card show twice (#3396)

* fix: Screenshot Details Card shiw twice * fix: dark theme * fix: coderrabit suggestions
ever-co · Dec 8, 2024 · 3b7409d · 3b7409d
1 parent 94ec0de
commit 3b7409d
Show file tree

Hide file tree

Showing 3 changed files with 27 additions and 17 deletions.
diff --git a/apps/web/lib/features/activity/components/screenshoots-per-hour.tsx b/apps/web/lib/features/activity/components/screenshoots-per-hour.tsx
@@ -1,8 +1,11 @@
+"use client"
+
 import { ITimerSlot } from '@app/interfaces/timer/ITimerSlot';
 import { clsxm } from '@app/utils';
 import ScreenshotDetailsModal from './screenshot-details';
 import { useModal } from '@app/hooks';
 import ScreenshotItem from './screenshot-item';
+import React, { useCallback } from 'react';
 
 export const ScreenshootPerHour = ({
 	timeSlots,
@@ -14,6 +17,12 @@ export const ScreenshootPerHour = ({
 	stoppedAt: string;
 }) => {
 	const { isOpen, closeModal, openModal } = useModal();
+	const [selectedElement, setSelectedELement]= React.useState<ITimerSlot | null>(null)
+
+	const openScreenModal = useCallback((el: ITimerSlot) => {
+		setSelectedELement(el)
+		openModal()
+	}, [openModal])
 	return (
 		<div className="p-4 my-4 rounded-md dark:bg-[#1E2025] border-[0.125rem] dark:border-[#FFFFFF0D]">
 			<h3 className="px-4">
@@ -27,12 +36,12 @@ export const ScreenshootPerHour = ({
 							startTime={el.startedAt}
 							percent={el.percentage}
 							imageUrl={el.screenshots[0]?.thumbUrl}
-							onShow={() => openModal()}
+							onShow={() => openScreenModal(el)}
 							idSlot={el.id}
 						/>
-						<ScreenshotDetailsModal open={isOpen} closeModal={closeModal} slot={el} />
 					</div>
 				))}
+				<ScreenshotDetailsModal open={isOpen} closeModal={closeModal} slot={selectedElement} />
 			</div>
 		</div>
 	);

diff --git a/apps/web/lib/features/activity/components/screenshot-details.tsx b/apps/web/lib/features/activity/components/screenshot-details.tsx
@@ -4,6 +4,7 @@ import { Modal, ProgressBar, Tooltip } from 'lib/components';
 import { ITimerSlot } from '@app/interfaces/timer/ITimerSlot';
 import ScreenshotItem from './screenshot-item';
 import { useTranslations } from 'next-intl';
+import React from 'react';
 
 const ScreenshotDetailsModal = ({
 	open,
@@ -12,26 +13,26 @@ const ScreenshotDetailsModal = ({
 }: {
 	open: boolean;
 	closeModal: () => void;
-	slot: ITimerSlot;
+	slot?: ITimerSlot| null;
 }) => {
 	const t = useTranslations();
 	return (
 		<Modal
 			isOpen={open}
 			title="Screenshots detail"
 			closeModal={closeModal}
-			className="bg-white dark:bg-[#343434d4] p-4 rounded-lg lg:w-[60vw] xl:w-[50vw] 2xl:w-[40vw] m-8"
+			className="bg-white dark:border-[#26272C] dark:bg-[#191a20] dark:border p-4 rounded-lg lg:w-[60vw] xl:w-[50vw] 2xl:w-[40vw]"
 		>
 			<div className="w-full p-4 overflow-x-auto">
 				<h1 className="py-2 font-semibold text-lg">
-					{new Date(slot.startedAt).toLocaleTimeString()} - {new Date(slot.stoppedAt).toLocaleTimeString()}
+					{slot ? new Date(slot?.startedAt).toLocaleTimeString() + '-' +  new Date(slot?.stoppedAt).toLocaleTimeString(): null}
 				</h1>
-				<ProgressBar progress={slot.percentage + '%'} width={'100%'} />
+				<ProgressBar progress={slot ? `${slot.percentage}%` : '0%'} width={'100%'} />
 				<p className="font-semibold py-1">
-					{slot.percentage} {t('timer.PERCENT_OF_MINUTES')}
+					{slot?.percentage} {t('timer.PERCENT_OF_MINUTES')}
 				</p>
 				<div className="my-2 flex w-full overflow-x-auto">
-					{slot.screenshots.map((screenshot, i) => (
+					{slot?.screenshots.map((screenshot, i) => (
 						<div key={i} className="w-1/3 min-w-[20rem] p-2">
 							<Tooltip
 								label={screenshot.description}
@@ -40,8 +41,8 @@ const ScreenshotDetailsModal = ({
 								labelContainerClassName="w-full"
 							>
 								<ScreenshotItem
-									idSlot={slot.id}
-									endTime={slot.stoppedAt}
+									idSlot={slot?.id}
+									endTime={slot?.stoppedAt}
 									startTime={screenshot.recordedAt}
 									imageUrl={screenshot.thumbUrl}
 									percent={0}
@@ -68,24 +69,24 @@ const ScreenshotDetailsModal = ({
 						<p>
 							<span className="font-semibold mx-2">{t('timer.KEYBOARD')}</span>
 							<span>
-								{t('timer.TIMES')} : {slot.keyboard} {slot.keyboardPercentage}%
+								{t('timer.TIMES')} : {slot?.keyboard} {slot?.keyboardPercentage}%
 							</span>
 						</p>
 						<p>
 							<span className="font-semibold mx-2">{t('timer.MOUSE')}</span>
 							<span>
-								{t('timer.TIMES')} : {slot.mouse} {slot.mousePercentage}%
+								{t('timer.TIMES')} : {slot?.mouse} {slot?.mousePercentage}%
 							</span>
 						</p>
 						<p className="rounded-lg px-1 mb-1 text-white ">
-							{slot.isActive ? (
+							{slot?.isActive ? (
 								<span className=" bg-green-600 rounded-lg px-2 m-1">{t('timer.ACTIVE')}</span>
 							) : (
 								<span className=" bg-red-600 rounded-lg px-2 m-1">{t('timer.INACTIVE')}</span>
 							)}
 						</p>
 						<p>
-							{slot.isArchived ? (
+							{slot?.isArchived ? (
 								<span className=" bg-gray-600 rounded-lg px-2 m-1">{t('timer.ARCHIVED')}</span>
 							) : (
 								<span className=" bg-blue-600 rounded-lg px-2 m-1">{t('timer.NOT_ARCHIVED')}</span>
@@ -98,4 +99,4 @@ const ScreenshotDetailsModal = ({
 	);
 };
 
-export default ScreenshotDetailsModal;
+export default React.memo(ScreenshotDetailsModal);
diff --git a/apps/web/lib/features/activity/components/screenshot-item.tsx b/apps/web/lib/features/activity/components/screenshot-item.tsx
@@ -24,7 +24,7 @@ const ScreenshotItem = ({
 	return (
 		<div
 			className={clsxm(
-				'rounded-lg shadow-md hover:shadow-lg  dark:border-[#26272C] dark:bg-[#191a20] overflow-hidden h-56 w-full',
+				'rounded-lg shadow-md hover:shadow-lg  dark:border-[#26272C] dark:bg-[#191a20] dark:border overflow-hidden h-56 w-full',
 				!showProgress && !isTeamPage && '!h-48 dark:!bg-[#191a20]',
 				isTeamPage && '!h-32'
 			)}
@@ -50,7 +50,7 @@ const ScreenshotItem = ({
 				/>
 			</div>
 			<div
-				className={clsxm('w-full h-1/2 p-4 cursor-pointer bg-white', !showProgress && '!h-1/3')}
+				className={clsxm('w-full h-1/2 p-4 cursor-pointer bg-white dark:bg-[#191a20]', !showProgress && '!h-1/3')}
 				onClick={onShow}
 			>
 				{showProgress ? (