From db06a3852a956c54a6647f2953da5e401d3de89b Mon Sep 17 00:00:00 2001
From: Kurt Hutten <kurt@kurthutten.com>
Date: Sun, 8 Nov 2020 13:15:06 +1100
Subject: [PATCH] Add emote disks onto part card

---
 web/src/components/Parts/Parts.js         | 67 +++++++++++++++--------
 web/src/components/PartsCell/PartsCell.js |  3 +
 2 files changed, 48 insertions(+), 22 deletions(-)

diff --git a/web/src/components/Parts/Parts.js b/web/src/components/Parts/Parts.js
index 1b8af53..71719b6 100644
--- a/web/src/components/Parts/Parts.js
+++ b/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))'}}>
-        {parts.map(({title, mainImage, user}) => (
-          <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">
-            <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">
+      <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, Reaction}) => (
+          <li className="rounded-lg shadow-md hover:shadow-lg mx-px transform hover:-translate-y-px transition-all duration-150" key={`${user?.userName}--${title}`}>
+            <Link
+              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}
-                  imageUrl={user?.image}
-                  width={50}
+                  aspectRatio={1.4}
+                  imageUrl={mainImage}
+                  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>
-            <div className="w-full overflow-hidden relative">
-              <ImageUploader
-                className=""
-                onImageUpload={() => {}}
-                aspectRatio={1.4}
-                imageUrl={mainImage}
-                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>
-            </button></li>
+              <div className="absolute inset-x-0 bottom-0 -mb-4 mr-4 flex justify-end">{countEmotes(Reaction).map(({emoji, count}) => (
+                <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="-ml-px text-sm w-1">
+                    {emoji}
+                  </div>
+                  <div className="text-sm pl-1 font-ropa-sans text-gray-800">
+                    {count}
+                  </div>
+                </div>
+              ))}</div>
+            </Link>
+          </li>
         ))}
       </ul>
     </section>
diff --git a/web/src/components/PartsCell/PartsCell.js b/web/src/components/PartsCell/PartsCell.js
index dc2cd9e..1490590 100644
--- a/web/src/components/PartsCell/PartsCell.js
+++ b/web/src/components/PartsCell/PartsCell.js
@@ -14,6 +14,9 @@ export const QUERY = gql`
         image
         userName
       }
+      Reaction {
+        emote
+      }
     }
   }
 `