invalid html, ratings load bug fixes

packages/components/src/api/MakeRequest.ts

@@ -23,9 +23,14 @@ const METHOD_OMITS_BODY: { [key: string]: boolean } = {
   PUT: false,
 };
 
-const MakeRequest = <UrlRouteArgs, Request, Response, UrlParams>(routeSetup: RouteSetup<UrlRouteArgs>) :  (urlRouteArgs: UrlRouteArgs, request: Request, urlParams?: UrlParams) => Promise<Response> => {
-    return async function(urlRouteArgs: UrlRouteArgs, request: Request, urlParams?: any) : Promise<Response> {
-        const endpoint = `${ routeSetup.routingFunction(urlRouteArgs) }${ urlParams ? "?" + new URLSearchParams(urlParams) : "" }`;
+const MakeRequest = <UrlRouteArgs, Request, Response, UrlParams>(routeSetup: RouteSetup<UrlRouteArgs>) :  (urlRouteArgs: UrlRouteArgs, request: Request, queries?: UrlParams) => Promise<Response> => {
+    return async function(urlRouteArgs: UrlRouteArgs, request: Request, queries?: any) : Promise<Response> {
+        const prepedQueries = queries ? Object.keys(queries).reduce((obj,key) => {
+            let current = queries[key]
+            return { [key]: Array.isArray(current) ? current.join("&tokens=") : current };
+        },{}) : null;
+        console.log("❓",prepedQueries);
+        const endpoint = `${ routeSetup.routingFunction(urlRouteArgs) }${ prepedQueries ? "?" + new URLSearchParams(prepedQueries) : "" }`;
         const method = routeSetup.method;
         const methodOmitsBody = METHOD_OMITS_BODY[method] || false;
 

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

@@ -190,14 +190,14 @@ export default function AudioCard({
                   entityToken: data.weight_token,
                   entityType: "model_weight",
                   likeCount: data.likes,
-                  onToggle: ratings.toggle
+                  onToggle: ratings?.toggle
                 }} />
               </div>
               <BookmarkButton
                 {...{
                   entityToken: data.weight_token,
                   entityType: "model_weight",
-                  onToggle: bookmarks.toggle,
+                  onToggle: bookmarks?.toggle,
                   initialToggled: bookmarks.list[data.weight_token]
                 }}
               />

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

@@ -1,6 +1,6 @@
 import { Gravatar } from "@storyteller/components/src/elements/Gravatar";
 import React from "react";
-import { Link } from "react-router-dom";
+import { useHistory } from "react-router-dom";
 
 interface CreatorNameProps {
   displayName: string;
@@ -23,6 +23,7 @@ export default function CreatorName({
   username,
   className,
 }: CreatorNameProps) {
+  const history = useHistory();
   return (
     <div
       className={`d-flex gap-2 align-items-center ${className}`}
@@ -34,12 +35,12 @@ export default function CreatorName({
         avatarIndex={avatarIndex}
         backgroundIndex={backgroundIndex}
       />
-      <Link
-        to={`/profile/${username}`}
-        className="fw-medium fs-7 text-white opacity-75 text-truncate"
-      >
+      <div {...{
+        className: "fw-medium fs-7 text-white opacity-75 text-truncate",
+        onClick: () => history.push(`/profile/${username}`) // programatically link to avoid "<a> cannot appear as a descendant of <a>" errors
+      }} >
         {displayName}
-      </Link>
+      </div>
     </div>
   );
 }

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

@@ -1,5 +1,5 @@
 import React from "react";
-import { Link } from "react-router-dom";
+import { Link, useHistory } from "react-router-dom";
 import Card from "../Card";
 import useTimeAgo from "hooks/useTimeAgo";
 import Badge from "components/common/Badge";
@@ -28,6 +28,7 @@ export default function ImageCard({
   ratings,
   type
 }: ImageCardProps) {
+  const history = useHistory();
   const linkUrl =
     type === "media"
       ? `/media/${data.token}`
@@ -145,14 +146,15 @@ export default function ImageCard({
                     overlay={true}
                   />
                 </div>
-                <Button
-                  icon={faArrowRight}
-                  iconFlip={true}
-                  variant="link"
-                  label="Use"
-                  to={linkUrl}
-                  className="fs-7"
-                />
+                <Button {...{
+                  className: "fs-7",
+                  icon: faArrowRight,
+                  label: "Use",
+                  onClick: () => {
+                    history.push(linkUrl); // programatically link to avoid "<a> cannot appear as a descendant of <a>" errors
+                  },
+                  variant: "link",
+                }} />
               </div>
 
               <div className="card-img-overlay-text">
@@ -192,14 +194,14 @@ export default function ImageCard({
                       entityToken: data.weight_token,
                       entityType: "model_weight",
                       likeCount: data.likes,
-                      onToggle: ratings.toggle
+                      onToggle: ratings?.toggle
                     }} />
                   </div>
                   <BookmarkButton
                     {...{
                       entityToken: data.weight_token,
                       entityType: "model_weight",
-                      onToggle: bookmarks.toggle,
+                      onToggle: bookmarks?.toggle,
                       initialToggled: bookmarks.list[data.weight_token]
                     }}
                   />

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

@@ -21,9 +21,9 @@ export default function SkeletonCard(props: SkeletonCardProps) {
           <h6 className="fw-semibold text-white mb-1 mt-3">
             <Skeleton type="medium" />
           </h6>
-          <p className="fs-7 opacity-75">
+          <div className="fs-7 opacity-75">
             <Skeleton type="short" />
-          </p>
+          </div>
         </div>
 
         <div>

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

@@ -86,7 +86,7 @@ export default function VideoCard({ data, origin = "", ratings, showCreator, typ
                         entityToken: data.token,
                         entityType: "media_file",
                         likeCount: data.likes,
-                        onToggle: ratings.toggle
+                        onToggle: ratings?.toggle
                       }} />
                     </div>
                   </div>
@@ -134,7 +134,7 @@ export default function VideoCard({ data, origin = "", ratings, showCreator, typ
                       entityToken: data.weight_token,
                       entityType: "model_weight",
                       likeCount: data.likes,
-                      onToggle: ratings.toggle,
+                      onToggle: ratings?.toggle,
                       overlay: true
                     }} />
                   </div>