event fixes

src/modules/api/events/events-api.ts

@@ -34,6 +34,7 @@ export type Participants = {
   uid: number;
   name: string;
   avatar: string | null;
+  flag: string | null;
 };
 
 export type EventSettings = {

src/screens/InAppScreens/TravelsScreen/EventScreen/index.tsx

@@ -51,18 +51,19 @@ import {
   usePostUploadPhotoMutation,
   usePostUploadTempFileMutation
 } from '@api/events';
-import { Input, Loading, WarningModal } from 'src/components';
+import { AvatarWithInitials, Input, Loading, WarningModal } from 'src/components';
 import moment from 'moment';
 import { renderSpotsText } from '../EventsScreen/utils';
 
 import { useWindowDimensions } from 'react-native';
-import RenderHtml from 'react-native-render-html';
+import RenderHtml, { HTMLElementModel, TNode } from 'react-native-render-html';
 import { PhotoItem } from './PhotoItem';
 import Share from 'react-native-share';
 import { CACHED_ATTACHMENTS_DIR } from 'src/constants/constants';
 import { Dropdown } from 'react-native-searchable-dropdown-kj';
 import { KeyboardAwareScrollView } from 'react-native-keyboard-aware-scroll-view';
 import Tooltip from 'react-native-walkthrough-tooltip';
+import WebView from 'react-native-webview';
 
 type TempFile = {
   filetype: string;
@@ -114,6 +115,7 @@ const EventScreen = ({ route }: { route: any }) => {
 
   const [modalInfo, setModalInfo] = useState({
     visible: false,
+    type: 'success',
     title: '',
     message: '',
     buttonTitle: 'OK',
@@ -131,7 +133,7 @@ const EventScreen = ({ route }: { route: any }) => {
       const partisipantsWidth = contentWidth / 2;
       setMaxVisibleParticipants(Math.floor(partisipantsWidth / 22));
       setMaxVisibleParticipantsWithGap(Math.floor(partisipantsWidth / 32));
-      setFilteredParticipants(data.data.participants_data.filter((p) => p.avatar));
+      setFilteredParticipants(data.data.participants_data);
 
       setRegistrationInfo(() => {
         if (data.data.full) {
@@ -348,6 +350,17 @@ const EventScreen = ({ route }: { route: any }) => {
   };
 
   const handleJoinEvent = async () => {
+    if (event.settings.type !== 1) {
+      setModalInfo({
+        visible: true,
+        type: 'success',
+        title: 'Success',
+        buttonTitle: 'OK',
+        message: `Thank you for joing, we’ll get back to you soon.`,
+        action: () => {}
+      });
+    }
+
     await joinEvent(
       { token, id: event.id },
       {
@@ -374,6 +387,7 @@ const EventScreen = ({ route }: { route: any }) => {
   const handleDeleteFile = async (file: EventAttachments) => {
     setModalInfo({
       visible: true,
+      type: 'delete',
       title: 'Delete file',
       buttonTitle: 'Delete',
       message: `Are you sure you want to delete this file?`,
@@ -845,18 +859,31 @@ const EventScreen = ({ route }: { route: any }) => {
                           backgroundColor="transparent"
                         >
                           <TouchableOpacity onPress={() => setTooltipUser(index)}>
-                            <Image
-                              key={index}
-                              source={{ uri: API_HOST + user.avatar }}
-                              style={[
-                                styles.userImage,
-                                (filteredParticipants.length > maxVisibleParticipantsWithGap ||
-                                  filteredParticipants.length < (event.participants ?? 0)) &&
-                                index !== 0
-                                  ? { marginLeft: -10 }
-                                  : {}
-                              ]}
-                            />
+                            {user.avatar ? (
+                              <Image
+                                key={index}
+                                source={{ uri: API_HOST + user.avatar }}
+                                style={[
+                                  styles.userImage,
+                                  (filteredParticipants.length > maxVisibleParticipantsWithGap ||
+                                    filteredParticipants.length < (event.participants ?? 0)) &&
+                                  index !== 0
+                                    ? { marginLeft: -10 }
+                                    : {}
+                                ]}
+                              />
+                            ) : (
+                              <AvatarWithInitials
+                                text={
+                                  user.name?.split(' ')[0][0] + (user.name?.split(' ')[1][0] ?? '')
+                                }
+                                flag={API_HOST + user?.flag}
+                                size={28}
+                                fontSize={12}
+                                borderColor={Colors.DARK_LIGHT}
+                                borderWidth={1}
+                              />
+                            )}
                           </TouchableOpacity>
                         </Tooltip>
                       ))}
@@ -1229,7 +1256,7 @@ const EventScreen = ({ route }: { route: any }) => {
         </ScrollView>
       </KeyboardAwareScrollView>
       <WarningModal
-        type={'delete'}
+        type={modalInfo.type}
         isVisible={modalInfo.visible}
         buttonTitle={modalInfo.buttonTitle}
         message={modalInfo.message}
@@ -1241,6 +1268,11 @@ const EventScreen = ({ route }: { route: any }) => {
   );
 };
 
+const iframeModel = HTMLElementModel.fromCustomModel({
+  tagName: 'iframe',
+  contentModel: 'block' as any
+});
+
 const WebDisplay = React.memo(function WebDisplay({ html }: { html: string }) {
   const { width: windowWidth } = useWindowDimensions();
   const contentWidth = windowWidth * 0.9;
@@ -1249,7 +1281,7 @@ const WebDisplay = React.memo(function WebDisplay({ html }: { html: string }) {
   const processedHtml = React.useMemo(() => {
     let updatedHtml = html;
 
-    updatedHtml = updatedHtml.replace(/src="\/img\//g, `src="${API_HOST}/img/`);
+    updatedHtml = updatedHtml.replace(/src="(?:\/(?:\.\.\/)*|\/)img\//g, `src="${API_HOST}/img/`);
 
     updatedHtml = updatedHtml.replace(/href="(?!http)([^"]*)"/g, (match, path) => {
       const separator = path.includes('?') ? '&' : '?';
@@ -1260,7 +1292,37 @@ const WebDisplay = React.memo(function WebDisplay({ html }: { html: string }) {
     return updatedHtml;
   }, [html, token]);
 
-  return <RenderHtml contentWidth={contentWidth} source={{ html: processedHtml }} />;
+  const renderers = {
+    iframe: ({ tnode }: { tnode: TNode }) => {
+      const src = tnode.attributes.src || '';
+      const width = contentWidth;
+      const height = Number(tnode.attributes.height) || 250;
+
+      return (
+        <WebView
+          source={{ uri: src }}
+          style={{ width, height }}
+          javaScriptEnabled
+          domStorageEnabled
+          startInLoadingState
+          scalesPageToFit
+        />
+      );
+    }
+  };
+
+  const customHTMLElementModels = {
+    iframe: iframeModel
+  };
+
+  return (
+    <RenderHtml
+      contentWidth={contentWidth}
+      source={{ html: processedHtml }}
+      customHTMLElementModels={customHTMLElementModels}
+      renderers={renderers}
+    />
+  );
 });
 
 export default EventScreen;