fix: add invite modal callback

push-protocol · Jul 12, 2023 · abeada3 · abeada3
1 parent 008b187
commit abeada3
Show file tree

Hide file tree

Showing 4 changed files with 126 additions and 56 deletions.
diff --git a/...ages/uiweb/src/lib/components/space/SpaceCreationWidget/SCWInviteModal/SCWInviteModal.tsx b/...ages/uiweb/src/lib/components/space/SpaceCreationWidget/SCWInviteModal/SCWInviteModal.tsx
@@ -40,7 +40,7 @@ export interface ISCWIModalProps { // Space Creation Widget Create Modal Interfa
     adminsAddressList?: any;
     setAdminsAddressList?: any;
     onClose: () => void;
-    customSearch?: (searchString: string) => ICustomSearchResult;
+    inviteOnly?: boolean;
 }
 
 export const SCWInviteModal: React.FC<ISCWIModalProps> = (props) => {
@@ -55,17 +55,18 @@ export const SCWInviteModal: React.FC<ISCWIModalProps> = (props) => {
         adminsAddressList,
         setAdminsAddressList,
         onClose,
-        customSearch,
+        inviteOnly,
     } = props;
     const theme = useContext(ThemeContext);
+    console.log("🚀 ~ file: SCWInviteModal.tsx:60 ~ createSpace:", createSpace)
 
-    const { env, account } = useSpaceData();
+    const { env, account, customSearch } = useSpaceData();
 
     const [invitedMember, setInvitedMember] = useState('')
     const [loadingAccount, setLoadingAccount] = useState(false)
 
     const [searchedUser, setSearchedUser]= useState<any>({});
-    const [errorMsg, setErrorMsg] = useState<any>('');
+    const [errorMsg, setErrorMsg] = useState<string>('');
 
     const searchMember = async (event: any) => {
         setInvitedMember(event.target.value)

diff --git a/packages/uiweb/src/lib/components/space/SpaceCreationWidget/SpaceCreationWidget.tsx b/packages/uiweb/src/lib/components/space/SpaceCreationWidget/SpaceCreationWidget.tsx
@@ -1,4 +1,4 @@
-import { useState, ReactNode } from 'react'
+import { useState } from 'react'
 import styled from 'styled-components';
 import * as PushAPI from '@pushprotocol/restapi';
 
@@ -11,10 +11,13 @@ import { useSpaceData } from '../../../hooks';
 
 export interface ISpaceCreateWidgetProps {
     customComponent?: React.ReactElement<React.ButtonHTMLAttributes<HTMLButtonElement>>;
+    inviteOnly?: boolean;
+    spaceData?: any;
 }
 
 export const SpaceCreationWidget:React.FC<ISpaceCreateWidgetProps> = (props) => {
-    const { customComponent } = props;
+    const { customComponent, inviteOnly, spaceData } = props;
+    console.log("🚀 ~ file: SpaceCreationWidget.tsx:20 ~ inviteOnly:", inviteOnly)
 
     const [isCreateModalVisible, setIsCreateModalVisible] = useState(false);
     const [isScheduleModalVisible, setIsScheduleModalVisible] = useState(false);
@@ -100,7 +103,7 @@ export const SpaceCreationWidget:React.FC<ISpaceCreateWidgetProps> = (props) =>
         })
     }
 
