Refetch incoming request directly when showing the connectionDialog;

homebase-id · Sep 7, 2023 · d22d7c7 · d22d7c7
1 parent 6b80465
commit d22d7c7
Show file tree

Hide file tree

Showing 7 changed files with 21 additions and 34 deletions.
diff --git a/packages/js-lib/src/network/circleNetwork/CircleDataTypes.ts b/packages/js-lib/src/network/circleNetwork/CircleDataTypes.ts
@@ -46,13 +46,16 @@ export interface ConnectionInfo {
   originalContactData?: ContactData;
 }
 
-export interface ConnectionRequest {
+export interface RedactedConnectionRequest {
+  senderOdinId: string;
+  receivedTimestampMilliseconds: number;
+}
+
+export interface ConnectionRequest extends RedactedConnectionRequest {
   id: string;
   status: 'pending' | 'sent';
   recipient: string;
   message: string;
-  senderOdinId: string;
-  receivedTimestampMilliseconds: number;
   contactData?: ContactData;
 }
 

diff --git a/packages/js-lib/src/network/circleNetwork/CircleNetworkRequestProvider.ts b/packages/js-lib/src/network/circleNetwork/CircleNetworkRequestProvider.ts
@@ -3,6 +3,7 @@
   ConnectionRequest,
   ConnectionRequestHeader,
   OdinIdRequest,
+  RedactedConnectionRequest,
 } from './CircleDataTypes';
 import { DotYouClient } from '../../core/DotYouClient';
 import { PagingOptions, PagedResult } from '../../core/core';
