client/src/components/DashboardPage/DecisionSupportFilePanel.tsx

@@ -26,8 +26,7 @@ export function DecisionSupportFilePanel() {
       itemFilter: (item: Item) => (item as DecisionSupportFile).status === DecisionSupportFileStatus.Closed
     },
   ];
-
-
+  
   return (
     <ItemPanel
       className='is-link'

client/src/components/DashboardPage/ItemPanel.tsx

@@ -11,8 +11,6 @@ export interface TabDefinition {
   label: string
   itemFilter?: (item: Item) => boolean
 }
-
-
 export interface ItemPanelProps {
   className?: string
   itemIconClassName?: string
@@ -30,9 +28,12 @@ export const ItemPanel: FunctionComponent<ItemPanelProps> = (props) => {
   const { 
     title, className, newItemUrl, 
     itemKey, itemLabel, 
-    itemIconClassName, itemUrl
+    itemIconClassName, itemUrl,
   } = props;
   
+  const items = props.items || [];
+  const tabs = props.tabs || [];
+
   const [ state, setState ] = useState({ selectedTab: 0, filteredItems: [] });
 
   const filterItemsForTab = (tab: TabDefinition, items: Item[]) => {
@@ -42,7 +43,6 @@ export const ItemPanel: FunctionComponent<ItemPanelProps> = (props) => {
 
   const selectTab = (tabIndex: number) => {
     setState(state => {
-      const { tabs, items } = props;      
       const newTab = Array.isArray(tabs) && tabs.length > 0 ? tabs[tabIndex] : null;
       return { 
         ...state, 
@@ -61,7 +61,7 @@ export const ItemPanel: FunctionComponent<ItemPanelProps> = (props) => {
         filteredItems: filterItemsForTab(newTab, items),
       }
     });
-  }, [props.items, props.tabs]);
+  }, [items, tabs]);
 
   const itemElements = state.filteredItems.map((item: Item, i: number) => {
     return (
@@ -74,8 +74,6 @@ export const ItemPanel: FunctionComponent<ItemPanelProps> = (props) => {
     );
   });
 
-  const tabs = props.tabs || [];
-
   return (
     <nav className={`panel ${className}`}>
       <div className="level is-mobile panel-heading mb-0">

client/src/components/WorkgroupPage/WorkgroupPage.tsx

@@ -2,8 +2,8 @@ import React, { useEffect, useState, Fragment } from 'react';
 import { Page } from '../Page';
 import { WithLoader } from '../WithLoader';
 import { useParams } from 'react-router';
-import { useWorkgroupsQuery } from '../../gql/queries/workgroups';
-import { useUserProfileQuery } from '../../gql/queries/profile';
+import { useWorkgroupsQuery, useWorkgroups } from '../../gql/queries/workgroups';
+import { useUserProfileQuery, useUserProfile } from '../../gql/queries/profile';
 import { MembersPanel } from './MembersPanel';
 import { User } from '../../types/user';
 import { InfoPanel } from './InfoPanel';
@@ -12,18 +12,18 @@ import { useJoinWorkgroupMutation, useLeaveWorkgroupMutation, useCloseWorkgroupM
 
 export function WorkgroupPage() {
   const { id } = useParams();
-  const workgroupsQuery = useWorkgroupsQuery({
+  const { workgroups } = useWorkgroups({
     variables:{
       filter: { 
         ids: [id],
       }
     }
   });
-  const userProfileQuery = useUserProfileQuery();
+  const { user } = useUserProfile();
   
-  const [ joinWorkgroup, joinWorkgroupMutation ] = useJoinWorkgroupMutation();
-  const [ leaveWorkgroup, leaveWorkgroupMutation ] = useLeaveWorkgroupMutation();
-  const [ closeWorkgroup, closeWorkgroupMutation ] = useCloseWorkgroupMutation();
+  const [ joinWorkgroup ] = useJoinWorkgroupMutation();
+  const [ leaveWorkgroup ] = useLeaveWorkgroupMutation();
+  const [ closeWorkgroup ] = useCloseWorkgroupMutation();
 
   const [ state, setState ] = useState({
     userProfileId: '',
@@ -37,14 +37,12 @@ export function WorkgroupPage() {
   });
 
   useEffect(() => {
-    if (!workgroupsQuery.data) return;
-    setState(state => ({...state, workgroup:{ ...state.workgroup, ...workgroupsQuery.data.workgroups[0]}}));
-  }, [workgroupsQuery.data]);
+    setState(state => ({...state, workgroup:{ ...state.workgroup, ...workgroups[0]}}));
+  }, [workgroups]);
 
   useEffect(() => {
-    if (!userProfileQuery.data) return;
-    setState(state => ({...state, userProfileId: userProfileQuery.data.userProfile.id }));
-  }, [userProfileQuery.data]);
+    setState(state => ({...state, userProfileId: user.id }));
+  }, [user]);
 
   const onJoinWorkgroupClick = () => {
     joinWorkgroup({
@@ -56,6 +54,18 @@ export function WorkgroupPage() {
 
   const onLeaveWorkgroupClick = () => {
     leaveWorkgroup({
+      update: (cache, result) => {
+        cache.modify({
+          id: cache.identify(result.data.leaveWorkgroup),
+          fields: {
+            members(existingMembers, { readField }) {
+              return existingMembers.filter(
+                user => state.userProfileId !== readField('id', user)
+              );
+            },
+          },
+        });
+      },
       variables: {
         workgroupId: state.workgroup.id,
       }
@@ -123,16 +133,14 @@ export function WorkgroupPage() {
               </div>
             </div>
           </div>
-          <WithLoader loading={[workgroupsQuery.loading, userProfileQuery.loading, joinWorkgroupMutation.loading, leaveWorkgroupMutation.loading]}>
-            <div className="columns">
-              <div className="column">
-                <InfoPanel workgroup={state.workgroup as Workgroup} />
-              </div>
-              <div className="column">
-                <MembersPanel users={state.workgroup.members as User[]} />
-              </div>
+          <div className="columns">
+            <div className="column">
+              <InfoPanel workgroup={state.workgroup as Workgroup} />
             </div>
-          </WithLoader>
+            <div className="column">
+              <MembersPanel users={state.workgroup.members as User[]} />
+            </div>
+          </div>
         </section>
       </div>
     </Page>

client/src/gql/client.tsx

@@ -34,7 +34,6 @@ export const client = new ApolloClient<any>({
 
 function mergeArrayByField<T>(fieldName: string) {
   return (existing: T[] = [], incoming: T[], { readField, mergeObjects }) => {
-    if (incoming.length === 0) return [];
 
     const merged: any[] = existing ? existing.slice(0) : [];
     

client/src/gql/mutations/dsf.tsx

@@ -9,7 +9,16 @@ mutation createDecisionSupportFile($changes: DecisionSupportFileChanges!) {
     status,
     sections,
     createdAt,
-    updatedAt
+    updatedAt,
+    workgroup {
+      id,
+      name,
+      members {
+        id,
+        email,
+        name
+      }
+    },
   }
 }`;
 
@@ -27,7 +36,16 @@ mutation updateDecisionSupportFile($id: ID!, $changes: DecisionSupportFileChange
     status,
     sections,
     createdAt,
-    updatedAt
+    updatedAt,
+    workgroup {
+      id,
+      name,
+      members {
+        id,
+        email,
+        name
+      }
+    },
   }
 }`;
 

client/src/gql/queries/dsf.tsx

@@ -16,7 +16,9 @@ export const QUERY_DECISION_SUPPORT_FILES = gql`
         id,
         name,
         members {
-          id
+          id,
+          email,
+          name
         }
       },
     }

internal/model/workgroup_repository.go

@@ -48,7 +48,7 @@ func (r *WorkgroupRepository) CreateWorkgroup(ctx context.Context, changes Workg
 		Name: changes.Name,
 	}
 
-	if err := r.db.Model(&Workgroup{}).Create(workgroup).Error; err != nil {
+	if err := r.db.Model(&Workgroup{}).Preload("Members").Create(workgroup).Error; err != nil {
 		return nil, errors.WithStack(err)
 	}
 
@@ -138,7 +138,7 @@ func (r *WorkgroupRepository) RemoveUserFromWorkgroup(ctx context.Context, userI
 
 func (r *WorkgroupRepository) Find(ctx context.Context, id string) (*Workgroup, error) {
 	wg := &Workgroup{}
-	query := r.db.Model(wg).Where("id = ?", id)
+	query := r.db.Model(wg).Preload("Members").Where("id = ?", id)
 
 	if err := query.First(&wg).Error; err != nil {
 		return nil, errs.WithStack(err)