media browser pages

packages/components/src/api/weights/Search.ts

@@ -0,0 +1,19 @@
+import MakeRequest from "../MakeRequest";
+import { Weight } from "./GetWeight";
+
+export interface SearchWeightRequest {
+  search_term: string;
+  weight_type?: string;
+  weight_category?: string;
+  ietf_language_tag?: string;
+}
+
+export interface SearchWeightResponse {
+  success: boolean;
+  weights?: Weight[];
+}
+
+export const SearchWeight = MakeRequest<string, SearchWeightRequest, SearchWeightResponse, {}>({
+  method: "POST",
+  routingFunction: () => `/v1/weights/search`,
+});

packages/fakeyou.com/src/components/entities/EntityInput/EntityInput.tsx

@@ -14,13 +14,20 @@ import { UploadMedia, UploadMediaResponse } from "@storyteller/components/src/ap
 import { v4 as uuidv4 } from "uuid";
 import "./EntityInput.scss";
 
+// enum EntityInputMode {
+//   Bookmarks = "bookmarks",
+//   Media = "media",
+//   Weights = "weights",
+//   SearchWeights = "searchWeights",
+// }
+
 interface Props {
+  aspectRatio?: "square" | "landscape" | "portrait",
+  mediaType?: MediaFilterProp,
   label?: string, 
   onChange?: any,
-  owner?: string,
-  mediaType?: MediaFilterProp,
-  aspectRatio?: "square" | "landscape" | "portrait",
-  weightType?: WeightFilterProp,
+  type: string,
+  weightType?: WeightFilterProp
 }
 
 interface SlideProps {
@@ -31,9 +38,7 @@ interface EmptySlideProps extends SlideProps {
   entityType: EntityType,
   filterType: MediaFilterProp | WeightFilterProp,
   inputProps?: any,
-  onSelect: any,
   open: any,
-  owner: string,
   user: any
 };
 
@@ -66,10 +71,10 @@ const MocapInputFull = ({ media }: SlideProps) => {
   </>;
 };
 
-const MediaPickerEmpty = ({ entityType, filterType, media, onSelect, open, owner, inputProps, user }: EmptySlideProps) => {
+const MediaPickerEmpty = ({ entityType, filterType, open, inputProps, user, ...rest }: EmptySlideProps) => {
   const browserClick = () => open({
     component: MediaBrowser,
-    props: { entityType, filterType, onSelect, owner, username: user?.username || "" }
+    props: { entityType, filterType, username: user?.username || "", ...rest }
   });
 
   const mediaIcons = () => {
@@ -109,7 +114,7 @@ const AniMod = ({ animating, className, isLeaving, render: Render, style, ...res
     <Render {...{ ...rest, animating }} />
   </a.div>;
 
-export default function EntityInput({ aspectRatio = "square", label, onChange, owner, mediaType, weightType }: Props) {
+export default function EntityInput({ aspectRatio = "square", label, onChange, mediaType, weightType, ...rest }: Props) {
   const entityType = mediaType ? EntityType.media : weightType ? EntityType.weights : EntityType.unknown;
   const filterType = mediaType || weightType || "all";
   const { search } = useLocation();
@@ -136,6 +141,7 @@ export default function EntityInput({ aspectRatio = "square", label, onChange, o
   });
   const onSelect = (data: MediaFile) => {
     mediaSet(data)
+    console.log("🔅",data);
     onChange({ target: { name: "temp", value: data.token } });
   }
   const busy = false;
@@ -164,7 +170,7 @@ export default function EntityInput({ aspectRatio = "square", label, onChange, o
           return [
             <AniMod {...{ render: MediaBusy, className: "fy-entity-input-busy", ...sharedProps }}/>,
             <AniMod {...{ render: MocapInputFull, className: "fy-entity-input-full", ...sharedProps }}/>,
-            <AniMod {...{ render: MediaPickerEmpty, className: "fy-entity-input-empty", entityType, filterType, inputProps, onSelect, open, owner, user, ...sharedProps }}/>
+            <AniMod {...{ render: MediaPickerEmpty, className: "fy-entity-input-empty", entityType, filterType, inputProps, onSelect, open, user, ...sharedProps, ...rest }}/>
           ][i];
         
         })

packages/fakeyou.com/src/hooks/useListContent/useListContent.tsx

@@ -12,7 +12,9 @@ interface Props {
   onInputChange?: (x?: any) => any;
   onSuccess?: (x?: any) => any;
   pagePreset?: number;
+  request?: any;
   requestList?: boolean;
+  resultsKey?: string;
   urlParam: string;
   urlUpdate?: boolean;
 }
@@ -29,7 +31,9 @@ export default function useListContent({
   onInputChange = n,
   onSuccess = n,
   pagePreset = 0,
+  request,
   requestList = false,
+  resultsKey = "results",
   urlParam = "",
   urlUpdate = true,
 }: Props) {
@@ -71,7 +75,7 @@ export default function useListContent({
 
   useEffect(() => {
     const queries = {
-      page_index: page,
+      ...page ? { page_index: page } : {},
       ...addQueries, // eventually we should provide a way to type this ... or not. It works
       ...(sort ? { sort_ascending: true } : {}),
     };
@@ -83,15 +87,13 @@ export default function useListContent({
         if (urlUpdate) { history.replace({ pathname, search }); }
         statusSet(FetchStatus.in_progress);
 
-        fetcher(urlParam, {}, queries).then((res: any) => {
+        fetcher(urlParam, request, queries).then((res: any) => {
           if (debug)
-            console.log(`🪲 useListContent success debug at: ${debug}`, res);
+            console.log(`🪲 useListContent success debug at: ${debug}`, res, resultsKey);
           statusSet(FetchStatus.success);
           onSuccess(res);
-          if (res.results && res.pagination) {
-            pageCountSet(res.pagination.total_page_count);
-            listSet(res.results);
-          }
+          if (res[resultsKey]) { listSet(res[resultsKey]); }
+          if (res.pagination) { pageCountSet(res.pagination.total_page_count); }
         });
       }
     }
@@ -105,6 +107,8 @@ export default function useListContent({
     pathname,
     page,
     sort,
+    request,
+    resultsKey,
     status,
     urlParam,
     urlUpdate

packages/fakeyou.com/src/v2/view/pages/dev_upload/DevMediaInput.tsx

@@ -31,13 +31,14 @@ export default function DevMediaInput({ value }: Props) {
         <SegmentButtons {...{ onChange: ({ target }: { target: any }) => entityTypeSet(target.value), options, value: entityType }}/>
         <TempInput {...{ value: owner, onChange: ({ target }: { target: any }) => ownerSet(target.value), placeholder: "User" }}/>
         <TempSelect {...{ options: EntityFilterOptions(entityType), value: ["",mediaType,weightType][entityType], onChange: changeFilter }}/>
-        <Button {...{ label: "Enqueue", variant: "primary" }}/>
       </header>
        <EntityInput {...{
           aspectRatio: "landscape",
           label: `Choose ${ ["","media file","weight"][entityType] }`,
           onChange,
           owner,
+          search: "Dream",
+          type: "Media",
           ...([{},{ mediaType },{ weightType }][entityType])
         }}/>
         <Button {...{ className: "mt-3", label: "Open modal", onClick: openModal, variant: "primary" }}/>