feat(organizations): Cache organizations to support offline first UX

packages/insomnia/src/ui/routes/commands.tsx

@@ -2,16 +2,15 @@ import { LoaderFunctionArgs } from 'react-router-dom';
 
 import { database } from '../../common/database';
 import { fuzzyMatch } from '../../common/misc';
-import { environment, grpcRequest, project, request, requestGroup, webSocketRequest, workspace } from '../../models';
+import { environment, grpcRequest, project, request, requestGroup, userSession, webSocketRequest, workspace } from '../../models';
 import { Environment } from '../../models/environment';
 import { GrpcRequest } from '../../models/grpc-request';
-import { isScratchpadOrganizationId } from '../../models/organization';
+import { isScratchpadOrganizationId, Organization } from '../../models/organization';
 import { Request } from '../../models/request';
 import { RequestGroup } from '../../models/request-group';
 import { WebSocketRequest } from '../../models/websocket-request';
 import { scopeToActivity, Workspace } from '../../models/workspace';
 import { invariant } from '../../utils/invariant';
-import { organizationsData } from './organization';
 
 export interface CommandItem<TItem> {
   id: string;
@@ -54,7 +53,9 @@ export async function loader(args: LoaderFunctionArgs): Promise<LoaderResult> {
     )?.indexes);
   };
 
-  const allOrganizations = organizationsData.organizations;
+  const { accountId } = await userSession.getOrCreate();
+
+  const allOrganizations = JSON.parse(localStorage.getItem(`${accountId}:organizations`) || '[]') as Organization[];
 
   const allOrganizationsIds = isScratchpadOrganizationId(organizationId) ? [organizationId] : allOrganizations.map(org => org.id);
 

packages/insomnia/src/ui/routes/organization.tsx

@@ -107,12 +107,6 @@ interface CurrentPlan {
   type: PersonalPlanType;
 };
 
-export const organizationsData: OrganizationLoaderData = {
-  organizations: [],
-  user: undefined,
-  currentPlan: undefined,
-};
-
 function sortOrganizations(accountId: string, organizations: Organization[]): Organization[] {
   const home = organizations.find(organization => isPersonalOrganization(organization) && isOwnerOfOrganization({
     organization,
@@ -162,10 +156,17 @@ export const indexLoader: LoaderFunction = async () => {
       const { organizations } = organizationsResult;
 
       invariant(accountId, 'Account ID is not defined');
-      organizationsData.organizations = sortOrganizations(accountId, organizations);
-      organizationsData.user = user;
-      organizationsData.currentPlan = currentPlan;
-      const personalOrganization = organizations.filter(isPersonalOrganization)
+
+      localStorage.setItem(`${accountId}:organizations`, JSON.stringify(sortOrganizations(accountId, organizations)));
+      localStorage.setItem(`${accountId}:user`, JSON.stringify(user));
+      localStorage.setItem(`${accountId}:currentPlan`, JSON.stringify(currentPlan));
+    } catch (error) {
+      console.log('Failed to load Organizations', error);
+    }
+
+    const organizations = JSON.parse(localStorage.getItem(`${accountId}:organizations`) || '[]') as Organization[];
+
+    const personalOrganization = organizations.filter(isPersonalOrganization)
         .find(organization =>
           isOwnerOfOrganization({
             organization,
@@ -203,11 +204,6 @@ export const indexLoader: LoaderFunction = async () => {
       if (organizations.length > 0) {
         return redirect(`/organization/${organizations[0].id}`);
       }
-    } catch (error) {
-      console.log('Failed to load Organizations', error);
-      const errorMessage = error instanceof Error ? error.message : 'Unknown error';
-      throw new Error(`Network connectivity issue: Failed to load Organizations. ${errorMessage}`);
-    }
   }
 
   await session.logout();
@@ -242,9 +238,9 @@ export const syncOrganizationsAction: ActionFunction = async () => {
       invariant(user, 'Failed to load user');
       invariant(currentPlan, 'Failed to load current plan');
       invariant(accountId, 'Account ID is not defined');
-      organizationsData.organizations = sortOrganizations(accountId, organizationsResult.organizations);
-      organizationsData.user = user;
-      organizationsData.currentPlan = currentPlan;
+      localStorage.setItem(`${accountId}:organizations`, JSON.stringify(sortOrganizations(accountId, organizationsResult.organizations)));
+      localStorage.setItem(`${accountId}:user`, JSON.stringify(user));
+      localStorage.setItem(`${accountId}:currentPlan`, JSON.stringify(currentPlan));
     } catch (error) {
       console.log('Failed to load Organizations', error);
     }
@@ -260,9 +256,17 @@ export interface OrganizationLoaderData {
 }
 
 export const loader: LoaderFunction = async () => {
-  const { id } = await userSession.getOrCreate();
+  const { id, accountId } = await userSession.getOrCreate();
   if (id) {
-    return organizationsData;
+    const organizations = JSON.parse(localStorage.getItem(`${accountId}:organizations`) || '[]') as Organization[];
+    const user = JSON.parse(localStorage.getItem(`${accountId}:user`) || '{}') as UserProfileResponse;
+    const currentPlan = JSON.parse(localStorage.getItem(`${accountId}:currentPlan`) || '{}') as CurrentPlan;
+
+    return {
+      organizations: sortOrganizations(accountId, organizations),
+      user,
+      currentPlan,
+    };
   } else {
     return {
       organizations: [],
@@ -300,7 +304,7 @@ export interface OrganizationFeatureLoaderData {
 
 export const singleOrgLoader: LoaderFunction = async ({ params }): Promise<OrganizationFeatureLoaderData> => {
   const { organizationId } = params as { organizationId: string };
-  const { id: sessionId } = await userSession.getOrCreate();
+  const { id: sessionId, accountId } = await userSession.getOrCreate();
   const fallbackFeatures = {
     gitSync: { enabled: false, reason: 'Insomnia API unreachable' },
     orgBasicRbac: { enabled: false, reason: 'Insomnia API unreachable' },
@@ -321,7 +325,8 @@ export const singleOrgLoader: LoaderFunction = async ({ params }): Promise<Organ
     };
   }
 
-  const organization = organizationsData.organizations.find(o => o.id === organizationId);
+  const organizations = JSON.parse(localStorage.getItem(`${accountId}:organizations`) || '[]') as Organization[];
+  const organization = organizations.find(o => o.id === organizationId);
 
   if (!organization) {
     throw redirect('/organization');

packages/insomnia/src/ui/routes/untracked-projects.tsx

@@ -1,18 +1,19 @@
 import { LoaderFunction } from 'react-router-dom';
 
 import { database } from '../../common/database';
-import { SCRATCHPAD_ORGANIZATION_ID } from '../../models/organization';
+import { userSession } from '../../models';
+import { Organization, SCRATCHPAD_ORGANIZATION_ID } from '../../models/organization';
 import { Project } from '../../models/project';
 import { Workspace } from '../../models/workspace';
-import { organizationsData } from './organization';
 
 export interface UntrackedProjectsLoaderData {
   untrackedProjects: (Project & { workspacesCount: number })[];
   untrackedWorkspaces: Workspace[];
 }
 
 export const loader: LoaderFunction = async () => {
-  const { organizations } = organizationsData;
+  const { accountId } = await userSession.getOrCreate();
+  const organizations = JSON.parse(localStorage.getItem(`${accountId}:organizations`) || '[]') as Organization[];
   const listOfOrganizationIds = [...organizations.map(o => o.id), SCRATCHPAD_ORGANIZATION_ID];
 
   const projects = await database.find<Project>('Project', {