new component flow works

packages/fakeyou.com/src/components/common/SelectModal/SelectModalV2.tsx

@@ -1,18 +1,16 @@
 import React, {
   memo,
   ReactNode,
+  useEffect,
   useState,
-  // useEffect,
 } from "react";
 
 import {
   Button,
   TempInput as Input,
   Modal,
-  // Searcher
 } from "components/common";
 
-// import NonRouteTabs from "../Tabs/NonRouteTabs";
 import { faTrash } from "@fortawesome/free-solid-svg-icons";
 
 export type SelectModalData = {
@@ -23,8 +21,8 @@ export type SelectModalData = {
 interface SelectModalProps {
   label?: string;
   modalTitle?: string;
-  value?: SelectModalData;
-  onSelect?: (data: SelectModalData) => void;
+  value?: string;
+  onClear: () => void;
   required?: boolean;
   children: ReactNode
 }
@@ -33,53 +31,22 @@ export default memo(function SelectModal ({
   label,
   // tabs,
   modalTitle = "Select",
-  onSelect,
-  value,
+  onClear,
+  value = "",
   required,
   children
 }: SelectModalProps) {
-    const emptyValue =  {token:"", title:""};
-    const [{
-      isModalOpen,
-      selectedValue,
-      // valueType,
-      // activeTab
-    },  setState] = useState({
-      isModalOpen:false,
-      selectedValue: value ? value : emptyValue,
-      // activeTab: tabs[0].tabKey,
-      // valueType: tabs[0].typeFilter || "all"
-    })
-    // console.log("🔫", tabs, activeTab, valueType);
-
-    // Update mediaType when activeTab changes
-    // useEffect(() => {
-    //   const currentTab = tabs.find(tab => tab.tabKey === activeTab);
-    //   setState((curr)=>({...curr, valueType: currentTab?.typeFilter || "all"}))
-    // }, [activeTab, tabs]);
-
+    const [isModalOpen, setModalOpen] = useState(false
+    )
     const openModal = () => {
-      setState((curr)=>({...curr, isModalOpen: true}));
+      setModalOpen(true);
     };
 
     const closeModal = () => {
-      setState((curr)=>({...curr, isModalOpen: false}));
+      setModalOpen(false);
     };
 
-    const handleRemove = () => {
-      setState((curr)=>({...curr, selectedValue: emptyValue}));
-      if (onSelect) onSelect(emptyValue);
-    };
-
-    const handleOnSelect = (data:{token:string, title:string}) => {
-      setState((curr)=>({
-        ...curr,
-        selectedValue: {token: data.token, title: data.title || ""},
-        isModalOpen: false
-      }));
-      if (onSelect) onSelect(data);
-    }
-
+    useEffect(closeModal, [value]);
 
     return (
       <>
@@ -101,18 +68,16 @@ export default memo(function SelectModal ({
               wrapperClassName="w-100"
               placeholder="None selected"
               onClick={openModal}
-              value={selectedValue.title !=="" 
-                ? selectedValue.title 
-                : selectedValue.token || ""}
+              value={value}
             />
             
-            <Button label={selectedValue.token !== "" ? "Change" : "Select"} onClick={openModal} />
-            {selectedValue.token && (
+            <Button label={value !== "" ? "Change" : "Select"} onClick={openModal} />
+            {value && (
               <Button
                 square={true}
                 variant="danger"
                 icon={faTrash}
-                onClick={handleRemove}
+                onClick={onClear}
                 tooltip="Remove"
               />
             )}

packages/fakeyou.com/src/components/common/SelectModalVideoTabs/SelectModalVideoTabs.tsx

@@ -12,33 +12,56 @@ import {
   MediaCards,
   Pagination,
   SkeletonCard,
-  NonRouteTabs
+  // NonRouteTabs
 } from "components/common";
 
 import { SelectModalData, SelectModalV2} from "../SelectModal";
 
 import prepFilter from "resources/prepFilter";
-import { StringLiteral } from "typescript";
 
-export default memo(function SelectModalVideoTabs({
+export default memo(function SelectModalWrapper({
   debug = false,
+  value,
   modalTitle,
   inputLabel,
-  onSelect,
+  onSelect
 }: {
   debug?: boolean;
+  value: SelectModalData;
   modalTitle: string;
   inputLabel: string;
-  onSelect?: (data:SelectModalData) => void;
+  onSelect: (data:SelectModalData) => void;
 }) {
+
+  return (
+    <SelectModalV2
+      modalTitle={modalTitle}
+      label={inputLabel}
+      value={value.title !=="" 
+      ? value.title 
+      : value.token || ""}
+      onClear={()=>{onSelect({title:"",token:""})}}
+      // searcher={true}
+    >
+      <VideoTabsContent debug={debug} onSelect={onSelect}/>
+    </SelectModalV2>
+  );
+});
+
+function VideoTabsContent({
+  debug=false,
+  onSelect
+}:{
+  debug?: boolean
+  onSelect: (data:SelectModalData) => void;
+}){
   const gridContainerRef = useRef<HTMLDivElement | null>(null);
   const [list, listSet] = useState<MediaFileType[]>([]);
   const { user } = useSession();
-
   const media = useListContent({
     addQueries: {
       page_size: 9,
-      ...prepFilter("mediaType", "filter_media_type"),
+      ...prepFilter("video", "filter_media_type"),
     },
     urlUpdate: false,
     debug: debug ? "Video List" : undefined,
@@ -48,7 +71,6 @@ export default memo(function SelectModalVideoTabs({
     requestList: true,
     urlParam: user?.username || ""
   });
-
   const handlePageClick = (selectedItem: { selected: number }) => {
     media.pageChange(selectedItem.selected);
   };
@@ -58,60 +80,52 @@ export default memo(function SelectModalVideoTabs({
     pageCount: media.pageCount,
     currentPage: media.page,
   };
-
-  return (
-    <SelectModalV2
-      modalTitle={modalTitle}
-      // searcher={true}
-    >
-      <p>children</p>
-      {/* <div className="searcher-container in-modal" id={listKey}>
-          <Pagination {...paginationProps} />
-          {media.isLoading ? (
-            <div className="row gx-3 gy-3">
-              {Array.from({ length: 12 }).map((_, index) => (
-                <SkeletonCard key={index} />
-              ))}
-            </div>
-          ) : (
-            <>
-              {media.list.length === 0 && media.status === 3 ? (
-                <div className="text-center mt-4 opacity-75">
-                  No media created yet.
-                </div>
-              ) : (
-                <MasonryGrid
-                  gridRef={gridContainerRef}
-                  onLayoutComplete={() => console.log("Layout complete!")}
-                >
-                  {media.list.map((data: MediaFileType, key: number) => {
-                    let props = {
-                      data,
-                      showCreator: true,
-                      type: "media",
-                      inSelectModal: true,
-                      onResultSelect,
-                    };
-                    return (
-                      <div
-                        {...{
-                          className: "col-12 col-sm-6 col-xl-4 grid-item",
-                          key,
-                        }}
-                      >
-                        <MediaCards {...{ type: data.media_type, props }} />
-                      </div>
-                    );
-                  })}
-                </MasonryGrid>
-              )}
-            </>
-          )}
-
+  if (media.isLoading){
+    return (
+      <div className="row gx-3 gy-3">
+        {Array.from({ length: 12 }).map((_, index) => (
+          <SkeletonCard key={index} />
+        ))}
+      </div>
+    );
+  }else if (media.list.length === 0 && media.status === 3){
+    return(
+      <div className="text-center m-4 opacity-75">
+        No media created yet.
+      </div>
+    );
+  }else {
+    return(
+      <>
+        <Pagination {...paginationProps} />
+        <MasonryGrid
+          gridRef={gridContainerRef}
+          onLayoutComplete={() => console.log("Layout complete!")}
+        >
+          {media.list.map((data: MediaFileType, key: number) => {
+            let props = {
+              data,
+              showCreator: true,
+              type: "media",
+              inSelectModal: true,
+              onResultSelect: onSelect,
+            };
+            return (
+              <div
+                {...{
+                  className: "col-12 col-sm-6 col-xl-4 grid-item",
+                  key,
+                }}
+              >
+                <MediaCards {...{ type: data.media_type, props }} />
+              </div>
+            );
+          })}
+        </MasonryGrid>
         <div className="d-flex justify-content-end mt-4">
           <Pagination {...paginationProps} />
-        </div>
-      </div> */}
-    </SelectModalV2>
-  );
-});
+        </div> 
+      </>
+    );
+  }
+}

packages/fakeyou.com/src/v2/view/pages/video_workflow/components/tabContentLibrary.tsx

@@ -31,6 +31,7 @@ export default function TabContentLibrary({
     <div className="row g-3">
       <div className="col-12">
         <SelectModalVideoTabs
+          value={{token:pageState.mediaFileToken||"", title:""}}
           modalTitle="Select a Video"
           inputLabel="Select a Video"
           onSelect={handleOnSelect}