Add emote disks onto part card

web/src/components/Parts/Parts.js

@@ -1,36 +1,59 @@
-import { useMutation, useFlash } from '@redwoodjs/web'
+import { useMemo } from 'react'
 import { Link, routes } from '@redwoodjs/router'
 
 import ImageUploader from 'src/components/ImageUploader'
 const PartsList = ({ parts }) => {
+  const countEmotes = (reactions) => {
+    // would be good to do this sever side
+    // counting unique emojis, and limiting to the 5 largest
+    const emoteCounts = {}
+    reactions.forEach(({emote}) => {
+      emoteCounts[emote] = emoteCounts[emote] ? emoteCounts[emote] + 1 : 1
+    })
+    return Object.entries(emoteCounts).map(([emoji, count]) => ({emoji, count})).sort((a,b) => a.count-b.count).slice(-5)
+  }
   return (
     <section className="max-w-6xl mx-auto mt-20">
-      <ul className="grid gap-8 items-center mx-4" style={{gridTemplateColumns: 'repeat(auto-fit, minmax(16rem, 1fr))'}}>
+      <ul className="grid gap-x-8 gap-y-12 items-center mx-4 relative" style={{gridTemplateColumns: 'repeat(auto-fit, minmax(16rem, 1fr))'}}>
-        {parts.map(({title, mainImage, user}) => (
+        {parts.map(({title, mainImage, user, Reaction}) => (
-          <li className="rounded-lg overflow-hidden shadow-md hover:shadow-lg mx-px transform hover:-translate-y-px transition-all duration-150" key={`${user?.userName}--${title}`}><button className="w-full">
+          <li className="rounded-lg shadow-md hover:shadow-lg mx-px transform hover:-translate-y-px transition-all duration-150" key={`${user?.userName}--${title}`}>
-            <div className="flex items-center p-2 bg-gray-200 border-gray-300 rounded-t-lg border-t border-l border-r">
+            <Link
-              <div className="w-8 h-8 overflow-hidden rounded-full border border-indigo-300 shadow max-w-xs">
+              to={routes.part2({userName: user?.userName, partTitle: title})}
+            >
+              <div className="flex items-center p-2 bg-gray-200 border-gray-300 rounded-t-lg border-t border-l border-r">
+                <div className="w-8 h-8 overflow-hidden rounded-full border border-indigo-300 shadow max-w-xs">
+                  <ImageUploader
+                    className=""
+                    onImageUpload={() => {}}
+                    aspectRatio={1}
+                    imageUrl={user?.image}
+                    width={50}
+                  />
+                </div>
+                <span className="font-ropa-sans ml-3 text-lg text-indigo-900">{title}</span>
+              </div>
+              <div className="w-full overflow-hidden relative rounded-b-lg">
                 <ImageUploader
                   className=""
                   onImageUpload={() => {}}
-                  aspectRatio={1}
+                  aspectRatio={1.4}
-                  imageUrl={user?.image}
+                  imageUrl={mainImage}
-                  width={50}
+                  width={700}
                 />
+                <div className="absolute inset-0" style={{background: 'linear-gradient(19.04deg, rgba(62, 44, 118, 0.46) 10.52%, rgba(60, 54, 107, 0) 40.02%)'}} />
               </div>
-              <span className="font-ropa-sans ml-3 text-lg text-indigo-900">{title}</span>
+              <div className="absolute inset-x-0 bottom-0 -mb-4 mr-4 flex justify-end">{countEmotes(Reaction).map(({emoji, count}) => (
-            </div>
+                <div key={emoji} className="h-8 w-8 overflow-hidden ml-2 p-1 rounded-full bg-opacity-75 bg-gray-200 border border-gray-300 shadow-md flex items-center justify-between">
-            <div className="w-full overflow-hidden relative">
+                  <div className="-ml-px text-sm w-1">
-              <ImageUploader
+                    {emoji}
-                className=""
+                  </div>
-                onImageUpload={() => {}}
+                  <div className="text-sm pl-1 font-ropa-sans text-gray-800">
-                aspectRatio={1.4}
+                    {count}
-                imageUrl={mainImage}
+                  </div>
-                width={700}
+                </div>
-              />
+              ))}</div>
-              <div className="absolute inset-0" style={{background: 'linear-gradient(19.04deg, rgba(62, 44, 118, 0.46) 10.52%, rgba(60, 54, 107, 0) 40.02%)'}} />
+            </Link>
-            </div>
+          </li>
-            </button></li>
         ))}
       </ul>
     </section>

web/src/components/PartsCell/PartsCell.js

@@ -14,6 +14,9 @@ export const QUERY = gql`
         image
         userName
       }
+      Reaction {
+        emote
+      }
     }
   }
 `