Merge branch 'feature/mvp' into bflat-fy-feature-mvp-search

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

@@ -12,32 +12,30 @@ interface BookmarkButtonProps {
   busy?: boolean;
   entityToken?: string;
   entityType?: string;
-  initialToggled?: boolean;
-  onToggle: (entityToken: string, entityType: string) => Promise<boolean>;
   favoriteCount?: number;
-  overlay?: boolean;
+  isToggled: boolean;
   large?: boolean;
+  overlay?: boolean;
+  toggle: (entityToken: string, entityType: string) => any
 }
 
 export default function BookmarkButton({
   busy,
   entityToken = "",
   entityType = "",
-  initialToggled = false,
-  onToggle,
   favoriteCount,
-  overlay,
+  isToggled,
   large,
+  overlay,
+  toggle,
 }: BookmarkButtonProps) {
-  const isToggled = initialToggled; // toggled value managed externally via usebookmarks, this may change
-  // const [isToggled, setIsToggled] = useState(initialToggled);
   const [isLoading, setIsLoading] = useState(false);
 
   const handleClick = async (event: React.MouseEvent) => {
     event.preventDefault();
     event.stopPropagation();
     // setIsLoading(true);
-    onToggle(entityToken, entityType).then((isToggled: boolean) => {
+    toggle(entityToken, entityType).then((isToggled: boolean) => {
       // setIsToggled(isToggled);
       setIsLoading(false);
     });

packages/fakeyou.com/src/components/common/Card/AudioCard/AudioCard.tsx

@@ -124,17 +124,17 @@ export default function AudioCard({
               )}
 
               <div>
-                <LikeButton
-                  {...{
-                    busy: ratings.busyList[data.token],
-                    entityToken: data.token,
-                    entityType: "media_file",
-                    likeCount: data.likes,
-                    initialToggled:
-                      ratings?.list[data.token]?.rating_value === "positive",
-                    onToggle: ratings.toggle,
-                  }}
+
                 />
+
+                <LikeButton {...{
+                  likeCount: data.likes,
+                  ...ratings.makeProps({
+                    entityToken: data.token,
+                    entityType: "media_file"
+                  })
+                }} />
+
               </div>
             </div>
           </>
@@ -194,26 +194,20 @@ export default function AudioCard({
               )}
 
               <div>
-                <LikeButton
-                  {...{
-                    busy: ratings.busyList[data.weight_token],
+                <LikeButton {...{
+                  likeCount: ratings?.list[data.weight_token]?.positive_rating_count || 0,
+                  ...ratings.makeProps({
                     entityToken: data.weight_token,
-                    entityType: "model_weight",
-                    likeCount:
-                      ratings?.list[data.weight_token]?.positive_rating_count ||
-                      0,
-                    onToggle: ratings?.toggle,
-                  }}
-                />
+                    entityType: "model_weight"
+                  })
+                }} />
               </div>
               <BookmarkButton
                 {...{
-                  busy: bookmarks.busyList[data.weight_token],
-                  entityToken: data.weight_token,
-                  entityType: "model_weight",
-                  onToggle: bookmarks?.toggle,
-                  initialToggled:
-                    bookmarks?.list[data.weight_token]?.maybe_bookmark_token,
+                  ...bookmarks.makeProps({
+                    entityToken: data.weight_token,
+                    entityType: "model_weight"
+                  })
                 }}
               />
             </div>

packages/fakeyou.com/src/components/common/Card/ImageCard/ImageCard.tsx

@@ -121,10 +121,10 @@ export default function ImageCard({
 
                   <div>
                     <LikeButton {...{
-                      entityToken: data.token,
-                      entityType: "media_file",
-                      likeCount: data.likes,
-                      onToggle: ratings.toggle
+                      ...ratings.makeProps({
+                        entityToken: data.token,
+                        entityType: "media_file",
+                      })
                     }} />
                   </div>
                 </div>
@@ -191,21 +191,18 @@ export default function ImageCard({
 
                   <div>
                     <LikeButton {...{
-                      busy: ratings.busyList[data.weight_token],
-                      entityToken: data.weight_token,
-                      entityType: "model_weight",
-                      likeCount: ratings?.list[data.weight_token]?.positive_rating_count || 0,
-                      initialToggled: (ratings?.list[data.weight_token]?.rating_value || "") === "positive",
-                      onToggle: ratings?.toggle
+                      ...ratings.makeProps({
+                        entityToken: data.weight_token,
+                        entityType: "model_weight"
+                      })
                     }} />
                   </div>
                   <BookmarkButton
                     {...{
-                      busy: bookmarks.busyList[data.weight_token],
-                      entityToken: data.weight_token,
-                      entityType: "model_weight",
-                      onToggle: bookmarks?.toggle,
-                      initialToggled: bookmarks?.list[data.weight_token]?.maybe_bookmark_token
+                      ...bookmarks.makeProps({
+                        entityToken: data.weight_token,
+                        entityType: "model_weight",
+                      })
                     }}
                   />
                 </div>

packages/fakeyou.com/src/components/common/Card/VideoCard/VideoCard.tsx

@@ -83,11 +83,10 @@ export default function VideoCard({ data, origin = "", ratings, showCreator, typ
 
                     <div>
                       <LikeButton {...{
-                        busy: ratings.busyList[data.token],
-                        entityToken: data.token,
-                        entityType: "media_file",
-                        likeCount: data.likes,
-                        onToggle: ratings?.toggle
+                        ...ratings.makeProps({
+                          entityToken: data.token,
+                          entityType: "media_file",
+                        })
                       }} />
                     </div>
                   </div>
@@ -132,12 +131,11 @@ export default function VideoCard({ data, origin = "", ratings, showCreator, typ
                   <p className="fs-7 opacity-75">{timeAgo}</p>
                   <div className="mt-2" onClick={handleInnerClick}>
                     <LikeButton {...{
-                      busy: ratings.busyList[data.weight_token],
-                      entityToken: data.weight_token,
-                      entityType: "model_weight",
-                      likeCount: data.likes,
-                      onToggle: ratings?.toggle,
-                      overlay: true
+                      overlay: true,
+                      ...ratings.makeProps({
+                        entityToken: data.weight_token,
+                        entityType: "model_weight",
+                      })
                     }} />
                   </div>
                 </div>

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

@@ -12,25 +12,23 @@ interface LikeButtonProps {
   busy?: boolean;
   entityToken?: string;
   entityType?: string;
-  initialToggled?: boolean;
-  onToggle: (entityToken: string, entityType: string) => Promise<boolean>;
   likeCount: number;
+  isToggled: boolean;
   overlay?: boolean;
   large?: boolean;
+  toggle: (entityToken: string, entityType: string) => any
 }
 
 export default function LikeButton({
   busy,
   entityToken = "",
   entityType = "",
-  initialToggled = false,
-  onToggle,
   likeCount = 0, // useShortenNumber freaks out if likeCount = NaN, give it a default value until it loads
+  isToggled,
   overlay,
   large,
+  toggle
 }: LikeButtonProps) {
-  const isToggled = initialToggled; // toggled value managed externally via useRatings, this may change
-  // const [isToggled, setIsToggled] = useState(initialToggled);
   const [isLoading, setIsLoading] = useState(false);
 
   // console.log("😎",busy);
@@ -39,7 +37,7 @@ export default function LikeButton({
     event.preventDefault();
     event.stopPropagation();
     // setIsLoading(true);
-    onToggle(entityToken, entityType).then((isToggled: boolean) => {
+    toggle(entityToken, entityType).then((isToggled: boolean) => {
       // setIsToggled(isToggled);
       setIsLoading(false);
     });

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

@@ -7,7 +7,8 @@ interface Props {
   modLibrary?: any,
   onPass?: any,
   onFail?: any,
-  resultsKey: string
+  resultsKey: string,
+  toggleCheck: (x: any) => any
 }
 
 interface Library {
@@ -27,8 +28,10 @@ export default function useBatchContent({
   modLibrary = (current: any, res: any, entity_token: string ) => current,
   onPass,
   onFail,
-  resultsKey }: Props) {
-  const [list, listSet] = useState<Library>({});
+  resultsKey,
+  toggleCheck
+}: Props) {
+  const [library, librarySet] = useState<Library>({});
   const [busyList, busyListSet] = useState<Library>({});
   const [status, statusSet] = useState(FetchStatus.ready);
 
@@ -38,7 +41,7 @@ export default function useBatchContent({
     busyListSet(tokens.reduce((obj = {},token = "") => ({ ...obj, [token]: true }),{})); // add current batch to busy list
     fetcher("",{},{ tokens }).then((batchRes: any) => {
 
-    console.log("🪙", batchRes.success && !!batchRes[resultsKey]);
+    console.log("🪙", res);
       if (batchRes.success && !!batchRes[resultsKey]) {
 
         let newBatch = batchRes[resultsKey].reduce((obj = {}, { entity_token = "", ...current }) => ({
@@ -48,7 +51,7 @@ export default function useBatchContent({
 
       console.log("😡", newBatch);
         busyListSet({}); // this should be a for each key in tokens delete from busyList, but this is fine for now
-        listSet((list: any) => expand ? { ...list, ...newBatch } : newBatch);
+        librarySet((library: any) => expand ? { ...library, ...newBatch } : newBatch);
       }
     })
   };
@@ -63,43 +66,56 @@ export default function useBatchContent({
   });
 
   const toggle = (entity_token: string, entity_type: string) => {
-    let inLibrary = list[entity_token];
+    let inLibrary = library[entity_token];
     statusSet(FetchStatus.in_progress);
     busyAdd(entity_token);
 
     console.log(`⏳ toggling entity ${ entity_token }, in library?: ${ !!inLibrary }`);
 
     if (inLibrary && checker(inLibrary)) {
-      return onPass.fetch(entity_token, entity_type, list)
+      return onPass.fetch(entity_token, entity_type, library)
       .then((res: any) => {
         console.log("⭕️",res);
         busyRemove(entity_token);
-        listSet(onPass.modLibrary(res, entity_token, entity_type, list));
+        librarySet(onPass.modLibrary(res, entity_token, entity_type, library));
         statusSet(FetchStatus.ready);
         return false;
       });
     } else {
-      return onFail.fetch(entity_token, entity_type, list)
+      return onFail.fetch(entity_token, entity_type, library)
       .then((res: any) => {
         console.log("❌",res);
         busyRemove(entity_token);
-        listSet(onFail.modLibrary(res, entity_token, entity_type, list));
+        librarySet(onFail.modLibrary(res, entity_token, entity_type, library));
         statusSet(FetchStatus.ready);
         return true;
       });
     }
   };
 
+  const toggled = ( entity_token = "" ) => toggleCheck(library[entity_token]);
+
+  const makeProps = ({ entityToken, entityType }: { entityToken: string, entityType: string }) => ({
+    busy: busyList[entityToken],
+    entityToken,
+    entityType,
+    isToggled: toggled(entityToken),
+    toggle
+  });
+
+
   return {
     busyAdd,
     busyRemove,
     busyList,
     busyListSet,
     gather,
-    list,
-    listSet,
+    library,
+    librarySet,
+    makeProps,
     status,
     statusSet,
-    toggle
+    toggle,
+    toggled
   };
 };

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

@@ -22,7 +22,7 @@ export default function useBookmarks() {
     }
   };
 
-  const { busyList, gather, list, status, toggle } = useBatchContent({
+  return useBatchContent({
     checker: ({ maybe_bookmark_token }: any) => !!maybe_bookmark_token,
     fetcher: GetBookmarks,
     modLibrary: (current: any, res: any, entity_token: string) => {
@@ -49,14 +49,7 @@ export default function useBookmarks() {
       }),
       modLibrary: toggleList(true)
     },
-    resultsKey: "bookmarks"
+    resultsKey: "bookmarks",
+    toggleCheck: (entity: any) => !!entity?.maybe_bookmark_token
   });
-
-  return {
-    busyList,
-    gather,
-    list,
-    status,
-    toggle
-  };
 };

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

@@ -1,5 +1,3 @@
-import { useState } from 'react';
-import { FetchStatus } from "@storyteller/components/src/api/_common/SharedFetchTypes";
 import { GetRatings } from "@storyteller/components/src/api/user_ratings/GetRatings";
 import { SetRating } from "@storyteller/components/src/api/user_ratings/SetRating";
 import { useBatchContent } from "hooks";
@@ -9,10 +7,6 @@ import { useBatchContent } from "hooks";
 // }
 
 export default function useRatings() {
-  // const [library, librarySet] = useState({});
-  // const [baseList, baseListSet] = useState<any[]>([]);
-  const [toggleStatus, toggleStatusSet] = useState(FetchStatus.ready);
-
   const fetch = (entity_token: string, entity_type: string, lib: any) => {
     // console.log("🔔",lib[entity_token].rating_value);
     return SetRating("",{
@@ -22,14 +16,20 @@ export default function useRatings() {
     });
   };
 
-  const { busyList, gather, list, status, toggle } = useBatchContent({
+  const ratings = useBatchContent({
     fetcher: GetRatings,
     checker: () => true,
+    modLibrary: (current: any, res: any, entity_token: string) => {
+      let { positive_rating_count } = res.results.find((item: any, i: number) => 
+        item.weight_token === entity_token
+      ).stats;
+
+      return { ...current, positive_rating_count };
+    },
     onPass: {
       fetch,
       modLibrary: (res: any, entity_token: string, entity_type: string, lib: any) => {
-        
-        let jam = {
+        return {
           ...lib,
           [entity_token]: {
             entity_type,
@@ -37,16 +37,17 @@ export default function useRatings() {
             positive_rating_count: res.new_positive_rating_count_for_entity
           }
         };
-
-        console.log("💯",res, jam);
-
-          return jam;
       }
     },
-    resultsKey: "ratings"
+    resultsKey: "ratings",
+    toggleCheck: (entity: any) => (entity?.rating_value || "") === "positive"
   });
 
-  // console.log("🔮",list);
-
-  return { busyList, gather, list, status, toggleStatus, toggleStatusSet, toggle };
+  return {
+    ...ratings,
+    makeProps: ({ entityToken, entityType }: { entityToken: string, entityType: string }) => ({
+      ...ratings.makeProps({ entityToken, entityType }),
+      likeCount: ratings.library[entityToken]?.positive_rating_count || 0,
+    })
+  }
 };

packages/fakeyou.com/src/v2/view/pages/media/MediaPage.tsx

@@ -35,7 +35,7 @@ import { Input } from "components/common";
 import LikeButton from "components/common/LikeButton";
 import Badge from "components/common/Badge";
 import useMediaFileTypeInfo from "hooks/useMediaFileTypeInfo";
-import { useBookmarks } from "hooks";
+import { useRatings } from "hooks";
 import SdCoverImagePanel from "../weight/cover_image_panels/SdCoverImagePanel";
 
 interface MediaPageProps {
@@ -69,7 +69,8 @@ export default function MediaPage({ sessionWrapper }: MediaPageProps) {
     getMediaFile(token);
   }, [token, getMediaFile]);
 
-  const bookmarks = useBookmarks();
+  // const bookmarks = useBookmarks();
+  const ratings = useRatings();
 
   function renderMediaComponent(mediaFile: MediaFile) {
     switch (mediaFile.media_type) {
@@ -343,11 +344,11 @@ export default function MediaPage({ sessionWrapper }: MediaPageProps) {
                   <div className="d-flex align-items-center gap-2">
                     <LikeButton
                       {...{
-                        entityToken: token,
-                        entityType: "media_file",
-                        likeCount: 1200,
-                        onToggle: bookmarks.toggle,
                         large: true,
+                        ...ratings.makeProps({
+                          entityToken: token,
+                          entityType: "media_file"
+                        }),
                       }}
                     />
                     {/* <BookmarkButton

packages/fakeyou.com/src/v2/view/pages/weight/WeightPage.tsx

@@ -380,22 +380,19 @@ export default function WeightPage({
                   <div className="d-flex align-items-center gap-2">
                     <LikeButton
                       {...{
-                        busy: ratings.busyList[weight_token],
-                        entityToken: weight_token,
-                        entityType: "model_weight",
-                        likeCount: ratings?.list[weight_token]?.positive_rating_count || 0,
-                        initialToggled: (ratings?.list[weight_token]?.rating_value || "") === "positive",
-                        onToggle: ratings?.toggle,
+                        ...ratings.makeProps({
+                          entityToken: weight_token,
+                          entityType: "model_weight"
+                        }),
                         large: true,
                       }}
                     />
                     <BookmarkButton
                       {...{
-                        busy: bookmarks.busyList[weight_token],
-                        entityToken: weight_token,
-                        entityType: "model_weight",
-                        onToggle: bookmarks?.toggle,
-                        initialToggled: bookmarks?.list[weight_token]?.maybe_bookmark_token,
+                        ...bookmarks.makeProps({
+                          entityToken: weight_token,
+                          entityType: "model_weight"
+                        }),
                         large: true
                       }}
                     />