Skip to content

Commit

Permalink
✨ Profile and zustand state
Browse files Browse the repository at this point in the history
  • Loading branch information
naelob committed Dec 5, 2023
1 parent c2915da commit 039e72f
Show file tree
Hide file tree
Showing 8 changed files with 140 additions and 127 deletions.
Original file line number Diff line number Diff line change
Expand Up @@ -23,6 +23,9 @@ export default function FieldMappingsTable({
isLoading
}: { mappings: Mapping[] | undefined; isLoading: boolean }) {

const countDefined = mappings?.filter(mapping => mapping.status === "defined").length;
const countMapped = mappings?.filter(mapping => mapping.status === "mapped").length;

return (
<>
<div className="hidden h-full flex-1 flex-col space-y-8 md:flex">
Expand All @@ -32,7 +35,7 @@ export default function FieldMappingsTable({
<CardTitle>Defined</CardTitle>
</CardHeader>
<CardContent>
<p className="text-4xl font-bold">0</p>
<p className="text-4xl font-bold">{countDefined}</p>
</CardContent>

</Card>
Expand All @@ -41,7 +44,7 @@ export default function FieldMappingsTable({
<CardTitle>Mapped</CardTitle>
</CardHeader>
<CardContent>
<p className="text-4xl font-bold">3</p>
<p className="text-4xl font-bold">{countMapped}</p>
</CardContent>
</Card>
</div>
Expand Down
28 changes: 25 additions & 3 deletions packages/webapp/src/components/dashboard/components/user-nav.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -13,8 +13,29 @@ import {
DropdownMenuSeparator,
DropdownMenuTrigger,
} from "@/components/ui/dropdown-menu"
import useProfile from "@/hooks/useProfile";
import useProfileStore from "@/state/profileStore";
import { useEffect } from "react";

export function UserNav() {
const {data} = useProfile();
if(!data) {
console.log("loading profiles");
}
const { profile, setProfile } = useProfileStore();

useEffect(()=> {
if(data){
setProfile({
id_user: data[0].id_user,
email: data[0].email,
first_name: data[0].first_name,
last_name: data[0].last_name,
id_organization: data[0].id_organization as string,
})
}
}, [data, setProfile]);

return (
<DropdownMenu>
<DropdownMenuTrigger asChild>
Expand All @@ -28,15 +49,16 @@ import {
<DropdownMenuContent className="w-56 ml-10" align="end" forceMount>
<DropdownMenuLabel className="font-normal">
<div className="flex flex-col space-y-1">
<p className="text-sm font-medium leading-none">shadcn</p>
<p className="text-sm font-medium leading-none">
{profile && profile.first_name}
</p>
<p className="text-xs leading-none text-muted-foreground">
[email protected]
{profile && profile.email}
</p>
</div>
</DropdownMenuLabel>
<DropdownMenuSeparator />
<DropdownMenuGroup>

<DropdownMenuItem>
Profile
</DropdownMenuItem>
Expand Down
95 changes: 64 additions & 31 deletions packages/webapp/src/components/shared/team-switcher.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -41,9 +41,12 @@ import {
} from "@/components/ui/popover"
import useProjectMutation from "@/hooks/mutations/useProjectMutation"
import useOrganisationMutation from "@/hooks/mutations/useOrganisationMutation"
import { useState } from "react"
import useProjectStore, { projects } from "@/state/projectStore"
import { useEffect, useState } from "react"
import useProjectStore from "@/state/projectStore"
import useOrganisationStore, { organisations } from "@/state/organisationStore"
import useProfileStore from "@/state/profileStore"
import useProjects from "@/hooks/useProjects"
import { Skeleton } from "../ui/skeleton"

type PopoverTriggerProps = React.ComponentPropsWithoutRef<typeof PopoverTrigger>

Expand All @@ -64,10 +67,21 @@ export default function TeamSwitcher({ className }: TeamSwitcherProps) {
const [orgName, setOrgName] = useState('');
const [projectName, setProjectName] = useState('');

const { data : projects, isLoading: isloadingProjects } = useProjects();


const { selectedProject, setSelectedProject } = useProjectStore();
const { selectedOrganisation, setSelectedOrganisation } = useOrganisationStore();


const { profile } = useProfileStore();

useEffect(()=>{
if(projects){
setSelectedProject(projects[0]);
}
},[projects, setSelectedProject])


const handleOpenChange = (open: boolean) => {
setShowNewDialog(prevState => ({ ...prevState, open }));
Expand All @@ -76,6 +90,7 @@ export default function TeamSwitcher({ className }: TeamSwitcherProps) {
const { mutate: mutateProject } = useProjectMutation();
const { mutate: mutateOrganisation } = useOrganisationMutation();

//TODO
const handleOrgSubmit = (e: React.FormEvent) => {
e.preventDefault(); // Prevent default form submission
mutateOrganisation({
Expand All @@ -89,7 +104,7 @@ export default function TeamSwitcher({ className }: TeamSwitcherProps) {
e.preventDefault(); // Prevent default form submission
mutateProject({
name: projectName,
id_organization: "890e7d54-7620-43bc-9cdb-48a5fcd85bde", //TODO
id_organization: profile!.id_organization,
});
setShowNewDialog({open: false})
};
Expand All @@ -106,7 +121,7 @@ export default function TeamSwitcher({ className }: TeamSwitcherProps) {
className={cn("w-[250px] justify-between", className)}
>

{selectedProject.label}
{selectedProject?.name}
<CaretSortIcon className="ml-auto h-4 w-4 shrink-0 opacity-50" />
</Button>
</PopoverTrigger>
Expand All @@ -116,34 +131,52 @@ export default function TeamSwitcher({ className }: TeamSwitcherProps) {
<CommandInput placeholder="Search..." />
<CommandEmpty>Not found.</CommandEmpty>
<CommandGroup key={"projects"} heading={"Projects"}>
{projects.map((project) => (
<CommandItem
key={project.value}
onSelect={() => {
setSelectedProject(project)
setOpen(false)
}}
className="text-sm"
>
<Avatar className="mr-2 h-5 w-5">
<AvatarImage
src={`https://avatar.vercel.sh/${project.value}.png`}
alt={project.label}
className="grayscale"
{
!isloadingProjects && projects ? projects.map((project) => (
<CommandItem
key={project.id_project}
onSelect={() => {
setSelectedProject(project)
setOpen(false)
}}
className="text-sm"
>
<Avatar className="mr-2 h-5 w-5">
<AvatarImage
src={`https://avatar.vercel.sh/${project.name}.png`}
alt={project.name}
className="grayscale"
/>
<AvatarFallback>SC</AvatarFallback>
</Avatar>
{project.name}
<CheckIcon
className={cn(
"ml-auto h-4 w-4",
selectedProject?.name === project.name
? "opacity-100"
: "opacity-0"
)}
/>
<AvatarFallback>SC</AvatarFallback>
</Avatar>
{project.label}
<CheckIcon
className={cn(
"ml-auto h-4 w-4",
selectedProject.value === project.value
? "opacity-100"
: "opacity-0"
)}
/>
</CommandItem>
))}
</CommandItem>
)) : Array.from({ length: 6 }).map((_, index) => (
<CommandItem
key={index}
className="text-sm"
>
<Avatar className="mr-2 h-5 w-5">
<AvatarImage
src={`https://avatar.vercel.sh/1.png`}
alt={""}
className="grayscale"
/>
<AvatarFallback>SC</AvatarFallback>
</Avatar>
<Skeleton className="w-[100px] h-[20px] rounded-md" />
</CommandItem>
)
)
}
</CommandGroup>
<CommandGroup key={"organisations"} heading={"Organisations"}>
{organisations.map((organisation) => (
Expand Down
62 changes: 0 additions & 62 deletions packages/webapp/src/components/shared/user-nav.tsx

This file was deleted.

18 changes: 18 additions & 0 deletions packages/webapp/src/hooks/useProfile.tsx
Original file line number Diff line number Diff line change
@@ -1 +1,19 @@
//import { useQuery } from '@tanstack/react-query';
import config from '@/utils/config';
import { useQuery } from '@tanstack/react-query';
import {users as User} from "@api/exports";

const useProfile = () => {
//TODO
return useQuery({
queryKey: ['profile'],
queryFn: async (): Promise<User[]> => {
const response = await fetch(`${config.API_URL}/auth/users`);
if (!response.ok) {
throw new Error('Network response was not ok');
}
return response.json();
}
});
};
export default useProfile;
6 changes: 1 addition & 5 deletions packages/webapp/src/state/organisationStore.ts
Original file line number Diff line number Diff line change
Expand Up @@ -4,11 +4,7 @@ export const organisations = [
{
label: "Acme Inc.",
value: "acme-inc",
},
{
label: "Monsters Inc.",
value: "monsters",
},
}
];

interface OrganisationT {
Expand Down
22 changes: 22 additions & 0 deletions packages/webapp/src/state/profileStore.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1,22 @@
import { create } from 'zustand';

interface User {
id_user: string;
email: string;
first_name: string;
last_name: string;
id_organization: string;
}

interface ProfileState {
profile: User | null;
setProfile: (profile: User) => void;
}


const useProfileStore = create<ProfileState>()((set) => ({
profile: null,
setProfile: (profile_: User) => set({ profile: profile_ }),
}));

export default useProfileStore;
29 changes: 5 additions & 24 deletions packages/webapp/src/state/projectStore.ts
Original file line number Diff line number Diff line change
@@ -1,33 +1,14 @@
import { create } from 'zustand';

export const projects = [
{
label: "Financial Project",
value: "personal",
},
{
label: "Data Project",
value: "personal1",
},
{
label: "Marketing Project",
value: "personal2",
},
];

interface ProjectT {
label: string;
value: string;
}
import {projects as Project} from "@api/exports";

interface ProjectState {
selectedProject: ProjectT;
setSelectedProject: (project: ProjectT) => void;
selectedProject: Project | null;
setSelectedProject: (project: Project) => void;
}

const useProjectStore = create<ProjectState>()((set) => ({
selectedProject: projects[0],
setSelectedProject: (project: ProjectT) => set({ selectedProject: project }),
selectedProject: null,
setSelectedProject: (project: Project) => set({ selectedProject: project }),
}));

export default useProjectStore;

0 comments on commit 039e72f

Please sign in to comment.