91 lines
2.7 KiB
TypeScript
91 lines
2.7 KiB
TypeScript
'use client';
|
|
|
|
import { useCallback, useMemo } from 'react';
|
|
import { useFetch } from '@gitroom/helpers/utils/custom.fetch';
|
|
import useSWR from 'swr';
|
|
import { useUser } from '@gitroom/frontend/components/layout/user.context';
|
|
|
|
export const OrganizationSelector = () => {
|
|
const fetch = useFetch();
|
|
const user = useUser();
|
|
|
|
const load = useCallback(async () => {
|
|
return await (await fetch('/user/organizations')).json();
|
|
}, []);
|
|
|
|
const { isLoading, data } = useSWR('organizations', load, {
|
|
revalidateIfStale: false,
|
|
revalidateOnFocus: false,
|
|
refreshWhenOffline: false,
|
|
refreshWhenHidden: false,
|
|
revalidateOnReconnect: false,
|
|
});
|
|
|
|
const current = useMemo(() => {
|
|
return data?.find((d: any) => d.id === user?.orgId);
|
|
}, [data]);
|
|
|
|
const withoutCurrent = useMemo(() => {
|
|
return data?.filter((d: any) => d.id !== user?.orgId);
|
|
}, [current, data]);
|
|
|
|
const changeOrg = useCallback(
|
|
(org: { name: string; id: string }) => async () => {
|
|
await fetch('/user/change-org', {
|
|
method: 'POST',
|
|
body: JSON.stringify({ id: org.id }),
|
|
});
|
|
|
|
window.location.reload();
|
|
},
|
|
[]
|
|
);
|
|
|
|
if (isLoading || !isLoading && data?.length === 1) {
|
|
return null;
|
|
}
|
|
|
|
return (
|
|
<div className="bg-third h-[48px] flex items-center min-w-[172px] select-none relative group">
|
|
<div className="border-tableBorder py-[8px] px-[12px] border w-full h-full flex items-center">
|
|
<div className="flex-1">{current?.name || 'Loading...'}</div>
|
|
{data?.length > 1 && (
|
|
<div>
|
|
<svg
|
|
xmlns="http://www.w3.org/2000/svg"
|
|
width="16"
|
|
height="16"
|
|
viewBox="0 0 16 16"
|
|
fill="none"
|
|
>
|
|
<g clipPath="url(#clip0_140_1160)">
|
|
<path
|
|
d="M3.33301 5.66669L7.99967 10.3334L12.6663 5.66669"
|
|
stroke="white"
|
|
strokeWidth="2"
|
|
strokeLinecap="round"
|
|
strokeLinejoin="round"
|
|
/>
|
|
</g>
|
|
<defs>
|
|
<clipPath id="clip0_140_1160">
|
|
<rect width="16" height="16" fill="white" />
|
|
</clipPath>
|
|
</defs>
|
|
</svg>
|
|
</div>
|
|
)}
|
|
</div>
|
|
{data?.length > 1 && (
|
|
<div className="hidden py-[12px] px-[12px] group-hover:flex w-full absolute top-[100%] left-0 bg-third border-tableBorder border-x border-b gap-[12px] cursor-pointer flex-col">
|
|
{withoutCurrent?.map((org: { name: string; id: string }) => (
|
|
<div key={org.id} onClick={changeOrg(org)}>
|
|
{org.name}
|
|
</div>
|
|
))}
|
|
</div>
|
|
)}
|
|
</div>
|
|
);
|
|
};
|