agora-appbuilder-core 4.0.0-test.2 → 4.0.1

package/template/src/components/RTMConfigure.tsx

@@ -12,14 +12,18 @@
 // @ts-nocheck
 import React, {useState, useContext, useEffect, useRef} from 'react';
 import RtmEngine from 'agora-react-native-rtm';
-import {PropsContext, useLocalUid} from '../../agora-rn-uikit';
+import {
+  ContentInterface,
+  DispatchContext,
+  PropsContext,
+  useLocalUid,
+} from '../../agora-rn-uikit';
 import ChatContext from './ChatContext';
-import {RtcContext} from '../../agora-rn-uikit';
 import {Platform} from 'react-native';
 import {backOff} from 'exponential-backoff';
 import {useString} from '../utils/useString';
-import {isAndroid, isWeb, isWebInternal} from '../utils/common';
-import {useRender, useRtc} from 'customization-api';
+import {isAndroid, isIOS, isWeb, isWebInternal} from '../utils/common';
+import {useContent, useIsAttendee, useUserName} from 'customization-api';
 import {
   safeJsonParse,
   timeNow,
@@ -27,12 +31,23 @@ import {
   getMessageTime,
   get32BitUid,
 } from '../rtm/utils';
-import {EventUtils, EventsQueue} from '../rtm-events';
-import {EventPersistLevel} from '../rtm-events-api';
+import {EventUtils, EventsQueue, EventNames} from '../rtm-events';
+import events, {PersistanceLevel} from '../rtm-events-api';
 import RTMEngine from '../rtm/RTMEngine';
 import {filterObject} from '../utils';
 import SDKEvents from '../utils/SdkEvents';
 import isSDK from '../utils/isSDK';
+import {useAsyncEffect} from '../utils/useAsyncEffect';
+import {
+  WaitingRoomStatus,
+  useRoomInfo,
+} from '../components/room-info/useRoomInfo';
+import LocalEventEmitter, {
+  LocalEventsEnum,
+} from '../rtm-events-api/LocalEvents';
+import {PSTNUserLabel} from '../language/default-labels/videoCallScreenLabels';
+import {controlMessageEnum} from '../components/ChatContext';
+import {RECORDING_BOT_UID} from '../utils/constants';
 
 export enum UserType {
   ScreenShare = 'screenshare',
@@ -43,11 +58,27 @@ const RtmConfigure = (props: any) => {
   const localUid = useLocalUid();
   const {callActive} = props;
   const {rtcProps} = useContext(PropsContext);
-  const {RtcEngine, dispatch} = useRtc();
-  const {renderList, activeUids} = useRender();
-  const renderListRef = useRef({renderList: renderList});
+  const {dispatch} = useContext(DispatchContext);
+  const {defaultContent, activeUids} = useContent();
+  const defaultContentRef = useRef({defaultContent: defaultContent});
   const activeUidsRef = useRef({activeUids: activeUids});
 
+  const {
+    waitingRoomStatus,
+    data: {isHost},
+  } = useRoomInfo();
+  const waitingRoomStatusRef = useRef({waitingRoomStatus: waitingRoomStatus});
+
+  const isHostRef = useRef({isHost: isHost});
+
+  useEffect(() => {
+    isHostRef.current.isHost = isHost;
+  }, [isHost]);
+
+  useEffect(() => {
+    waitingRoomStatusRef.current.waitingRoomStatus = waitingRoomStatus;
+  }, [waitingRoomStatus]);
+
   /**
    * inside event callback state won't have latest value.
    * so creating ref to access the state
@@ -57,35 +88,31 @@ const RtmConfigure = (props: any) => {
   }, [activeUids]);
 
   useEffect(() => {
-    renderListRef.current.renderList = renderList;
-  }, [renderList]);
-
-  const [login, setLogin] = useState<boolean>(false);
+    defaultContentRef.current.defaultContent = defaultContent;
+  }, [defaultContent]);
 
   const [hasUserJoinedRTM, setHasUserJoinedRTM] = useState<boolean>(false);
   const [onlineUsersCount, setTotalOnlineUsers] = useState<number>(0);
 
-  //commented for v1 release
-  // const userText = useString('remoteUserDefaultLabel')();
-  const userText = 'User';
-  const pstnUserLabel = useString('pstnUserLabel')();
-  //commented for v1 release
-  //const getScreenShareName = useString('screenshareUserName');
-  const getScreenShareName = (name: string) => `${name}'s screenshare`;
-
   let engine = useRef<RtmEngine>(null!);
   const timerValueRef: any = useRef(5);
 
   React.useEffect(() => {
     setTotalOnlineUsers(
       Object.keys(
-        filterObject(renderList, ([k, v]) => v?.type === 'rtc' && !v.offline),
+        filterObject(
+          defaultContent,
+          ([k, v]) =>
+            v?.type === 'rtc' &&
+            !v.offline &&
+            activeUids.indexOf(v?.uid) !== -1,
+        ),
       ).length,
     );
-  }, [renderList]);
+  }, [defaultContent]);
 
   React.useEffect(() => {
-    const handBrowserClose = (ev) => {
+    const handBrowserClose = ev => {
       ev.preventDefault();
       return (ev.returnValue = 'Are you sure you want to exit?');
     };
@@ -118,7 +145,7 @@ const RtmConfigure = (props: any) => {
       });
       RTMEngine.getInstance().setLocalUID(localUid.toString());
       timerValueRef.current = 5;
-      setAttribute();
+      await setAttribute();
     } catch (error) {
       setTimeout(async () => {
         timerValueRef.current = timerValueRef.current + timerValueRef.current;
@@ -167,7 +194,7 @@ const RtmConfigure = (props: any) => {
 
   const updateRenderListState = (
     uid: number,
-    data: Partial<RenderInterface>,
+    data: Partial<ContentInterface>,
   ) => {
     dispatch({type: 'UpdateRenderList', value: [uid, data]});
   };
@@ -176,7 +203,7 @@ const RtmConfigure = (props: any) => {
     try {
       await engine.current
         .getChannelMembersBychannelId(rtcProps.channel)
-        .then(async (data) => {
+        .then(async data => {
           await Promise.all(
             data.members.map(async (member: any) => {
               const backoffAttributes = backOff(
@@ -219,7 +246,7 @@ const RtmConfigure = (props: any) => {
                 const userData = {
                   screenUid: screenUid,
                   //below thing for livestreaming
-                  type: 'rtc',
+                  type: uid === parseInt(RECORDING_BOT_UID) ? 'bot' : 'rtc',
                   uid,
                   offline: false,
                   lastMessageTimeStamp: 0,
@@ -256,7 +283,7 @@ const RtmConfigure = (props: any) => {
               }
             }),
           );
-          setLogin(true);
+
           console.log('RTM init done');
         });
       timerValueRef.current = 5;
@@ -313,7 +340,7 @@ const RtmConfigure = (props: any) => {
           const userData = {
             screenUid: screenUid,
             //below thing for livestreaming
-            type: 'rtc',
+            type: uid === parseInt(RECORDING_BOT_UID) ? 'bot' : 'rtc',
             uid,
             offline: false,
             lastMessageTimeStamp: 0,
@@ -367,30 +394,46 @@ const RtmConfigure = (props: any) => {
       }
     });
 
-    engine.current.on('channelMessageReceived', (evt) => {
+    engine.current.on('channelMessageReceived', evt => {
       console.log('CUSTOM_EVENT_API channelMessageReceived: ', evt);
 
       const {uid, channelId, text, ts} = evt;
-      const [err, msg] = safeJsonParse(text);
-      if (err) {
-        console.log(
-          'CUSTOM_EVENT_API: JSON payload incorrect, Error while parsing the payload',
-        );
-      }
+      //whiteboard upload
+      if (uid == 1010101) {
+        const [err, res] = safeJsonParse(text);
+        if (err) {
+          console.log(
+            'CUSTOM_EVENT_API: JSON payload incorrect, Error while parsing the payload',
+          );
+        }
+        if (res?.data?.data?.images) {
+          LocalEventEmitter.emit(
+            LocalEventsEnum.WHITEBOARD_FILE_UPLOAD,
+            res?.data?.data?.images,
+          );
+        }
+      } else {
+        const [err, msg] = safeJsonParse(text);
+        if (err) {
+          console.log(
+            'CUSTOM_EVENT_API: JSON payload incorrect, Error while parsing the payload',
+          );
+        }
 
-      const timestamp = getMessageTime(ts);
+        const timestamp = getMessageTime(ts);
 
-      const sender = Platform.OS ? get32BitUid(uid) : parseInt(uid);
+        const sender = Platform.OS ? get32BitUid(uid) : parseInt(uid);
 
-      if (channelId === rtcProps.channel) {
-        try {
-          eventDispatcher(msg, sender, timestamp);
-        } catch (error) {
-          console.log('error while dispacthing', error);
+        if (channelId === rtcProps.channel) {
+          try {
+            eventDispatcher(msg, sender, timestamp);
+          } catch (error) {
+            console.log('error while dispacthing', error);
+          }
         }
       }
     });
-    doLoginAndSetupRTM();
+    await doLoginAndSetupRTM();
   };
 
   const runQueuedEvents = async () => {
@@ -413,15 +456,71 @@ const RtmConfigure = (props: any) => {
     ts: number,
   ) => {
     console.log('CUSTOM_EVENT_API: inside eventDispatcher ', data);
-    const {evt, value} = data;
-    // Step 1: Set local attributes
-    if (value?.persistLevel === EventPersistLevel.LEVEL3) {
-      const rtmAttribute = {key: evt, value: value};
-      await engine.current.addOrUpdateLocalUserAttributes([rtmAttribute]);
+    let evt = '',
+      value = {};
+
+    if (data.feat === 'WAITING_ROOM') {
+      if (data.etyp === 'REQUEST') {
+        const outputData = {
+          evt: `${data.feat}_${data.etyp}`,
+          payload: JSON.stringify({
+            attendee_uid: data.data.data.attendee_uid,
+            attendee_screenshare_uid: data.data.data.attendee_screenshare_uid,
+          }),
+          persistLevel: 1,
+          source: 'core',
+        };
+        const formattedData = JSON.stringify(outputData);
+        evt = data.feat + '_' + data.etyp; //rename if client side RTM meessage is to be sent for approval
+        value = formattedData;
+      }
+      if (data.etyp === 'RESPONSE') {
+        const outputData = {
+          evt: `${data.feat}_${data.etyp}`,
+          payload: JSON.stringify({
+            approved: data.data.data.approved,
+            channelName: data.data.data.channel_name,
+            mainUser: data.data.data.mainUser,
+            screenShare: data.data.data.screenShare,
+            whiteboard: data.data.data.whiteboard,
+          }),
+          persistLevel: 1,
+          source: 'core',
+        };
+        const formattedData = JSON.stringify(outputData);
+        evt = data.feat + '_' + data.etyp;
+        value = formattedData;
+      }
+    } else {
+      if (
+        $config.ENABLE_WAITING_ROOM &&
+        !isHostRef.current?.isHost &&
+        waitingRoomStatusRef.current?.waitingRoomStatus !==
+          WaitingRoomStatus.APPROVED
+      ) {
+        if (
+          data.evt === controlMessageEnum.muteAudio ||
+          data.evt === controlMessageEnum.muteVideo
+        ) {
+          return;
+        } else {
+          evt = data.evt;
+          value = data.value;
+        }
+      } else {
+        evt = data.evt;
+        value = data.value;
+      }
     }
-    // Step 2: Emit the event
+
     try {
       const {payload, persistLevel, source} = JSON.parse(value);
+      // Step 1: Set local attributes
+      if (persistLevel === PersistanceLevel.Session) {
+        const rtmAttribute = {key: evt, value: value};
+        await engine.current.addOrUpdateLocalUserAttributes([rtmAttribute]);
+      }
+      // Step 2: Emit the event
       console.log('CUSTOM_EVENT_API:  emiting event..: ');
       EventUtils.emitEvent(evt, source, {payload, persistLevel, sender, ts});
       // Because async gets evaluated in a different order when in an sdk
@@ -441,19 +540,37 @@ const RtmConfigure = (props: any) => {
   };
 
   const end = async () => {
-    callActive
-      ? (RTMEngine.getInstance().destroy(),
-        EventUtils.clear(),
-        setHasUserJoinedRTM(false),
-        // setLogin(false),
-        console.log('RTM cleanup done'))
-      : {};
+    if (!callActive) {
+      return;
+    }
+    await RTMEngine.getInstance().destroy();
+    if (isIOS() || isAndroid()) {
+      EventUtils.clear();
+    }
+    setHasUserJoinedRTM(false);
+    console.log('RTM cleanup done');
   };
 
-  useEffect(() => {
-    callActive ? init() : (console.log('waiting to init RTM'), setLogin(true));
-    return () => {
-      end();
+  useAsyncEffect(async () => {
+    //waiting room attendee -> rtm login will happen on page load
+    if ($config.ENABLE_WAITING_ROOM) {
+      //attendee
+      if (!isHost && !callActive) {
+        await init();
+      }
+      //host
+      if (isHost && callActive) {
+        await init();
+      }
+    }
+    if (!$config.ENABLE_WAITING_ROOM) {
+      //host and attendee
+      if (callActive) {
+        await init();
+      }
+    }
+    return async () => {
+      await end();
     };
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [rtcProps.channel, rtcProps.appId, callActive]);
@@ -467,7 +584,7 @@ const RtmConfigure = (props: any) => {
         localUid: localUid,
         onlineUsersCount,
       }}>
-      {login ? props.children : <></>}
+      {props.children}
     </ChatContext.Provider>
   );
 };

package/template/src/components/Rightbar.tsx

@@ -0,0 +1,112 @@
+/*
+********************************************
+ Copyright © 2021 Agora Lab, Inc., all rights reserved.
+ AppBuilder and all associated components, source code, APIs, services, and documentation 
+ (the “Materials”) are owned by Agora Lab, Inc. and its licensors. The Materials may not be 
+ accessed, used, modified, or distributed for any purpose without a license from Agora Lab, Inc.  
+ Use without a license or in violation of any license terms and conditions (including use for 
+ any purpose competitive to Agora Lab, Inc.’s business) is strictly prohibited. For more 
+ information visit https://appbuilder.agora.io. 
+*********************************************
+*/
+import React from 'react';
+import {View, StyleSheet} from 'react-native';
+import Toolbar from '../atoms/Toolbar';
+import {ToolbarCustomItem} from '../atoms/ToolbarPreset';
+import {CustomToolbarSort} from '../utils/common';
+
+const defaultStartItems: ToolbarCustomItem[] = [];
+const defaultCenterItems: ToolbarCustomItem[] = [];
+const defaultEndItems: ToolbarCustomItem[] = [];
+
+export interface RightbarProps {
+  customItems?: ToolbarCustomItem[];
+  includeDefaultItems?: boolean;
+}
+const Rightbar = (props: RightbarProps) => {
+  const {customItems = [], includeDefaultItems = true} = props;
+
+  const isHidden = (i) => {
+    return i?.hide === 'yes';
+  };
+
+  const customStartItems = customItems
+    ?.filter((i) => i?.align === 'start' && !isHidden(i))
+    ?.concat(includeDefaultItems ? defaultStartItems : [])
+    ?.sort(CustomToolbarSort);
+
+  const customCenterItems = customItems
+    ?.filter((i) => i?.align === 'center' && !isHidden(i))
+    ?.concat(includeDefaultItems ? defaultCenterItems : [])
+    ?.sort(CustomToolbarSort);
+
+  const customEndItems = customItems
+    ?.filter((i) => i?.align === 'end' && !isHidden(i))
+    ?.concat(includeDefaultItems ? defaultEndItems : [])
+    ?.sort(CustomToolbarSort);
+
+  const renderContent = (
+    items: ToolbarCustomItem[],
+    type: 'start' | 'center' | 'end',
+  ) => {
+    return items?.map((item, index) => {
+      const ToolbarItem = item?.component;
+      if (ToolbarItem) {
+        return <ToolbarItem key={`left-toolbar-${type}` + index} />;
+      } else {
+        return null;
+      }
+    });
+  };
+  return (
+    <Toolbar>
+      <View style={style.startContent}>
+        {customStartItems && customStartItems?.length ? (
+          renderContent(customStartItems, 'start')
+        ) : (
+          <></>
+        )}
+      </View>
+      <View style={style.centerContent}>
+        {customCenterItems && customCenterItems?.length ? (
+          renderContent(customCenterItems, 'center')
+        ) : (
+          <></>
+        )}
+      </View>
+      <View style={style.endContent}>
+        {customEndItems && customEndItems?.length ? (
+          renderContent(customEndItems, 'end')
+        ) : (
+          <></>
+        )}
+      </View>
+    </Toolbar>
+  );
+};
+
+const style = StyleSheet.create({
+  startContent: {
+    flex: 1,
+    zIndex: 2,
+    flexDirection: 'column',
+    justifyContent: 'flex-start',
+    alignItems: 'center',
+  },
+  centerContent: {
+    flex: 1,
+    zIndex: 2,
+    flexDirection: 'column',
+    justifyContent: 'center',
+    alignItems: 'center',
+  },
+  endContent: {
+    flex: 1,
+    zIndex: 2,
+    flexDirection: 'column',
+    justifyContent: 'flex-end',
+    alignItems: 'center',
+  },
+});
+
+export default Rightbar;

package/template/src/components/SdkApiContext.tsx

@@ -4,8 +4,8 @@ import SDKMethodEventsManager, {
 } from '../utils/SdkMethodEvents';
 import {
   validateMeetingInfoData,
-  MeetingInfoContextInterface,
-} from './meeting-info/useMeetingInfo';
+  RoomInfoContextInterface,
+} from './room-info/useRoomInfo';
 import {CustomizationApiInterface} from 'customization-api';
 import {Unsubscribe} from 'nanoevents';
 
@@ -24,7 +24,7 @@ type SdkApiContextInterface = {
     | {
         initialized: true;
         phrase: string;
-        meetingDetails?: Partial<MeetingInfoContextInterface['data']>;
+        meetingDetails?: Partial<RoomInfoContextInterface['data']>;
         userName: string;
         skipPrecall: boolean;
         promise: extractPromises<_InternalSDKMethodEventsMap['join']>;
@@ -76,8 +76,8 @@ const SdkApiInitState: SdkApiContextInterface = {
   microphoneDevice: {},
   speakerDevice: {},
   cameraDevice: {},
-  onMuteVideo: (_) => {},
-  onMuteAudio: (_) => {},
+  onMuteVideo: _ => {},
+  onMuteAudio: _ => {},
   clearState: () => {},
 };
 
@@ -96,7 +96,7 @@ type commonEventHandlers = {
 };
 
 const commonEventHandlers: commonEventHandlers = {
-  join: (setter) => {
+  join: setter => {
     return SDKMethodEventsManager.on(
       'join',
       (res, rej, roomDetail, skipPrecall, userName) => {
@@ -130,7 +130,7 @@ const commonEventHandlers: commonEventHandlers = {
       },
     );
   },
-  customize: (setter) => {
+  customize: setter => {
     return SDKMethodEventsManager.on('customize', (res, rej, customization) => {
       setter({
         customization: customization,
@@ -138,7 +138,7 @@ const commonEventHandlers: commonEventHandlers = {
       res();
     });
   },
-  microphoneDevice: (setter) => {
+  microphoneDevice: setter => {
     return SDKMethodEventsManager.on(
       'microphoneDevice',
       (res, rej, deviceId) => {
@@ -149,7 +149,7 @@ const commonEventHandlers: commonEventHandlers = {
       },
     );
   },
-  speakerDevice: (setter) => {
+  speakerDevice: setter => {
     return SDKMethodEventsManager.on('speakerDevice', (res, rej, deviceId) => {
       setter({
         deviceId,
@@ -157,7 +157,7 @@ const commonEventHandlers: commonEventHandlers = {
       });
     });
   },
-  cameraDevice: (setter) => {
+  cameraDevice: setter => {
     return SDKMethodEventsManager.on('cameraDevice', (res, rej, deviceId) => {
       setter({
         deviceId,
@@ -169,19 +169,19 @@ const commonEventHandlers: commonEventHandlers = {
 
 const registerListener = () => {
   moduleEventsUnsub = [
-    commonEventHandlers.customize((state) => {
+    commonEventHandlers.customize(state => {
       SdkApiInitState.customize = state;
     }),
-    commonEventHandlers.join((state) => {
+    commonEventHandlers.join(state => {
       SdkApiInitState.join = state;
     }),
-    commonEventHandlers.microphoneDevice((state) => {
+    commonEventHandlers.microphoneDevice(state => {
       SdkApiInitState.microphoneDevice = state;
     }),
-    commonEventHandlers.speakerDevice((state) => {
+    commonEventHandlers.speakerDevice(state => {
       SdkApiInitState.speakerDevice = state;
     }),
-    commonEventHandlers.cameraDevice((state) => {
+    commonEventHandlers.cameraDevice(state => {
       SdkApiInitState.cameraDevice = state;
     }),
     SDKMethodEventsManager.on('muteVideo', defaultMuteListener),
@@ -189,11 +189,13 @@ const registerListener = () => {
   ];
 };
 
+registerListener();
+
 const deRegisterListener = () => {
-  moduleEventsUnsub.forEach((v) => v());
+  moduleEventsUnsub.forEach(v => v());
 };
 
-const SdkApiContextProvider: React.FC = (props) => {
+const SdkApiContextProvider: React.FC = props => {
   const [joinState, setJoinState] = useState(SdkApiInitState.join);
   const [enterRoom, setEnterRoom] =
     useState<extractPromises<_InternalSDKMethodEventsMap['join']>>();
@@ -225,7 +227,7 @@ const SdkApiContextProvider: React.FC = (props) => {
     muteAudioListener.current = value;
   };
 
-  const clearState: SdkApiContextInterface['clearState'] = (key) => {
+  const clearState: SdkApiContextInterface['clearState'] = key => {
     switch (key) {
       case 'join':
         setJoinState(SdkApiInitState.join);
@@ -258,19 +260,19 @@ const SdkApiContextProvider: React.FC = (props) => {
     deRegisterListener();
 
     const unsub = [
-      commonEventHandlers.customize((state) => {
+      commonEventHandlers.customize(state => {
         setUserCustomization(state);
       }),
-      commonEventHandlers.join((state) => {
+      commonEventHandlers.join(state => {
         setJoinState(state);
       }),
-      commonEventHandlers.microphoneDevice((state) => {
+      commonEventHandlers.microphoneDevice(state => {
         setMicrophoneDeviceState(state);
       }),
-      commonEventHandlers.speakerDevice((state) => {
+      commonEventHandlers.speakerDevice(state => {
         setSpeakerDeviceState(state);
       }),
-      commonEventHandlers.cameraDevice((state) => {
+      commonEventHandlers.cameraDevice(state => {
         setCameraDeviceState(state);
       }),
       SDKMethodEventsManager.on('muteVideo', (...args) => {
@@ -282,7 +284,7 @@ const SdkApiContextProvider: React.FC = (props) => {
     ];
 
     return () => {
-      unsub.forEach((v) => v());
+      unsub.forEach(v => v());
       registerListener();
     };
   }, []);

package/template/src/components/SdkMuteToggleListener.tsx

@@ -1,18 +1,14 @@
-import React, { useContext, useEffect, createContext, useRef } from 'react';
-import { SdkApiContext } from './SdkApiContext';
-import {
-  useMuteToggleLocal,
-  useLocalUserInfo,
-  ToggleState,
-  MUTE_LOCAL_TYPE,
-} from 'customization-api';
+import React, {useContext, useEffect, createContext, useRef} from 'react';
+import {SdkApiContext} from './SdkApiContext';
+import {useLocalUserInfo, ToggleState} from 'customization-api';
+import useMuteToggleLocal, {MUTE_LOCAL_TYPE} from '../utils/useMuteToggleLocal';
 
 export const SdkMuteQueueContext = createContext({
-  videoMuteQueue: { current: [] },
-  audioMuteQueue: { current: [] },
+  videoMuteQueue: {current: []},
+  audioMuteQueue: {current: []},
 });
 
-const SdkMuteToggleListener = (props) => {
+const SdkMuteToggleListener = props => {
   const videoMuteQueue = useRef([]);
   const audioMuteQueue = useRef([]);
 
@@ -83,7 +79,7 @@ const SdkMuteToggleListener = (props) => {
   }, [local]);
 
   return (
-    <SdkMuteQueueContext.Provider value={{ videoMuteQueue, audioMuteQueue }}>
+    <SdkMuteQueueContext.Provider value={{videoMuteQueue, audioMuteQueue}}>
       {props.children}
     </SdkMuteQueueContext.Provider>
   );

package/template/src/components/SessionContext.tsx

@@ -74,7 +74,6 @@ export const SessionProvider = (props: {children: React.ReactNode}) => {
     useState<joinSessionInterface>(initJoinStoreValue);
   const joinSession = (data: joinSessionInterface) => {
     setJoinStore(data);
-    // console.log({data});
     history.push(`/${data.phrase}`);
   };
   return (