From b0c3f23f2e513eff88da8a3873da2bb6ed4fc603 Mon Sep 17 00:00:00 2001 From: Victor Date: Mon, 8 Apr 2024 13:41:57 -0700 Subject: [PATCH] some EntityInput refactor --- .../src/components/common/Modal/Modal.tsx | 12 ++++- .../src/components/common/Modal/index.tsx | 1 + .../src/components/common/index.tsx | 8 ++- .../entities/EntityInput/EntityInput.tsx | 51 ++++++++++++------- .../entities/EntityInput/EntityInputEmpty.tsx | 40 +++++++++++---- .../modals/MediaBrowser/MediaBrowser.tsx | 13 +++-- .../components/modals/MediaBrowser/index.tsx | 3 +- 7 files changed, 88 insertions(+), 40 deletions(-) diff --git a/packages/fakeyou.com/src/components/common/Modal/Modal.tsx b/packages/fakeyou.com/src/components/common/Modal/Modal.tsx index 876228e817..8924a64afa 100644 --- a/packages/fakeyou.com/src/components/common/Modal/Modal.tsx +++ b/packages/fakeyou.com/src/components/common/Modal/Modal.tsx @@ -5,12 +5,14 @@ import { useSpring, a } from "@react-spring/web"; import { IconDefinition } from "@fortawesome/fontawesome-svg-core"; import "./Modal.scss"; +type HandleClose = () => void; + interface ModalProps { className?: string; content?: React.ElementType | null; contentProps?: any; show: boolean; - handleClose: () => void; + handleClose: HandleClose; noHeader?: boolean; omitBody?: boolean; onCancel?: (e: React.MouseEvent) => any; @@ -25,6 +27,10 @@ interface ModalProps { mobileFullscreen?: boolean; } +export interface ModalUtilities { + handleClose: HandleClose; +} + const ModalBody = ({ children, omitBody, padding }: { children: any, omitBody?: boolean, padding?: boolean }) => omitBody ? children :
{ children }
; @@ -85,6 +91,8 @@ const Modal: React.FC = ({ handleClose(); }; + const modalUtilities: ModalUtilities = { handleClose }; + if (!show) { return null; } @@ -115,7 +123,7 @@ const Modal: React.FC = ({ )} - {Content && } + {Content && } {showButtons && (
diff --git a/packages/fakeyou.com/src/components/common/Modal/index.tsx b/packages/fakeyou.com/src/components/common/Modal/index.tsx index 09b91f72b9..a4465987c5 100644 --- a/packages/fakeyou.com/src/components/common/Modal/index.tsx +++ b/packages/fakeyou.com/src/components/common/Modal/index.tsx @@ -1 +1,2 @@ export { default } from "./Modal"; +export type { ModalUtilities } from "./Modal"; diff --git a/packages/fakeyou.com/src/components/common/index.tsx b/packages/fakeyou.com/src/components/common/index.tsx index c49233d7bc..55ec424de8 100644 --- a/packages/fakeyou.com/src/components/common/index.tsx +++ b/packages/fakeyou.com/src/components/common/index.tsx @@ -22,7 +22,7 @@ import Label from "./Label"; import LikeButton from "./LikeButton"; import MocapInput from "./MocapInput"; import MasonryGrid from "./MasonryGrid/MasonryGrid"; -import Modal from "./Modal"; +import Modal, { ModalUtilities } from "./Modal"; import Notification from "./Notification"; import NumberSlider from "./NumberSlider"; import NumberSliderV2 from "./NumberSliderV2"; @@ -53,7 +53,6 @@ import VideoBasic from "./VideoBasic"; import VideoFakeyou from "./VideoFakeyou"; import VideoInput from "./VideoInput"; import WeightCoverImage from "./WeightCoverImage"; -export type { SelectModalData }; export { Accordion, @@ -117,3 +116,8 @@ export { VideoInput, WeightCoverImage, }; + +export type { + ModalUtilities, + SelectModalData +}; diff --git a/packages/fakeyou.com/src/components/entities/EntityInput/EntityInput.tsx b/packages/fakeyou.com/src/components/entities/EntityInput/EntityInput.tsx index 4226dac87d..e354cd2695 100644 --- a/packages/fakeyou.com/src/components/entities/EntityInput/EntityInput.tsx +++ b/packages/fakeyou.com/src/components/entities/EntityInput/EntityInput.tsx @@ -4,8 +4,8 @@ import { a, useTransition } from "@react-spring/web"; import { MediaFile } from "@storyteller/components/src/api/media_files/GetMedia"; import Iframe from "react-iframe"; import { Button, Label, Spinner } from "components/common"; -import { AcceptTypes, EntityInputMode, EntityModeProp, getMediaTypesByCategory, mediaCategoryfromString, MediaFilters, UploaderResponse } from "components/entities/EntityTypes"; -import { useMedia, useMediaUploader, useModal, useSession } from "hooks"; +import { AcceptTypes, EntityModeProp, mediaCategoryfromString, MediaFilters, UploaderResponse } from "components/entities/EntityTypes"; +import { useMedia, useMediaUploader } from "hooks"; import { BucketConfig } from "@storyteller/components/src/api/BucketConfig"; import EntityInputEmpty from "./EntityInputEmpty"; import "./EntityInput.scss"; @@ -37,11 +37,10 @@ const MediaBusy = () => { return ; }; -const MocapInputFull = ({ media, clear, ...rest }: SlideProps) => { +const EntityInputFull = ({ media, clear }: SlideProps) => { const bucketConfig = new BucketConfig(); const mediaUrl = media?.public_bucket_path ? bucketConfig.getGcsUrl(media.public_bucket_path) : ""; const mediaType = mediaCategoryfromString(media?.media_type || ""); - // const yada = ListEntityFilters(EntityInputMode.media).indexOf(media.media_type); switch (mediaType) { case MediaFilters.video: return <> @@ -66,26 +65,20 @@ const MocapInputFull = ({ media, clear, ...rest }: SlideProps) => { } }; -const AniMod = ({ animating, className, isLeaving, render: Render, style, ...rest }: AniProps) => ; -export default function EntityInput({ accept: inAccept, aspectRatio = "square", label, name = "", onChange, type, value, ...rest }: Props) { - const accept = Array.isArray(inAccept) ? inAccept : [inAccept]; - const inputMode = EntityInputMode[type]; - const isMedia = inputMode === EntityInputMode.media; - const fileTypes = isMedia ? accept.map((mediaCategory,i) => { - return mediaCategory ? getMediaTypesByCategory(mediaCategoryfromString(mediaCategory)) : []; - }).flat() : []; +export default function EntityInput({ accept, aspectRatio = "square", label, name = "", onChange, type, value, ...rest }: Props) { const { search } = useLocation(); - const presetToken = search ? new URLSearchParams(search).get("preset_token") : ""; + const urlSearch = new URLSearchParams(search); + const presetToken = search ? urlSearch.get("preset_token") : ""; + const queryUser = search ? urlSearch.get("query_user") : ""; const [mediaToken,mediaTokenSet] = useState(presetToken || value || ""); const { media, mediaSet } = useMedia({ mediaToken }); - const { user } = useSession(); - const { open } = useModal(); const clear = () => { mediaSet(undefined); mediaTokenSet(""); @@ -130,12 +123,32 @@ export default function EntityInput({ accept: inAccept, aspectRatio = "square", { transitions((style: any, i: number, state: any) => { let isLeaving = state.phase === "leave"; - let sharedProps = { animating, isLeaving, media, style }; + let sharedProps = { animating, isLeaving, style }; return [ - , - , - + , + , + ][i]; }) } diff --git a/packages/fakeyou.com/src/components/entities/EntityInput/EntityInputEmpty.tsx b/packages/fakeyou.com/src/components/entities/EntityInput/EntityInputEmpty.tsx index 5373f8276f..d734438352 100644 --- a/packages/fakeyou.com/src/components/entities/EntityInput/EntityInputEmpty.tsx +++ b/packages/fakeyou.com/src/components/entities/EntityInput/EntityInputEmpty.tsx @@ -1,8 +1,21 @@ import React from "react"; -import { AcceptTypes, EntityInputMode, getMediaTypesByCategory, isSelectedType, mediaCategoryfromString, MediaFilters } from "components/entities/EntityTypes"; import { SlideProps } from "./EntityInput"; -import { MediaBrowser } from "components/modals"; +import { + // useMediaUploader, + useModal, + useSession +} from "hooks"; +import MediaBrowser, { MediaBrowserProps } from "components/modals/MediaBrowser"; import { FileWrapper } from "components/common"; +import { + AcceptTypes, + EntityInputMode, + EntityModeProp, + getMediaTypesByCategory, + isSelectedType, + mediaCategoryfromString, + MediaFilters +} from "components/entities/EntityTypes"; import { FontAwesomeIcon as Icon } from "@fortawesome/react-fontawesome"; import { faDiagramSankey, @@ -16,23 +29,32 @@ import { interface EmptySlideProps extends SlideProps { - accept?: AcceptTypes[], - inputMode: EntityInputMode, + accept: AcceptTypes | AcceptTypes[], inputProps?: any, - open: any, - user: any + queryUser?: string, + type: EntityModeProp, }; -export default function EntityInputEmpty({ accept, open, inputMode, inputProps, user, ...rest }: EmptySlideProps) { - const accepted = accept ? accept : []; +export default function EntityInputEmpty({ accept, inputProps, queryUser, type, ...rest }: EmptySlideProps) { + const { open } = useModal(); + const { user } = useSession(); + const accepted = Array.isArray(accept) ? accept : [accept]; + const inputMode = EntityInputMode[type]; const isMedia = inputMode === EntityInputMode.media; const fileTypes = isMedia ? accepted.map((mediaCategory,i) => { return mediaCategory ? getMediaTypesByCategory(mediaCategoryfromString(mediaCategory)) : []; }).flat() : []; + const props: MediaBrowserProps = { + accept: accepted, + inputMode, + username: queryUser || user?.username || "", + ...rest + }; + const browserClick = () => open({ component: MediaBrowser, - props: { accept, inputMode, username: user?.username || "", ...rest } + props }); const mediaIcons = () => { diff --git a/packages/fakeyou.com/src/components/modals/MediaBrowser/MediaBrowser.tsx b/packages/fakeyou.com/src/components/modals/MediaBrowser/MediaBrowser.tsx index e1ee990100..f59ada740b 100644 --- a/packages/fakeyou.com/src/components/modals/MediaBrowser/MediaBrowser.tsx +++ b/packages/fakeyou.com/src/components/modals/MediaBrowser/MediaBrowser.tsx @@ -1,7 +1,7 @@ import React, { useState } from "react"; import { MediaList } from "components/entities"; -import { AcceptTypes, EntityInputMode, EntityFilterOptions } from "components/entities/EntityTypes"; -import { Pagination, TempSelect } from "components/common"; +import { AcceptTypes, EntityInputMode, EntityFilterOptions, } from "components/entities/EntityTypes"; +import { ModalUtilities, Pagination, TempSelect } from "components/common"; import AudioPlayerProvider from "components/common/AudioPlayer/AudioPlayerContext"; import SkeletonCard from "components/common/Card/SkeletonCard"; import { GetBookmarksByUser } from "@storyteller/components/src/api/bookmarks/GetBookmarksByUser"; @@ -20,11 +20,9 @@ import "./MediaBrowser.scss"; const n = () => {}; -interface Props { +export interface MediaBrowserProps { accept?: AcceptTypes[], - handleClose: any; inputMode: EntityInputMode; - mediaToken: string; onSearchChange?: (e: any) => void; onSelect?: any; owner?: string; @@ -32,9 +30,10 @@ interface Props { username: string; } +interface MediaBrowserInternal extends ModalUtilities, MediaBrowserProps {} + export default function MediaBrowser({ accept, - mediaToken, handleClose = n, inputMode, onSearchChange = n, @@ -42,7 +41,7 @@ export default function MediaBrowser({ owner, search, username -}: Props) { +}: MediaBrowserInternal) { console.log( "🐢", diff --git a/packages/fakeyou.com/src/components/modals/MediaBrowser/index.tsx b/packages/fakeyou.com/src/components/modals/MediaBrowser/index.tsx index 44c7ff0f7e..564cd33ca8 100644 --- a/packages/fakeyou.com/src/components/modals/MediaBrowser/index.tsx +++ b/packages/fakeyou.com/src/components/modals/MediaBrowser/index.tsx @@ -1 +1,2 @@ -export { default } from "./MediaBrowser"; \ No newline at end of file +export { default } from "./MediaBrowser"; +export type { MediaBrowserProps } from "./MediaBrowser";