@@ -16,12 +17,12 @@ const PendingPathRoot: string = Root + '/pending';
 export const getPendingRequests = async (
   dotYouClient: DotYouClient,
   params: PagingOptions
-): Promise<PagedResult<ConnectionRequest> | undefined> => {
+): Promise<PagedResult<RedactedConnectionRequest> | undefined> => {
   const client = dotYouClient.createAxiosClient();
   const url = PendingPathRoot + '/list?' + stringify(params as unknown as Record<string, unknown>);
 
   return client
-    .get<PagedResult<ConnectionRequest>>(url)
+    .get<PagedResult<RedactedConnectionRequest>>(url)
     .then((response) => {
       return response.data;
     })

diff --git a/packages/owner-app/src/components/Connection/PersonIncomingRequest/PersonIncomingRequest.tsx b/packages/owner-app/src/components/Connection/PersonIncomingRequest/PersonIncomingRequest.tsx
@@ -7,16 +7,13 @@ import { ActionButton } from '@youfoundation/common-app';
 import { DomainHighlighter } from '@youfoundation/common-app';
 import IncomingConnectionDialog from '../../Dialog/ConnectionDialogs/IncomingConnectionDialog';
 import PersonCard from '../PersonCard/PersonCard';
-import { ConnectionRequest } from '@youfoundation/js-lib/network';
 
 const PersonIncomingRequest = ({
   senderOdinId,
-  pendingConnection,
   children,
   className,
 }: {
   senderOdinId: string;
-  pendingConnection: ConnectionRequest;
   children?: ReactNode;
   className: string;
 }) => {
@@ -82,7 +79,6 @@ const PersonIncomingRequest = ({
         onCancel={() => {
           setIsAcceptDialogOpen(false);
         }}
-        pendingConnection={pendingConnection}
       />
     </>
   );

diff --git a/packages/owner-app/src/components/Dialog/ConnectionDialogs/IncomingConnectionDialog.tsx b/packages/owner-app/src/components/Dialog/ConnectionDialogs/IncomingConnectionDialog.tsx
@@ -17,19 +17,15 @@ import { ConnectionRequest } from '@youfoundation/js-lib/network';
 
 const IncomingConnectionDialog = ({
   confirmText,
-
   senderOdinId,
-  pendingConnection,
 
   isOpen,
 
   onConfirm,
   onCancel,
 }: {
   confirmText?: string;
-
   senderOdinId: string;
-  pendingConnection: ConnectionRequest;
 
   isOpen: boolean;
 
@@ -38,13 +34,16 @@ const IncomingConnectionDialog = ({
 }) => {
   const target = usePortal('modal-container');
 
+  // We fetch the connection info here
   const {
-    mutateAsync: acceptPending,
-    status: acceptPendingStatus,
-    error: acceptError,
-  } = useConnection({}).acceptRequest;
-  const { mutateAsync: follow, error: followError } = useFollowingInfinite({}).follow;
+    fetch: { data: connectionInfo },
+    acceptRequest: { mutateAsync: acceptPending, status: acceptPendingStatus, error: acceptError },
+  } = useConnection({ odinId: senderOdinId });
 
+  const pendingConnection: ConnectionRequest | undefined =
+    connectionInfo?.status === 'pending' ? connectionInfo : undefined;
+
+  const { mutateAsync: follow, error: followError } = useFollowingInfinite({}).follow;
   const { data: uiSettings } = useSettings().fetchUiSettings;
 
   const checkReturnTo = useFocusedEditing();
@@ -94,8 +93,8 @@ const IncomingConnectionDialog = ({
                   />
                 </div>
                 <div className="w-full p-4 text-gray-600 dark:text-gray-400 md:w-3/5">
-                  <p>{pendingConnection.message}</p>
-                  <p className="mt-2">-- {pendingConnection.contactData?.name}</p>
+                  <p>{pendingConnection?.message}</p>
+                  <p className="mt-2">-- {pendingConnection?.contactData?.name}</p>
                 </div>
               </div>
             </div>

diff --git a/packages/owner-app/src/templates/Connections/ConnectionDetails/ConnectionDetails.tsx b/packages/owner-app/src/templates/Connections/ConnectionDetails/ConnectionDetails.tsx
@@ -239,7 +239,6 @@ const ConnectionDetails = () => {
             onCancel={() => {
               setIsAcceptDialogOpen(false);
             }}
-            pendingConnection={connectionInfo}
           />
         </>
       ) : null}

diff --git a/packages/owner-app/src/templates/Connections/Connections/Connections.tsx b/packages/owner-app/src/templates/Connections/Connections/Connections.tsx
@@ -11,7 +11,6 @@ import PersonActive from '../../../components/Connection/PersonActive/PersonActi
 import { DotYouProfile } from '@youfoundation/js-lib/network';
 import { useActiveConnections } from '@youfoundation/common-app';
 import { PageMeta } from '../../../components/ui/PageMeta/PageMeta';
-import Submenu from '../../../components/SubMenu/SubMenu';
 
 const Connections = () => {
   const [hasActiveConnections, setActiveConnections] = useState(true);
@@ -115,12 +114,7 @@ const PendingConnectionSection = ({
             className="w-full p-1 sm:w-1/2 md:w-1/3 lg:w-1/4 2xl:w-1/6"
             senderOdinId={pendingConnection.senderOdinId}
             key={pendingConnection.senderOdinId}
-            pendingConnection={pendingConnection}
-          >
-            <div className="-mt-3">
-              <p className="mb-3 text-sm">{pendingConnection.message}</p>
-            </div>
-          </PersonIncomingRequest>
+          />
         ))}
       </div>
     </>

diff --git a/packages/owner-app/src/templates/Dashboard/Dashboard.tsx b/packages/owner-app/src/templates/Dashboard/Dashboard.tsx
@@ -101,12 +101,7 @@ const Dashboard = () => {
                 className="w-full p-1 sm:w-1/2 md:w-1/3 lg:w-1/4 xl:w-1/6"
                 senderOdinId={pendingConnection.senderOdinId}
                 key={pendingConnection.senderOdinId}
-                pendingConnection={pendingConnection}
-              >
-                <div className="-mt-3">
-                  <p className="mb-3 text-sm">{pendingConnection.message}</p>
-                </div>
-              </PersonIncomingRequest>
+              />
             ))}
           </div>
         </Section>