save/load selectedOrganisationId and selectedProjectId to/ localStorage

This commit is contained in:
Oliver Bryan
2026-01-01 11:36:21 +00:00
parent 5a9e950fa8
commit d158f51141
4 changed files with 63 additions and 43 deletions

View File

@@ -31,25 +31,30 @@ function Index() {
const organisations = data as OrganisationResponse[]; const organisations = data as OrganisationResponse[];
setOrganisations(organisations); setOrganisations(organisations);
// select newly created organisation let selected: OrganisationResponse | null = null;
if (options?.selectOrganisationId) { if (options?.selectOrganisationId) {
const created = organisations.find( const created = organisations.find(
(o) => o.Organisation.id === options.selectOrganisationId, (o) => o.Organisation.id === options.selectOrganisationId,
); );
if (created) { if (created) {
setSelectedOrganisation(created); selected = created;
return; }
} else {
const savedId = localStorage.getItem("selectedOrganisationId");
if (savedId) {
const saved = organisations.find((o) => o.Organisation.id === Number(savedId));
if (saved) {
selected = saved;
}
} }
} }
// preserve previously selected organisation if (!selected) {
setSelectedOrganisation((prev) => { selected = organisations[0] || null;
if (!prev) return organisations[0] || null; }
const stillExists = organisations.find(
(o) => o.Organisation.id === prev.Organisation.id, setSelectedOrganisation(selected);
);
return stillExists || organisations[0] || null;
});
}, },
onError: (error) => { onError: (error) => {
console.error("error fetching organisations:", error); console.error("error fetching organisations:", error);
@@ -66,10 +71,6 @@ function Index() {
void refetchOrganisations(); void refetchOrganisations();
}, [user.id]); }, [user.id]);
useEffect(() => {
setSelectedOrganisation((prev) => prev || organisations[0] || null);
}, [organisations]);
const refetchProjects = async (organisationId: number, options?: { selectProjectId?: number }) => { const refetchProjects = async (organisationId: number, options?: { selectProjectId?: number }) => {
try { try {
await project.byOrganisation({ await project.byOrganisation({
@@ -78,21 +79,28 @@ function Index() {
const projects = data as ProjectResponse[]; const projects = data as ProjectResponse[];
setProjects(projects); setProjects(projects);
// select newly created project let selected: ProjectResponse | null = null;
if (options?.selectProjectId) { if (options?.selectProjectId) {
const created = projects.find((p) => p.Project.id === options.selectProjectId); const created = projects.find((p) => p.Project.id === options.selectProjectId);
if (created) { if (created) {
setSelectedProject(created); selected = created;
return; }
} else {
const savedId = localStorage.getItem("selectedProjectId");
if (savedId) {
const saved = projects.find((p) => p.Project.id === Number(savedId));
if (saved) {
selected = saved;
}
} }
} }
// preserve previously selected project if (!selected) {
setSelectedProject((prev) => { selected = projects[0] || null;
if (!prev) return projects[0] || null; }
const stillExists = projects.find((p) => p.Project.id === prev.Project.id);
return stillExists || projects[0] || null; setSelectedProject(selected);
});
}, },
onError: (error) => { onError: (error) => {
console.error("error fetching projects:", error); console.error("error fetching projects:", error);
@@ -117,10 +125,6 @@ function Index() {
void refetchProjects(selectedOrganisation.Organisation.id); void refetchProjects(selectedOrganisation.Organisation.id);
}, [selectedOrganisation]); }, [selectedOrganisation]);
useEffect(() => {
setSelectedProject((prev) => prev || projects[0] || null);
}, [projects]);
const refetchIssues = async () => { const refetchIssues = async () => {
try { try {
await issue.byProject({ await issue.byProject({
@@ -156,7 +160,10 @@ function Index() {
<OrganisationSelect <OrganisationSelect
organisations={organisations} organisations={organisations}
selectedOrganisation={selectedOrganisation} selectedOrganisation={selectedOrganisation}
onSelectedOrganisationChange={setSelectedOrganisation} onSelectedOrganisationChange={(org) => {
setSelectedOrganisation(org);
localStorage.setItem("selectedOrganisationId", `${org?.Organisation.id}`);
}}
onCreateOrganisation={async (organisationId) => { onCreateOrganisation={async (organisationId) => {
await refetchOrganisations({ selectOrganisationId: organisationId }); await refetchOrganisations({ selectOrganisationId: organisationId });
}} }}
@@ -170,6 +177,7 @@ function Index() {
organisationId={selectedOrganisation?.Organisation.id} organisationId={selectedOrganisation?.Organisation.id}
onSelectedProjectChange={(project) => { onSelectedProjectChange={(project) => {
setSelectedProject(project); setSelectedProject(project);
localStorage.setItem("selectedProjectId", `${project?.Project.id}`);
setSelectedIssue(null); setSelectedIssue(null);
}} }}
onCreateProject={async (projectId) => { onCreateProject={async (projectId) => {

View File

@@ -30,23 +30,32 @@ function Organisations() {
const organisations = data as OrganisationResponse[]; const organisations = data as OrganisationResponse[];
setOrganisations(organisations); setOrganisations(organisations);
let selected: OrganisationResponse | null = null;
if (options?.selectOrganisationId) { if (options?.selectOrganisationId) {
const created = organisations.find( const created = organisations.find(
(o) => o.Organisation.id === options.selectOrganisationId, (o) => o.Organisation.id === options.selectOrganisationId,
); );
if (created) { if (created) {
setSelectedOrganisation(created); selected = created;
return; }
} else {
const savedId = localStorage.getItem("selectedOrganisationId");
if (savedId) {
const saved = organisations.find(
(o) => o.Organisation.id === Number(savedId),
);
if (saved) {
selected = saved;
}
} }
} }
setSelectedOrganisation((prev) => { if (!selected) {
if (!prev) return organisations[0] || null; selected = organisations[0] || null;
const stillExists = organisations.find( }
(o) => o.Organisation.id === prev.Organisation.id,
); setSelectedOrganisation(selected);
return stillExists || organisations[0] || null;
});
}, },
onError: (error) => { onError: (error) => {
console.error(error); console.error(error);
@@ -117,10 +126,6 @@ function Organisations() {
void refetchOrganisations(); void refetchOrganisations();
}, [refetchOrganisations]); }, [refetchOrganisations]);
useEffect(() => {
setSelectedOrganisation((prev) => prev || organisations[0] || null);
}, [organisations]);
useEffect(() => { useEffect(() => {
void refetchMembers(); void refetchMembers();
}, [refetchMembers]); }, [refetchMembers]);
@@ -132,7 +137,10 @@ function Organisations() {
<OrganisationSelect <OrganisationSelect
organisations={organisations} organisations={organisations}
selectedOrganisation={selectedOrganisation} selectedOrganisation={selectedOrganisation}
onSelectedOrganisationChange={setSelectedOrganisation} onSelectedOrganisationChange={(org) => {
setSelectedOrganisation(org);
localStorage.setItem("selectedOrganisationId", `${org?.Organisation.id}`);
}}
onCreateOrganisation={async (organisationId) => { onCreateOrganisation={async (organisationId) => {
await refetchOrganisations({ selectOrganisationId: organisationId }); await refetchOrganisations({ selectOrganisationId: organisationId });
}} }}

View File

@@ -37,6 +37,8 @@ export function Auth({ children }: AuthProviderProps) {
setLoggedIn(false); setLoggedIn(false);
localStorage.removeItem("token"); localStorage.removeItem("token");
localStorage.removeItem("user"); localStorage.removeItem("user");
localStorage.removeItem("selectedOrganisationId");
localStorage.removeItem("selectedProjectId");
}); });
}, []); }, []);

View File

@@ -15,6 +15,8 @@ export default function LogOutButton({
const logOut = () => { const logOut = () => {
localStorage.removeItem("token"); localStorage.removeItem("token");
localStorage.removeItem("user"); localStorage.removeItem("user");
localStorage.removeItem("selectedOrganisationId");
localStorage.removeItem("selectedProjectId");
navigate(0); navigate(0);
}; };