From 2ea85c00bf7794871b638005e33d5ebc25b32227 Mon Sep 17 00:00:00 2001 From: omenUchiha Date: Fri, 16 Feb 2024 09:04:15 +0530 Subject: [PATCH] Fixed Lint Errors --- .env | 6 +- package.json | 2 +- src/.eslintrc.js | 60 +++---- src/components/AllMembers.tsx | 1 + src/components/CreatePost.tsx | 13 +- src/components/DeleteDialog.tsx | 25 ++- src/components/EditComment.tsx | 6 +- src/components/Header.tsx | 17 +- src/components/Post.tsx | 26 ++-- src/components/PostBody.tsx | 2 + src/components/PostComments.tsx | 147 +----------------- src/components/PostFooter.tsx | 40 +---- src/components/PostHeader.tsx | 25 ++- src/components/PostLikesList.tsx | 9 +- src/components/ReportPost.tsx | 3 +- src/components/SeePostLikes.tsx | 1 + src/components/TaggingUserBlock.tsx | 10 +- .../dialog/createPost/AttachmentsHolder.tsx | 85 ++++------ .../dialog/createPost/CreatePostDialog.tsx | 34 ++-- src/components/dialog/editPost/EditPost.tsx | 3 +- .../media-components/ImageMedia.tsx | 4 +- src/components/post-details/index.tsx | 24 +-- .../topic-feed/select-feed-dropdown/index.tsx | 9 +- .../topic-feed/topic-list/index.tsx | 6 +- src/components/topic-feed/topic/index.tsx | 4 +- src/services/helper.ts | 3 +- src/services/index.ts | 7 +- src/services/utilityFunctions.tsx | 6 +- src/store/extrasSlice/extraSlice.ts | 3 +- src/store/feedPosts/feedsSlice.ts | 2 +- src/store/topics/topicsSlice.ts | 3 +- 31 files changed, 190 insertions(+), 396 deletions(-) diff --git a/.env b/.env index 30984ec..f0f072e 100644 --- a/.env +++ b/.env @@ -1,3 +1,3 @@ -REACT_LM_FEED_API_KEY = '' -REACT_LM_FEED_VERSION_CODE = 2 -REACT_LM_FEED_PLATFORM_CODE = 'rt' \ No newline at end of file +REACT_APP_LM_FEED_API_KEY = '' +REACT_APP_LM_FEED_VERSION_CODE = 2 +REACT_APP_LM_FEED_PLATFORM_CODE = 'rt' \ No newline at end of file diff --git a/package.json b/package.json index 01cd494..299e84a 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "likeminds-javascript-feed-sx", - "version": "1.1.0", + "version": "1.1.1", "private": true, "dependencies": { "@emotion/react": "11.11.1", diff --git a/src/.eslintrc.js b/src/.eslintrc.js index b391c30..b970e52 100644 --- a/src/.eslintrc.js +++ b/src/.eslintrc.js @@ -1,34 +1,34 @@ module.exports = { - env: { - browser: true, - es2021: true, - node: true - }, - extends: [ - 'eslint:recommended', - 'plugin:@typescript-eslint/recommended', - 'plugin:react/recommended' - ], - overrides: [ - { - env: { + env: { + browser: true, + es2021: true, node: true - }, - files: ['.eslintrc.{js,cjs}'], - parserOptions: { - sourceType: 'script' - } + }, + extends: [ + 'eslint:recommended', + 'plugin:@typescript-eslint/recommended', + 'plugin:react/recommended' + ], + overrides: [ + { + env: { + node: true + }, + files: ['.eslintrc.{js,cjs}'], + parserOptions: { + sourceType: 'script' + } + } + ], + parser: '@typescript-eslint/parser', + parserOptions: { + ecmaVersion: 'latest', + sourceType: 'module' + }, + plugins: ['@typescript-eslint', 'react'], + rules: { + '@typescript-eslint/indent': ['off', 2], + '@typescript-eslint/no-unused-vars': 'off', + '@typescript-eslint/no-explicit-any': 'off' } - ], - parser: '@typescript-eslint/parser', - parserOptions: { - ecmaVersion: 'latest', - sourceType: 'module' - }, - plugins: ['@typescript-eslint', 'react'], - rules: { - '@typescript-eslint/indent': ['off', 2], - '@typescript-eslint/no-unused-vars': 'off', - '@typescript-eslint/no-explicit-any': 'off' - } }; diff --git a/src/components/AllMembers.tsx b/src/components/AllMembers.tsx index 2014877..2e8850a 100644 --- a/src/components/AllMembers.tsx +++ b/src/components/AllMembers.tsx @@ -1,3 +1,4 @@ +/* eslint-disable @typescript-eslint/no-explicit-any */ import { IMember } from '@likeminds.community/feed-js'; import React, { useEffect, useState } from 'react'; import { lmFeedClient } from '../client'; diff --git a/src/components/CreatePost.tsx b/src/components/CreatePost.tsx index 069d357..3dc064c 100644 --- a/src/components/CreatePost.tsx +++ b/src/components/CreatePost.tsx @@ -1,14 +1,11 @@ -import userImg from '../assets/images/user.png'; +/* eslint-disable @typescript-eslint/no-explicit-any */ -import React, { useContext, useEffect, useRef, useState } from 'react'; -import PostOptions from './PostOptions'; -import DialogBox from './dialog/DialogBox'; -import CreatePostDialog from './dialog/createPost/CreatePostDialog'; -import { lmFeedClient } from '../client'; import { Dialog } from '@mui/material'; -import { IPost } from '@likeminds.community/feed-js'; +import React, { useEffect, useRef, useState } from 'react'; import { useSelector } from 'react-redux'; import { RootState } from '../store/store'; +import PostOptions from './PostOptions'; +import CreatePostDialog from './dialog/createPost/CreatePostDialog'; interface CreateFeedProps { feedModerationHandler: any; } @@ -34,7 +31,7 @@ const CreatePost: React.FC = ({ feedModerationHandler }) => { ref.current.blur(); } }, [openCreatePostDialog]); - const [open, setOpen] = useState(false); + // const [open, setOpen] = useState(false); function setUserImage() { const imageLink = currentUser?.imageUrl; diff --git a/src/components/DeleteDialog.tsx b/src/components/DeleteDialog.tsx index 9a77e73..c6c1c2a 100644 --- a/src/components/DeleteDialog.tsx +++ b/src/components/DeleteDialog.tsx @@ -1,3 +1,4 @@ +/* eslint-disable @typescript-eslint/no-explicit-any */ import React from 'react'; function DeleteDialog({ onClose, deleteComment, deletePost, type }: any) { @@ -22,8 +23,7 @@ function DeleteDialog({ onClose, deleteComment, deletePost, type }: any) { height: '288px', width: '400px', borderRadius: '16px' - }} - > + }}> + onClick={onClose}> + xmlns="http://www.w3.org/2000/svg"> + }}>

