Skip to content

Commit

Permalink
Refactor/recoil to jotai (#3037)
Browse files Browse the repository at this point in the history 
* change all recoil store to jotai

* replace all recoil occurance by is jotai migration

* add writtable type

* fix: eslint errors

* fix: duplicated import in useTeamTasks.ts

* chore(deps): remove recoiljs
  • Loading branch information
@NdekoCode
NdekoCode authored Sep 20, 2024
1 parent bbeae2e commit 93df916
Show file tree
Hide file tree
Showing 168 changed files with 20,113 additions and 17,488 deletions.
81 changes: 43 additions & 38 deletions apps/web/app/[locale]/all-teams/component.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
'use client';

import { useRouter } from 'next/navigation';
import { useRecoilValue } from 'recoil';
import { useAtomValue } from 'jotai';
import { fullWidthState } from '@app/stores/fullWidth';
import { withAuthentication } from 'lib/app/authenticator';
import { Breadcrumb, Container } from 'lib/components';
Expand All @@ -18,50 +18,55 @@ import { MemberFilter } from 'lib/features/all-teams/all-team-members-filter';
import { useOrganizationTeams } from '@app/hooks';

function AllTeamsPage() {
const t = useTranslations();
const fullWidth = useRecoilValue(fullWidthState);
const view = useRecoilValue(allTeamsHeaderTabs);
const { filteredTeams, userManagedTeams } = useOrganizationAndTeamManagers();
const { isTrackingEnabled } = useOrganizationTeams();
const t = useTranslations();
const fullWidth = useAtomValue(fullWidthState);
const view = useAtomValue(allTeamsHeaderTabs);
const { filteredTeams, userManagedTeams } = useOrganizationAndTeamManagers();
const { isTrackingEnabled } = useOrganizationTeams();

const breadcrumb = [
{ title: JSON.parse(t('pages.home.BREADCRUMB')), href: '/' },
{ title: t('common.ALL_TEAMS'), href: '/all-teams' }
];
const breadcrumb = [
{ title: JSON.parse(t('pages.home.BREADCRUMB')), href: '/' },
{ title: t('common.ALL_TEAMS'), href: '/all-teams' }
];

/* If the user is not a manager in any team or if he's
/* If the user is not a manager in any team or if he's
manager in only one team, then redirect him to the home page
*/
if (userManagedTeams.length < 2) return <RedirectUser />;
if (userManagedTeams.length < 2) return <RedirectUser />;

return (
<MainLayout showTimer={isTrackingEnabled} className="items-start">
<MainHeader fullWidth={fullWidth} className={'pb-2 pt-10 sticky top-20 z-50'}>
{/* Breadcrumb */}
<div className="flex flex-row items-start justify-between mb-5">
<Breadcrumb paths={breadcrumb} className="text-sm" />
<div className="flex flex-col gap-2 items-end">
<div className="flex h-10 w-max items-center justify-center gap-1">
<HeaderTabs />
</div>
<MemberFilter />
</div>
</div>
<TeamMemberHeader view={IssuesView.CARDS} />
</MainHeader>
<Container fullWidth={fullWidth} className="flex py-10 pt-20">
<AllTeamsMembers teams={filteredTeams} view={view} />
</Container>
</MainLayout>
);
return (
<MainLayout showTimer={isTrackingEnabled} className="items-start">
<MainHeader
fullWidth={fullWidth}
className={'pb-2 pt-10 sticky top-20 z-50'}
>
{/* Breadcrumb */}
<div className="flex flex-row items-start justify-between mb-5">
<Breadcrumb paths={breadcrumb} className="text-sm" />
<div className="flex flex-col items-end gap-2">
<div className="flex items-center justify-center h-10 gap-1 w-max">
<HeaderTabs />
</div>
<MemberFilter />
</div>
</div>
<TeamMemberHeader view={IssuesView.CARDS} />
</MainHeader>
<Container fullWidth={fullWidth} className="flex py-10 pt-20">
<AllTeamsMembers teams={filteredTeams} view={view} />
</Container>
</MainLayout>
);
}

function RedirectUser() {
const router = useRouter();
useEffect(() => {
router.push('/');
}, [router]);
return <></>;
const router = useRouter();
useEffect(() => {
router.push('/');
}, [router]);
return <></>;
}

export default withAuthentication(AllTeamsPage, { displayName: 'AllManagedTeams' });
export default withAuthentication(AllTeamsPage, {
displayName: 'AllManagedTeams'
});
176 changes: 91 additions & 85 deletions apps/web/app/[locale]/calendar/page.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,6 +1,10 @@
"use client";
'use client';

import { useLocalStorageState, useModal, useOrganizationTeams } from '@app/hooks';
import {
useLocalStorageState,
useModal,
useOrganizationTeams
} from '@app/hooks';
import { fullWidthState } from '@app/stores/fullWidth';
import { clsxm } from '@app/utils';
import HeaderTabs from '@components/pages/main/header-tabs';
Expand All @@ -11,96 +15,98 @@ import { SetupFullCalendar } from 'lib/features';
import { Footer, MainLayout } from 'lib/layout';
import { useTranslations } from 'next-intl';
import { useParams } from 'next/navigation';
import React, { useMemo } from 'react';
import { useRecoilValue } from 'recoil';
import { useMemo } from 'react';
import { useAtomValue } from 'jotai';
import { HeadCalendar } from './component';
import { AddManualTimeModal } from 'lib/features/manual-time/add-manual-time-modal';
import { SetupTimeSheet, timesheetCalendar } from 'lib/features/integrations/calendar';
import {
SetupTimeSheet,
timesheetCalendar
} from 'lib/features/integrations/calendar';

const CalendarPage = () => {
const t = useTranslations();
const fullWidth = useRecoilValue(fullWidthState);
const { activeTeam, isTrackingEnabled } = useOrganizationTeams();
const [calendarTimeSheet, setCalendarTimeSheet] = useLocalStorageState<timesheetCalendar>('calendar-timesheet', 'Calendar')
const {
isOpen: isManualTimeModalOpen,
openModal: openManualTimeModal,
closeModal: closeManualTimeModal
} = useModal();
const t = useTranslations();
const fullWidth = useAtomValue(fullWidthState);
const { activeTeam, isTrackingEnabled } = useOrganizationTeams();
const [calendarTimeSheet, setCalendarTimeSheet] = useLocalStorageState<
timesheetCalendar
>('calendar-timesheet', 'Calendar');
const {
isOpen: isManualTimeModalOpen,
openModal: openManualTimeModal,
closeModal: closeManualTimeModal
} = useModal();

const params = useParams<{ locale: string }>();
const currentLocale = params ? params.locale : null;
const breadcrumbPath = useMemo(
() => [
{ title: JSON.parse(t('pages.home.BREADCRUMB')), href: '/' },
{ title: activeTeam?.name || '', href: '/' },
{ title: "CALENDAR", href: `/${currentLocale}/calendar` }
],
[activeTeam?.name, currentLocale, t]
);
const params = useParams<{ locale: string }>();
const currentLocale = params ? params.locale : null;
const breadcrumbPath = useMemo(
() => [
{ title: JSON.parse(t('pages.home.BREADCRUMB')), href: '/' },
{ title: activeTeam?.name || '', href: '/' },
{ title: 'CALENDAR', href: `/${currentLocale}/calendar` }
],
[activeTeam?.name, currentLocale, t]
);

const renderComponent = () => {
switch (calendarTimeSheet) {
case 'Calendar':
return <SetupFullCalendar />;
case 'TimeSheet':
return <SetupTimeSheet timesheet={calendarTimeSheet} />
default:
return null;
}
};
return (
<>

<MainLayout
showTimer={isTrackingEnabled}
footerClassName="hidden"
className="h-full shadow-xl"
>
<AddManualTimeModal
closeModal={closeManualTimeModal}
isOpen={isManualTimeModalOpen}
params='AddManuelTime'
timeSheetStatus='ManagerTimesheet'
/>
<div
className='fixed top-20 flex flex-col border-b-[1px] dark:border-gray-800 z-10 mx-0 w-full bg-white dark:bg-dark-high shadow-lg shadow-gray-100 dark:shadow-gray-700 '
>
<Container fullWidth={fullWidth}>
<div className="flex bg-white dark:bg-dark-high flex-row items-start justify-between mt-12">
<div className="flex justify-center items-center gap-8 h-10">
<PeoplesIcon className="text-dark dark:text-[#6b7280] h-6 w-6" />
<Breadcrumb paths={breadcrumbPath} className="text-sm" />
</div>
<div className="flex h-10 w-max items-center justify-center gap-1">
<HeaderTabs kanban={true} linkAll={true} />
</div>
</div>
<div className='flex flex-col w-full'>
<HeadCalendar
openModal={openManualTimeModal}
timesheet={calendarTimeSheet}
setCalendarTimeSheet={setCalendarTimeSheet}

/>
<div className='border border-gray-100 dark:border-gray-800 w-full'></div>
</div>
</Container>
</div>
<div className='mt-[15vh] mb-32'>
<Container fullWidth={fullWidth}>
{renderComponent()}
</Container>
</div>
</MainLayout>
<div className="bg-white dark:bg-[#1e2025] w-screen z-[5000] fixed bottom-0">
<Divider />
<Footer
className={clsxm('justify-between w-full px-0 mx-auto', fullWidth ? 'px-8' : 'x-container')}
/>
const renderComponent = () => {
switch (calendarTimeSheet) {
case 'Calendar':
return <SetupFullCalendar />;
case 'TimeSheet':
return <SetupTimeSheet timesheet={calendarTimeSheet} />;
default:
return null;
}
};
return (
<>
<MainLayout
showTimer={isTrackingEnabled}
footerClassName="hidden"
className="h-full shadow-xl"
>
<AddManualTimeModal
closeModal={closeManualTimeModal}
isOpen={isManualTimeModalOpen}
params="AddManuelTime"
timeSheetStatus="ManagerTimesheet"
/>
<div className="fixed top-20 flex flex-col border-b-[1px] dark:border-gray-800 z-10 mx-0 w-full bg-white dark:bg-dark-high shadow-lg shadow-gray-100 dark:shadow-gray-700 ">
<Container fullWidth={fullWidth}>
<div className="flex flex-row items-start justify-between mt-12 bg-white dark:bg-dark-high">
<div className="flex items-center justify-center h-10 gap-8">
<PeoplesIcon className="text-dark dark:text-[#6b7280] h-6 w-6" />
<Breadcrumb paths={breadcrumbPath} className="text-sm" />
</div>
<div className="flex items-center justify-center h-10 gap-1 w-max">
<HeaderTabs kanban={true} linkAll={true} />
</div>
</div>
<div className="flex flex-col w-full">
<HeadCalendar
openModal={openManualTimeModal}
timesheet={calendarTimeSheet}
setCalendarTimeSheet={setCalendarTimeSheet}
/>
<div className="w-full border border-gray-100 dark:border-gray-800"></div>
</div>
</>
);
</Container>
</div>
<div className="mt-[15vh] mb-32">
<Container fullWidth={fullWidth}>{renderComponent()}</Container>
</div>
</MainLayout>
<div className="bg-white dark:bg-[#1e2025] w-screen z-[5000] fixed bottom-0">
<Divider />
<Footer
className={clsxm(
'justify-between w-full px-0 mx-auto',
fullWidth ? 'px-8' : 'x-container'
)}
/>
</div>
</>
);
};

export default withAuthentication(CalendarPage, { displayName: 'Calendar' });
Loading

0 comments on commit 93df916

Please sign in to comment.