feat: add new memebrs and admins UI implemented

push-protocol · Jul 13, 2023 · 76c81df · 76c81df
1 parent fb1df21
commit 76c81df
Show file tree

Hide file tree

Showing 3 changed files with 28 additions and 22 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;
-    inviteOnly?: boolean;
+    btnString?: string;
 }
 
 export const SCWInviteModal: React.FC<ISCWIModalProps> = (props) => {
@@ -55,10 +55,9 @@ export const SCWInviteModal: React.FC<ISCWIModalProps> = (props) => {
         adminsAddressList,
         setAdminsAddressList,
         onClose,
-        inviteOnly,
+        btnString,
     } = props;
     const theme = useContext(ThemeContext);
-    console.log("🚀 ~ file: SCWInviteModal.tsx:60 ~ createSpace:", createSpace)
 
     const { env, account, customSearch } = useSpaceData();
 
@@ -377,7 +376,7 @@ export const SCWInviteModal: React.FC<ISCWIModalProps> = (props) => {
                     {
                         isLoading ?
                         <CircularProgressSpinner />
-                        : 'Create Space'
+                        : btnString ?? 'Create Space'
                     }
                 </Button>
             </Modal>

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 } from 'react'
+import { useEffect, useState } from 'react'
 import styled from 'styled-components';
 import * as PushAPI from '@pushprotocol/restapi';
 
@@ -13,11 +13,11 @@ export interface ISpaceCreateWidgetProps {
     customComponent?: React.ReactElement<React.ButtonHTMLAttributes<HTMLButtonElement>>;
     inviteOnly?: boolean;
     spaceData?: any;
+    closeInvite?: any;
 }
 
 export const SpaceCreationWidget:React.FC<ISpaceCreateWidgetProps> = (props) => {
-    const { customComponent, inviteOnly, spaceData } = props;
-    console.log("🚀 ~ file: SpaceCreationWidget.tsx:20 ~ inviteOnly:", inviteOnly)
+    const { customComponent, inviteOnly, spaceData, closeInvite } = props;
 
     const [isCreateModalVisible, setIsCreateModalVisible] = useState(false);
     const [isScheduleModalVisible, setIsScheduleModalVisible] = useState(false);
@@ -83,6 +83,7 @@ export const SpaceCreationWidget:React.FC<ISpaceCreateWidgetProps> = (props) =>
     }
 
     const closeInviteModal = () => {
+        if (closeInvite) closeInvite();
         setIsInviteModalVisible(false);
     }
 
@@ -102,6 +103,12 @@ export const SpaceCreationWidget:React.FC<ISpaceCreateWidgetProps> = (props) =>
             time: Date.now(),
         })
     }
+
+    useEffect(() => {
+        if (inviteOnly) {
+            setIsInviteModalVisible(!isInviteModalVisible);
+        }
+    }, [inviteOnly]);
 
     const createSpace = async () => {
         const spaceCreate = {
@@ -115,7 +122,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);
@@ -144,7 +151,7 @@ export const SpaceCreationWidget:React.FC<ISpaceCreateWidgetProps> = (props) =>
             spaceId: spaceData.spaceId,
             status: spaceData.status,
         }
-        console.log('UPDATE API')
+
         try {
             setLoading(true);
             const response = await PushAPI.space.update(spaceUpdate);
@@ -163,9 +170,9 @@ export const SpaceCreationWidget:React.FC<ISpaceCreateWidgetProps> = (props) =>
         <div>
             {
                 inviteOnly ?
-                <SCWInviteModal
+                (isInviteModalVisible && <SCWInviteModal
                     closeInviteModal={closeInviteModal}
-                    makeScheduleVisible={showCreateSpace}
+                    makeScheduleVisible={closeInviteModal}
                     createSpace={updateSpace}
                     isLoading={isLoading}
                     invitedMembersList={invitedMembersList}
@@ -177,7 +184,8 @@ export const SpaceCreationWidget:React.FC<ISpaceCreateWidgetProps> = (props) =>
                     adminsAddressList={adminsAddressList}
                     setAdminsAddressList={setAdminsAddressList}
                     onClose={closeInviteModal}
-                />
+                    btnString='Update Space'
+                />)
                 :
                 <SCWContainer>
                     {
@@ -223,7 +231,7 @@ export const SpaceCreationWidget:React.FC<ISpaceCreateWidgetProps> = (props) =>
                         <SCWInviteModal
                             closeInviteModal={closeInviteModal}
                             makeScheduleVisible={showCreateSpace}
-                            createSpace={updateSpace}
+                            createSpace={createSpace}
                             isLoading={isLoading}
                             invitedMembersList={invitedMembersList}
                             setInvitedMembersList={setInvitedMembersList}

diff --git a/packages/uiweb/src/lib/components/space/SpaceWidget/SpacesInfo.tsx b/packages/uiweb/src/lib/components/space/SpaceWidget/SpacesInfo.tsx
@@ -34,7 +34,7 @@ export const SpacesInfo: React.FC<ISpacesInfoProps> = (props) => {
     }
 
     const showExplicitInvite: React.MouseEventHandler = () => {
-        setIsInviteVisible(true);
+        setIsInviteVisible(!isInviteVisible);
     }
 
     const adminsArray = spaceData.members.filter((member: { isSpeaker: boolean; }) => member.isSpeaker);
@@ -43,7 +43,7 @@ export const SpacesInfo: React.FC<ISpacesInfoProps> = (props) => {
         <Modal
             width='400px'
         >
-            <SpacesInfoContainer>
+            <SpacesInfoContainer theme={theme}>
             <ModalHeader
                 heading='Spaces Info'
                 closeCallback={props.closeSpacesInfo}
@@ -96,25 +96,24 @@ export const SpacesInfo: React.FC<ISpacesInfoProps> = (props) => {
                 })
             }
 
-            </SpacesInfoContainer>
-
             {
                 isInviteVisible ?
                 <SpaceCreationWidget
-                    inviteOnly
-                    spaceData={spaceData}
+                inviteOnly
+                closeInvite={showExplicitInvite}
+                spaceData={spaceData}
                 />
                 : null
             }
+            </SpacesInfoContainer>
         </Modal>
     )
 }
 
 
 /** styling */
 const SpacesInfoContainer = styled.div`
-    color: black;
-    width: 400px;
+    color: ${(props => props.theme.textColorPrimary)};
 `;
 
 const SpacesDetailsContainer = styled.div`
@@ -126,6 +125,6 @@ const Title = styled.div`
     font-weight: 500;
 `;
 
-const Description = styled.div<IThemeProps>`
+const Description = styled.div`
     color: ${(props => props.theme.textColorSecondary)};
 `;