+ }}> {type === 1 ? 'Delete Post' : 'Delete Comment'}

@@ -74,15 +70,13 @@ function DeleteDialog({ onClose, deleteComment, deletePost, type }: any) { style={{ padding: '0px 36px 36px 36px', height: '168px' - }} - > + }}>

+ }}> {type === 1 ? 'Are you sure you want to delete this post permanently. Once confirmed, this action can’t be reversed.' : 'Are you sure you want to delete this comment permanently. Once confirmed, this action can’t be reversed.'} @@ -100,8 +94,7 @@ function DeleteDialog({ onClose, deleteComment, deletePost, type }: any) { border: 'none', cursor: 'pointer' }} - onClick={handleConfirm} - > + onClick={handleConfirm}> Confirm diff --git a/src/components/EditComment.tsx b/src/components/EditComment.tsx index 0ed7ea4..f237506 100644 --- a/src/components/EditComment.tsx +++ b/src/components/EditComment.tsx @@ -1,6 +1,8 @@ -import React, { useContext, useEffect, useMemo, useRef, useState } from 'react'; -import '../assets/css/input-area.css'; +/* eslint-disable @typescript-eslint/no-unused-vars */ +/* eslint-disable @typescript-eslint/no-explicit-any */ +import React, { useEffect, useRef, useState } from 'react'; import '../assets/css/createPostDialog.css'; +import '../assets/css/input-area.css'; import { convertTextToHTML, extractTextFromNode, diff --git a/src/components/Header.tsx b/src/components/Header.tsx index ed59182..8b6c20e 100644 --- a/src/components/Header.tsx +++ b/src/components/Header.tsx @@ -1,16 +1,17 @@ +/* eslint-disable @typescript-eslint/no-explicit-any */ +/* eslint-disable @typescript-eslint/no-unused-vars */ // src/Header/Header.tsx -import React, { useEffect, useState } from 'react'; -import './../assets/css/header.css'; -import { Badge, CircularProgress, IconButton, Menu, MenuItem } from '@mui/material'; -import NotificationsIcon from '@mui/icons-material/Notifications'; -import { lmFeedClient } from '../client'; import { IActivity, IUser } from '@likeminds.community/feed-js'; -import InfiniteScroll from 'react-infinite-scroll-component'; -import noNotification from '../assets/images/default.svg'; +import NotificationsIcon from '@mui/icons-material/Notifications'; +import { Badge, CircularProgress, IconButton, Menu } from '@mui/material'; import dayjs from 'dayjs'; import relativeTime from 'dayjs/plugin/relativeTime'; -import MoreVertIcon from '@mui/icons-material/MoreVert'; +import React, { useEffect, useState } from 'react'; +import InfiniteScroll from 'react-infinite-scroll-component'; +import { lmFeedClient } from '../client'; +import noNotification from '../assets/images/default.svg'; +import './../assets/css/header.css'; dayjs.extend(relativeTime); interface HeaderProps { // user: any; diff --git a/src/components/Post.tsx b/src/components/Post.tsx index e5a1d1c..66c0b53 100644 --- a/src/components/Post.tsx +++ b/src/components/Post.tsx @@ -1,19 +1,18 @@ -import userImg from '../assets/images/user.png'; -import liked from '../assets/images/liked.svg'; -import comment from '../assets/images/comment.svg'; +/* eslint-disable @typescript-eslint/no-explicit-any */ +/* eslint-disable @typescript-eslint/no-unused-vars */ import bookmark from '../assets/images/bookmark.svg'; +import comment from '../assets/images/comment.svg'; +import liked from '../assets/images/liked.svg'; import share from '../assets/images/share.svg'; +import userImg from '../assets/images/user.png'; import React, { useContext, useEffect, useState } from 'react'; -import PostHeader from './PostHeader'; +import { PostContext } from '../contexts/postContext'; +import { Topic } from '../models/topics'; import PostBody from './PostBody'; import PostFooter from './PostFooter'; -import { IPost, IUser, LMFeedTopics } from '@likeminds.community/feed-js'; +import PostHeader from './PostHeader'; import PostTopicBlock from './topic-feed/post-topic-block'; -import { FeedPost } from '../models/feedPost'; -import { User } from '../models/User'; -import { PostContext } from '../contexts/postContext'; -import { Topic } from '../models/topics'; interface PostProps { rightSidebarHandler: (action: string, value: any) => void; @@ -37,14 +36,7 @@ const Post: React.FC = ({ rightSidebarHandler }) => { if (!post) { return null; } - // useEffect(() => { - // console.log('The topics are', topics); - // if (topics) { - // for (let [key, val] of Object.entries(topics)) { - // console.log(val); - // } - // } - // }, [topics]); + return (

{/* Post */} diff --git a/src/components/PostBody.tsx b/src/components/PostBody.tsx index 2e9783d..b867696 100644 --- a/src/components/PostBody.tsx +++ b/src/components/PostBody.tsx @@ -1,3 +1,5 @@ +/* eslint-disable @typescript-eslint/no-unused-vars */ +/* eslint-disable @typescript-eslint/no-explicit-any */ import post from '../assets/images/post.jpg'; import 'react-responsive-carousel/lib/styles/carousel.min.css'; // requires a loader import { Carousel } from 'react-responsive-carousel'; diff --git a/src/components/PostComments.tsx b/src/components/PostComments.tsx index c34d353..aa0fa80 100644 --- a/src/components/PostComments.tsx +++ b/src/components/PostComments.tsx @@ -1,3 +1,6 @@ +/* eslint-disable @typescript-eslint/indent */ +/* eslint-disable @typescript-eslint/no-unused-vars */ +/* eslint-disable @typescript-eslint/no-explicit-any */ // src/Header/Header.tsx import React, { useContext, useEffect, useRef, useState } from 'react'; @@ -472,7 +475,6 @@ const PostComents: React.FC = ({ contentEditable={true} suppressContentEditableWarning tabIndex={0} - placeholder="hello world" id="editableDiv" onBlur={() => { if (contentEditableDiv && contentEditableDiv.current) { @@ -532,22 +534,22 @@ const PostComents: React.FC = ({ if (focusNode === null) { return; } - ('A'); + const div = focusNode.parentElement; const text = div!.childNodes; if (focusNode === null || text.length === 0) { return; } - ('B'); + const textContentFocusNode = focusNode.textContent; if (textContentFocusNode === null) { return; } - ('C'); + const tagOp = findTag(textContentFocusNode); - ('D'); + if (tagOp === undefined) return; - ('E'); + const substr = tagOp?.tagString; const { limitLeft, limitRight } = tagOp; @@ -1040,140 +1042,7 @@ const PostComents: React.FC = ({ - {/*
-
-
- {user?.name} - -
-
-
- {isReadMore && comment.text.length > 300 - ? Parser().parse(convertTextToHTML(comment.text.substring(0, 300)).innerHTML) - : Parser().parse(convertTextToHTML(comment.text).innerHTML)} - {isReadMore && comment.text.length > 300 ? ( - setIsReadMore(false)}> - ...ReadMore - - ) : null} -
-
-
-
- - overflow icon - - {renderMenu()} -
-
*/} - {/*
- - {renderLikeButton()} - - { - if (likesCount) { - rightSidebarHandler(SHOW_COMMENTS_LIKES_BAR, { - postId: postId, - entityType: 2, - totalLikes: likesCount, - commentId: comment.Id - }); - } else { - likeComment(); - } - }} - style={{ cursor: 'pointer' }}> - {likesCount ? likesCount : null} {likesCount > 1 ? 'Likes' : 'Like'} - - {comment.level === 0 ? ( - <> - {' '} - | - - { - setOpenReplyBox(!openReplyBox); - setOpenCommentsSection(true); - }}> - {commentsCount > 0 ? Reply : 'Reply'} - {' '} - 0 ? '#5046E5' : 'rgba(72, 79, 103, 0.7)' - }} - className="replyCount" - onClick={() => { - if (commentsCount !== repliesArray.length) { - getComments(); - } - setOpenCommentsSection(!openCommentsSection); - // if (commentsCount > 0) { - // } - }}> - - {commentsCount > 0 ? commentsCount + ' ' : null} - {commentsCount === 0 ? '' : commentsCount > 1 ? 'Replies' : 'Reply'} - - - - - ) : null} - - - {dayjs(comment.createdAt).fromNow()} - -
*/} {renderCommentContainer()} {showReplyBox()}
= ({ rightSidebarHandler }) => { contentEditable={true} suppressContentEditableWarning tabIndex={0} - placeholder="hello world" id="editableDiv" onBlur={() => { if (contentEditableDiv && contentEditableDiv.current) { @@ -412,9 +414,7 @@ const PostFooter: React.FC = ({ rightSidebarHandler }) => { if (tagOp === undefined) return; const substr = tagOp?.tagString; const { limitLeft, limitRight } = tagOp; - // if (!substr || substr.length === 0) { - // return; - // } + const textNode1Text = textContentFocusNode.substring(0, limitLeft - 1); const textNode2Text = textContentFocusNode.substring(limitRight + 1); @@ -455,12 +455,6 @@ const PostFooter: React.FC = ({ rightSidebarHandler }) => {
) : null}
- {/* Post comment send icon */} - {/*
- - - -
*/} ); } else { @@ -605,10 +599,7 @@ const PostFooter: React.FC = ({ rightSidebarHandler }) => { const comment = response?.data?.comment; const user = response?.data?.users; setPostUsersMap({ ...postUsersMap, ...user }); - // setCommentList([{ ...comment }].concat(commentList)); - // setPostCommentsCount(postCommentsCount + 1); - // setOpenCommentsSection(true); return { status: true, post: comment @@ -700,7 +691,6 @@ const PostFooter: React.FC = ({ rightSidebarHandler }) => { totalLikes: postLikesCount }); } - // setOpenSeeLikesDialog(true); } else { likePost(); } @@ -770,32 +760,12 @@ const PostFooter: React.FC = ({ rightSidebarHandler }) => {
-
- {/* */} - {setSavePostButton()} - {/* */} -
+
{setSavePostButton()}
{/* Comments */} {showPostScreenSection(location.pathname.includes('/post') ? true : false)} {/* Comments */} - - {/* setOpenSeeLikesDialog(false)}> - setOpenSeeLikesDialog(false)} - likesCount={postLikesCount} - entityType={1} - /> - */} ); }; diff --git a/src/components/PostHeader.tsx b/src/components/PostHeader.tsx index 2c0f106..66c21c0 100644 --- a/src/components/PostHeader.tsx +++ b/src/components/PostHeader.tsx @@ -1,24 +1,23 @@ -import userImg from '../assets/images/user.png'; +/* eslint-disable @typescript-eslint/no-explicit-any */ +/* eslint-disable @typescript-eslint/no-unused-vars */ +import { IMenuItem } from '@likeminds.community/feed-js'; +import MoreHorizIcon from '@mui/icons-material/MoreHoriz'; +import { Dialog, IconButton, Menu } from '@mui/material'; import dayjs from 'dayjs'; import relativeTime from 'dayjs/plugin/relativeTime'; -dayjs.extend(relativeTime); -import React, { useContext, useEffect, useState } from 'react'; -import { Dialog, IconButton, Menu } from '@mui/material'; -import MoreHorizIcon from '@mui/icons-material/MoreHoriz'; -import { lmFeedClient } from '../client'; -import { DELETE_POST, EDIT_POST } from '../services/feedModerationActions'; -import EditPost from './dialog/editPost/EditPost'; -import { IPost, IMenuItem } from '@likeminds.community/feed-js'; -import ReportPostDialogBox from './ReportPost'; +import React, { useContext, useState } from 'react'; +import { useDispatch, useSelector } from 'react-redux'; import { useLocation, useNavigate } from 'react-router-dom'; -import DeleteDialog from './DeleteDialog'; +import { lmFeedClient } from '../client'; import { PostContext } from '../contexts/postContext'; import { MenuItem } from '../models/menuItem'; -import { useDispatch, useSelector } from 'react-redux'; -import { RootState } from '../store/store'; import { deleteAPost } from '../store/feedPosts/feedsSlice'; import { handleEditDialogState, setTemporaryPost } from '../store/snackbar/snackbarSlice'; +import { RootState } from '../store/store'; +import DeleteDialog from './DeleteDialog'; +import ReportPostDialogBox from './ReportPost'; +dayjs.extend(relativeTime); const PostHeader: React.FC = () => { const { post, topics, index, user } = useContext(PostContext); diff --git a/src/components/PostLikesList.tsx b/src/components/PostLikesList.tsx index 58880f0..3cfe5b0 100644 --- a/src/components/PostLikesList.tsx +++ b/src/components/PostLikesList.tsx @@ -1,5 +1,6 @@ +/* eslint-disable @typescript-eslint/no-explicit-any */ import { IMember } from '@likeminds.community/feed-js'; -import React, { useContext, useEffect, useState } from 'react'; +import React, { useEffect, useState } from 'react'; import { lmFeedClient } from '../client'; import '../assets/css/all-members.css'; import InfiniteScroll from 'react-infinite-scroll-component'; @@ -34,19 +35,15 @@ function PostLikesList({ const [commentLikesArray, setCommentLikesArray] = useState([]); const [pageCount, setPageCount] = useState(4); const [loadMore, setLoadMore] = useState(true); + // eslint-disable-next-line @typescript-eslint/no-unused-vars const [totalMembers, setTotalMembers] = useState(0); const [userMap, setUserMap] = useState({}); const userContext = useSelector((state: RootState) => state.currentUser); const [showLoadingBars, setShowLoadingBars] = useState(true); - // useEffect(() => { - // // console.log() - // handleActions(); - // }, [initiateAction?.action]); useEffect(() => { async function initiateLikesScreen() { await getAllMembersThrice(); - // handleActions(); } initiateLikesScreen(); return () => { diff --git a/src/components/ReportPost.tsx b/src/components/ReportPost.tsx index 2e4a7c5..1d62ce7 100644 --- a/src/components/ReportPost.tsx +++ b/src/components/ReportPost.tsx @@ -1,3 +1,5 @@ +/* eslint-disable @typescript-eslint/no-unused-vars */ +/* eslint-disable @typescript-eslint/no-explicit-any */ /* eslint-disable no-use-before-define */ import { IconButton } from '@mui/material'; import CloseIcon from '@mui/icons-material/Close'; @@ -132,7 +134,6 @@ const ReportedReasonBlock = ({ border: selectedId === id ? '1px solid #5046e4' : '1px solid rgba(72, 79, 103, 0.5)', color: selectedId === id ? '#5046e4' : 'rgba(72, 79, 103, 0.5)' }}> - {/* // className="inline-block border rounded-[20px] py-2 px-3 mr-2 mb-2 text-sm text=[#9b9b9b]"> */} {name} ); diff --git a/src/components/SeePostLikes.tsx b/src/components/SeePostLikes.tsx index d35fb39..d16e352 100644 --- a/src/components/SeePostLikes.tsx +++ b/src/components/SeePostLikes.tsx @@ -1,3 +1,4 @@ +/* eslint-disable @typescript-eslint/no-explicit-any */ import React, { useEffect, useState } from 'react'; import { lmFeedClient } from '../client'; import '../assets/css/get-likes.css'; diff --git a/src/components/TaggingUserBlock.tsx b/src/components/TaggingUserBlock.tsx index 0723c89..3a03f6a 100644 --- a/src/components/TaggingUserBlock.tsx +++ b/src/components/TaggingUserBlock.tsx @@ -1,3 +1,4 @@ +/* eslint-disable @typescript-eslint/no-explicit-any */ import React from 'react'; import { setTagUserImage } from '../services/utilityFunctions'; import { useSelector } from 'react-redux'; @@ -13,14 +14,12 @@ function TaggingUserBlock({ clickHandler, item }: TaggingUserBlockProps) { className="taggingTile" onClick={(e) => { clickHandler(e, item); - }} - > + }}>
+ }}> {setTagUserImage(item, currentUser)}
+ }}> {item?.name}
diff --git a/src/components/dialog/createPost/AttachmentsHolder.tsx b/src/components/dialog/createPost/AttachmentsHolder.tsx index 853eabf..8cc826d 100644 --- a/src/components/dialog/createPost/AttachmentsHolder.tsx +++ b/src/components/dialog/createPost/AttachmentsHolder.tsx @@ -1,13 +1,10 @@ -import React, { ReactNode, useEffect, useMemo, useState } from 'react'; -import './attachmentsHolder.css'; -import phoneImageSample from '../../../assets/images/phoneImgaeSample.png'; -import { ChangeEvent } from 'react'; +/* eslint-disable @typescript-eslint/no-explicit-any */ +/* eslint-disable @typescript-eslint/no-unused-vars */ +import React, { ChangeEvent, ReactNode, useEffect, useMemo, useState } from 'react'; +import { Carousel } from 'react-responsive-carousel'; import { DecodeUrlModelSX } from '../../../services/models'; import previewImage from './../../../assets/images/ogTagPreview.png'; -import { Carousel } from 'react-responsive-carousel'; -import { Attachment } from '@likeminds.community/feed-js'; -import { DeleteOutlined } from '@mui/icons-material'; -import { IconButton } from '@mui/material'; +import './attachmentsHolder.css'; interface AttachmentsHolderProps { showMediaUploadBar: boolean | null; setShowMediaUploadBar: React.Dispatch>; @@ -79,15 +76,13 @@ const AttachmentsHolder = ({ {/* Image upload icon */} + onClick={setAttachmentTypeImage}> + xmlns="http://www.w3.org/2000/svg"> + onClick={setAttachmentTypeImage}> + xmlns="http://www.w3.org/2000/svg"> + onClick={setAttachmentTypeDocument}> + xmlns="http://www.w3.org/2000/svg"> + }}> {/* */} {setOGTagPreviewBlock()} {setInitiateUploadBlock()} @@ -238,8 +228,7 @@ function DocumentUploadAttachmentContainer({ height="36" viewBox="0 0 28 36" fill="none" - xmlns="http://www.w3.org/2000/svg" - > + xmlns="http://www.w3.org/2000/svg"> + xmlns="http://www.w3.org/2000/svg"> + xmlns="http://www.w3.org/2000/svg"> + xmlns="http://www.w3.org/2000/svg"> + onClick={handleCloseIconInitiateMediaUploadBox}> + xmlns="http://www.w3.org/2000/svg"> + }}> + }}>