postiz/apps/frontend/src/components/settings/settings.component.tsx

77 lines
2.3 KiB
TypeScript

'use client';
import { GithubComponent } from '@gitroom/frontend/components/settings/github.component';
import { useCallback, useEffect } from 'react';
import { useUser } from '@gitroom/frontend/components/layout/user.context';
import { TeamsComponent } from '@gitroom/frontend/components/settings/teams.component';
import { useFetch } from '@gitroom/helpers/utils/custom.fetch';
import useSWR from 'swr';
import { LoadingComponent } from '@gitroom/frontend/components/layout/loading';
import { useRouter } from 'next/navigation';
import { useVariables } from '@gitroom/react/helpers/variable.context';
export const SettingsComponent = () => {
const {isGeneral} = useVariables();
const user = useUser();
const router = useRouter();
const fetch = useFetch();
const load = useCallback(async (path: string) => {
const { github } = await (await fetch('/settings/github')).json();
if (!github) {
return false;
}
const emptyOnes = github.find((p: { login: string }) => !p.login);
const { organizations } = emptyOnes
? await (await fetch(`/settings/organizations/${emptyOnes.id}`)).json()
: { organizations: [] };
return { github, organizations };
}, []);
const { isLoading: isLoadingSettings, data: loadAll } = useSWR(
'load-all',
load
);
useEffect(() => {
if (!isLoadingSettings && !loadAll) {
router.push('/');
}
}, [loadAll, isLoadingSettings]);
if (isLoadingSettings) {
return <LoadingComponent />;
}
if (!loadAll) {
return null;
}
return (
<div className="flex flex-col gap-[68px]">
{!isGeneral && (
<div className="flex flex-col">
<h3 className="text-[20px]">Your Git Repository</h3>
<div className="text-customColor18 mt-[4px]">
Connect your GitHub repository to receive updates and analytics
</div>
<GithubComponent
github={loadAll.github}
organizations={loadAll.organizations}
/>
{/*<div className="flex gap-[5px]">*/}
{/* <div>*/}
{/* <Checkbox disableForm={true} checked={true} name="Send Email" />*/}
{/* </div>*/}
{/* <div>Show news with everybody in Gitroom</div>*/}
{/*</div>*/}
</div>
)}
{!!user?.tier?.team_members && <TeamsComponent />}
</div>
);
};