-
Notifications
You must be signed in to change notification settings - Fork 52
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
refactor: implement the new design for visited sites view
- Loading branch information
Showing
18 changed files
with
124 additions
and
71 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
2 changes: 1 addition & 1 deletion
2
...ivity/components/app-visited-skeleton.tsx → ...vity/components/visited-item-skeleton.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,51 +1,80 @@ | ||
| import { useTimeDailyActivity } from '@app/hooks/features/useTimeDailyActivity'; | ||
| import { AppVisitedSkeleton } from './components/app-visited-skeleton'; | ||
| import { VisitedItemSkeleton } from './components/visited-item-skeleton'; | ||
| import { groupAppsByHour } from '@app/helpers/array-data'; | ||
| import { useTranslations } from 'next-intl'; | ||
| import AppVisitedItem from './components/app-visited-Item'; | ||
| import React from 'react'; | ||
| import VisitedItem from './components/visited-Item'; | ||
| import { useMemo } from 'react'; | ||
| // import { AppVisitedModal } from './components/app-visited-details'; | ||
|
|
||
| export const VisitedSitesTab = React.memo(function VisitedSitesT() { | ||
| const { visitedSites, loading } = useTimeDailyActivity('URL'); | ||
| export function VisitedSitesTab() { | ||
| const { visitedSites, loading } = useTimeDailyActivity('SITE'); | ||
| const t = useTranslations(); | ||
| const sites = groupAppsByHour(visitedSites); | ||
| const sites = groupAppsByHour(visitedSites ?? []); | ||
|
|
||
| const headers = useMemo( | ||
| () => [ | ||
| { | ||
| title: t('timer.VISITED_SITES'), | ||
| width: '20%' | ||
| }, | ||
| { | ||
| title: t('timer.VISITED_DATES'), | ||
| width: '25%' | ||
| }, | ||
| { | ||
| title: t('timer.PERCENT_USED'), | ||
| width: '40%' | ||
| }, | ||
| { | ||
| title: t('timer.TIME_SPENT_IN_HOURS'), | ||
| width: '15%' | ||
| } | ||
| ], | ||
| [t] | ||
| ); | ||
| return ( | ||
| <div> | ||
| <div className="flex justify-end w-full">{/* TODO: Filters components */}</div> | ||
| <header className="bg-gray-200 dark:bg-[#26272C] rounded-md p-4 flex items-center justify-between"> | ||
| <h3 className="text-lg font-semibold flex-1">{t('timer.APPS')}</h3> | ||
| <h3 className="text-lg text-center font-semibold 2xl:w-56 3xl:w-64">{t('timer.VISITED_DATES')}</h3> | ||
| <h3 className="text-lg text-center font-semibold flex-1">{t('timer.PERCENT_USED')}</h3> | ||
| <h3 className="text-lg font-semibold 2xl:w-52 3xl:w-64 text-end">{t('timer.TIME_SPENT_IN_HOURS')}</h3> | ||
| </header> | ||
| <section> | ||
| {sites.map((site, i) => ( | ||
| <div | ||
| key={i} | ||
| className="border shadow-lg rounded-md my-4 p-4 dark:border-[#FFFFFF0D] bg-white dark:bg-[#1B1D22]" | ||
| > | ||
| <h3>{site.hour}</h3> | ||
| <div> | ||
| {site.apps?.map((item, i) => ( | ||
| <div key={i} className="w-full"> | ||
| <AppVisitedItem app={item} totalMilliseconds={site.totalMilliseconds} type="SITE" /> | ||
| </div> | ||
| ))} | ||
| <div className="w-full space-y-6"> | ||
| <header className="bg-gray-200 dark:bg-[#26272C] rounded-[1rem] px-6 h-14 flex items-center"> | ||
| {headers.map((header, i) => ( | ||
| <div style={{ flexBasis: header.width }} key={i} className="border font-medium"> | ||
| {header.title} | ||
| </div> | ||
| ))} | ||
| </header> | ||
| <section className="space-y-6"> | ||
| {sites?.map((site, i) => ( | ||
| <div | ||
| key={i} | ||
| className="rounded-[1rem] p-[3px] bg-[linear-gradient(90deg,_rgba(185,147,230,1)_0%,_rgba(110,176,236,1)_100%)]" | ||
| > | ||
| <div className=" p-6 rounded-[1rem] bg-white dark:bg-[#26272C]"> | ||
| {site?.apps?.map((item, i) => ( | ||
| <div key={i} className="w-full"> | ||
| <VisitedItem | ||
| app={item} | ||
| totalMilliseconds={site?.totalMilliseconds} | ||
| type="SITE" | ||
| /> | ||
| </div> | ||
| ))} | ||
| </div> | ||
| </div> | ||
| ))} | ||
| </section> | ||
| {visitedSites?.length < 1 && !loading && ( | ||
| <div className="hover:dark:bg-[#26272C] border dark:border-[#26272C] dark:bg-[#191a20] p-4 py-16 rounded-md flex justify-center items-center my-2"> | ||
| <p className="text-center">{t('timer.NO_VISITED_SITE_MESSAGE')}</p> | ||
| </div> | ||
| ))} | ||
| </section> | ||
| {visitedSites.length < 1 && !loading && ( | ||
| <div className="hover:dark:bg-[#26272C] border dark:border-[#26272C] dark:bg-[#191a20] p-4 py-16 rounded-md flex justify-center items-center my-2"> | ||
| <p className="text-lg text-center">{t('timer.THERE_IS_NO_APPS_VISITED')}</p> | ||
| </div> | ||
| )} | ||
| {loading && visitedSites.length < 1 && ( | ||
| <> | ||
| <AppVisitedSkeleton /> | ||
| <AppVisitedSkeleton /> | ||
| </> | ||
| )} | ||
| )} | ||
| {loading && visitedSites?.length < 1 && ( | ||
| <> | ||
| <VisitedItemSkeleton /> | ||
| <VisitedItemSkeleton /> | ||
| </> | ||
| )} | ||
| </div> | ||
| </div> | ||
| ); | ||
| }); | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters