Skip to content

Commit

Permalink
fix: Screenshot Details Card shiw twice
Browse files Browse the repository at this point in the history
  • Loading branch information
Cedric921 committed Dec 5, 2024
1 parent 88fc30c commit 344551a
Show file tree
Hide file tree
Showing 2 changed files with 22 additions and 13 deletions.
Original file line number Diff line number Diff line change
@@ -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,
Expand All @@ -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">
Expand All @@ -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>
);
Expand Down
22 changes: 11 additions & 11 deletions apps/web/lib/features/activity/components/screenshot-details.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -12,7 +12,7 @@ const ScreenshotDetailsModal = ({
}: {
open: boolean;
closeModal: () => void;
slot: ITimerSlot;
slot?: ITimerSlot;
}) => {
const t = useTranslations();
return (
Expand All @@ -24,14 +24,14 @@ const ScreenshotDetailsModal = ({
>
<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?.percentage + '%'} 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}
Expand All @@ -40,8 +40,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}
Expand All @@ -68,24 +68,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>
Expand Down

0 comments on commit 344551a

Please sign in to comment.