-    const testCreateSpace = async () => {
+    const createSpace = async () => {
         const spaceCreate = {
             spaceName: spaceState.spaceName.length === 0 ? `${account}'s Space` : spaceState.spaceName,
             spaceDescription: 'Push Space',
@@ -112,7 +115,7 @@ export const SpaceCreationWidget:React.FC<ISpaceCreateWidgetProps> = (props) =>
             signer: signer as PushAPI.SignerType,
             env
         }
-
+        console.log('CREATE API')
         try {
             setLoading(true);
             const response = await PushAPI.space.create(spaceCreate);
@@ -127,52 +130,43 @@ export const SpaceCreationWidget:React.FC<ISpaceCreateWidgetProps> = (props) =>
         }
     };
 
-    return (
-        <SCWContainer>
-            {
-                customComponent
-                ?
-                <CustomButtonComponent onClick={showCreateSpace}>
-                    {customComponent}
-                </CustomButtonComponent>
-                :
-                <SCWButton
-                    onCreate={showCreateSpace}
-                />
-            }
-
-            {isCreateModalVisible &&
-                <SCWCreateModal
-                    isInviteVisible={showInviteSpace}
-                    closeCreateModal={closeCreateModal}
-                    nameValue={spaceState.spaceName}
-                    descriptionValue={spaceState.spaceDescription}
-                    handleNameChange={handleNameChange}
-                    handleDescriptionChange={handleDescriptionChange}
-                    isDescriptionEnabled={false}
-                    isScheduleVisible={showScheduleSpace}
-                    onClose={closeCreateModal}
-                />
-            }
+    const updateSpace = async () => {
+        const spaceUpdate = {
+            spaceName: spaceData.spaceName,
+            spaceDescription: 'Push Space',
+            members: invitedAddressList,
+            spaceImage: 'asd',
+            admins: adminsAddressList,
+            isPublic: true,
+            scheduleAt: spaceState.time > Date.now() ? new Date(spaceState.time) : new Date(Date.now() + 120000),
+            signer: signer as PushAPI.SignerType,
+            env,
+            spaceId: spaceData.spaceId,
+            status: spaceData.status,
+        }
+        console.log('UPDATE API')
+        try {
+            setLoading(true);
+            const response = await PushAPI.space.update(spaceUpdate);
 
-            {isScheduleModalVisible &&
-                <SCWScheduleModal
-                    closeScheduleModal={closeScheduleModal}
-                    makeCreateVisible={showCreateSpace}
-                    makeInviteVisible={showInviteSpace}
-                    dateValue={spaceState.date}
-                    timeValue={spaceState.time}
-                    onDateChange={onDateChange}
-                    onTimeChange={onTimeChange}
-                    onClose={closeScheduleModal}
-                />
-            }
+            console.log(response);
+        } catch (e:any) {
+            console.error(e.message);
+        } finally {
+            setLoading(false);
+            closeInviteModal();
+            clearAllState();
+        }
+    };
 
-            {isInviteModalVisible &&
+    return (
+        <div>
+            {
+                inviteOnly ?
                 <SCWInviteModal
                     closeInviteModal={closeInviteModal}
                     makeScheduleVisible={showCreateSpace}
-                    createSpace={testCreateSpace}
+                    createSpace={updateSpace}
                     isLoading={isLoading}
                     invitedMembersList={invitedMembersList}
                     setInvitedMembersList={setInvitedMembersList}
@@ -184,8 +178,67 @@ export const SpaceCreationWidget:React.FC<ISpaceCreateWidgetProps> = (props) =>
                     setAdminsAddressList={setAdminsAddressList}
                     onClose={closeInviteModal}
                 />
+                :
+                <SCWContainer>
+                    {
+                        customComponent
+                        ?
+                        <CustomButtonComponent onClick={showCreateSpace}>
+                            {customComponent}
+                        </CustomButtonComponent>
+                        :
+                        <SCWButton
+                            onCreate={showCreateSpace}
+                        />
+                    }
+
+                    {isCreateModalVisible &&
+                        <SCWCreateModal
+                            isInviteVisible={showInviteSpace}
+                            closeCreateModal={closeCreateModal}
+                            nameValue={spaceState.spaceName}
+                            descriptionValue={spaceState.spaceDescription}
+                            handleNameChange={handleNameChange}
+                            handleDescriptionChange={handleDescriptionChange}
+                            isDescriptionEnabled={false}
+                            isScheduleVisible={showScheduleSpace}
+                            onClose={closeCreateModal}
+                        />
+                    }
+
+                    {isScheduleModalVisible &&
+                        <SCWScheduleModal
+                            closeScheduleModal={closeScheduleModal}
+                            makeCreateVisible={showCreateSpace}
+                            makeInviteVisible={showInviteSpace}
+                            dateValue={spaceState.date}
+                            timeValue={spaceState.time}
+                            onDateChange={onDateChange}
+                            onTimeChange={onTimeChange}
+                            onClose={closeScheduleModal}
+                        />
+                    }
+
+                    {isInviteModalVisible &&
+                        <SCWInviteModal
+                            closeInviteModal={closeInviteModal}
+                            makeScheduleVisible={showCreateSpace}
+                            createSpace={updateSpace}
+                            isLoading={isLoading}
+                            invitedMembersList={invitedMembersList}
+                            setInvitedMembersList={setInvitedMembersList}
+                            invitedAddressList={invitedAddressList}
+                            setInvitedAddressList={setInvitedAddressList}
+                            adminsList={adminsList}
+                            setAdminsList={setAdminsList}
+                            adminsAddressList={adminsAddressList}
+                            setAdminsAddressList={setAdminsAddressList}
+                            onClose={closeInviteModal}
+                        />
+                    }
+                </SCWContainer>
             }
-        </SCWContainer>
+        </div>
     )
 }
 

diff --git a/packages/uiweb/src/lib/components/space/SpaceWidget/SpacesInfo.tsx b/packages/uiweb/src/lib/components/space/SpaceWidget/SpacesInfo.tsx
@@ -1,4 +1,4 @@
-import React, { useContext, MouseEventHandler } from 'react'
+import React, { useContext, MouseEventHandler, useState } from 'react'
 import styled from 'styled-components';
 
 import { Modal } from '../reusables/Modal'
@@ -7,6 +7,7 @@ import { IThemeProviderProps, ThemeContext } from '../theme/ThemeProvider';
 import { Button } from '../reusables/Button';
 import { ProfileContainer } from '../reusables/ProfileContainer';
 import Accordion from '../reusables/Accordion';
+import { SpaceCreationWidget } from '../SpaceCreationWidget';
 
 export interface ISpacesInfoProps {
     closeSpacesInfo: MouseEventHandler;
@@ -19,11 +20,11 @@ interface IThemeProps {
 
 export const SpacesInfo: React.FC<ISpacesInfoProps> = (props) => {
     const { spaceData } = props;
-    console.log("🚀 ~ file: SpacesInfo.tsx:22 ~ spaceData:", spaceData)
-    const tempImageUrl = "https://imgv3.fotor.com/images/blog-richtext-image/10-profile-picture-ideas-to-make-you-stand-out.jpg";
 
     const theme = useContext(ThemeContext);
 
+    const [isInviteVisible, setIsInviteVisible] = useState(false);
+
     const customStyle = {
         color: theme.textColorPrimary,
         background: theme.bgColorPrimary,
@@ -32,6 +33,10 @@ export const SpacesInfo: React.FC<ISpacesInfoProps> = (props) => {
         padding: '14px',
     }
 
+    const showExplicitInvite: React.MouseEventHandler = () => {
+        setIsInviteVisible(true);
+    }
+
     const adminsArray = spaceData.members.filter((member: { isSpeaker: boolean; }) => member.isSpeaker);
 
     return (
@@ -59,6 +64,7 @@ export const SpacesInfo: React.FC<ISpacesInfoProps> = (props) => {
 
             <Button
                 customStyle={customStyle}
+                onClick={showExplicitInvite}
             >
                 Invite Members
             </Button>
@@ -91,6 +97,15 @@ export const SpacesInfo: React.FC<ISpacesInfoProps> = (props) => {
             }
 
             </SpacesInfoContainer>
+
+            {
+                isInviteVisible ?
+                <SpaceCreationWidget
+                    inviteOnly
+                    spaceData={spaceData}
+                />
+                : null
+            }
         </Modal>
     )
 }

diff --git a/packages/uiweb/src/lib/context/spacesContext.ts b/packages/uiweb/src/lib/context/spacesContext.ts
@@ -19,9 +19,10 @@ export interface ISpacePaginationData {
 }
 
 export interface ICustomSearchResult {
-  name: string;
-  walletAddress: string;
-  image: string;
+  account: string;
+  name?: string;
+  handle?: string;
+  image?: string; // dataURL as string
 }
 
 export interface ISpaceDataContextValues {