implementing reactions cell and component

web/src/components/PartReactions/PartReactions.js

@@ -0,0 +1,69 @@
+import { useState } from 'react'
+import Tab from '@material-ui/core/Tab'
+import Tabs from '@material-ui/core/Tabs'
+import { Link, routes } from '@redwoodjs/router'
+import { countEmotes } from 'src/helpers/emote'
+import ImageUploader from 'src/components/ImageUploader'
+
+const PartReactions = ({ reactions }) => {
+  const emotes = countEmotes(reactions)
+  const [tab, setTab] = useState(0)
+  const onTabChange = (_, newValue) => {
+    setTab(newValue)
+  }
+
+  return (
+    <>
+      <div className="bg-gray-100 p-4 min-h-md rounded-lg shadow-lg">
+        <Tabs
+          value={tab}
+          onChange={onTabChange}
+          variant="scrollable"
+          scrollButtons="off"
+          textColor="primary"
+          indicatorColor="primary"
+        >
+          {emotes.map((emote, i) => (
+            <Tab
+              label={`${emote.emoji} ${emote.count}`}
+              key={`${emote.emoji}-${i}}`}
+              style={{ minWidth: 100 }}
+            />
+          ))}
+        </Tabs>
+        <ul>
+          {reactions
+            .filter((reaction) => reaction.emote === emotes[tab].emoji)
+            .map((reactionPart, i) => (
+              <li
+                className="flex flex-row p-2 items-center"
+                key={`${reactionPart.emote}-${i}}`}
+              >
+                <div className="w-8 h-8 overflow-hidden rounded-full border border-indigo-300 shadow flex-shrink-0">
+                  <ImageUploader
+                    className=""
+                    aspectRatio={1}
+                    imageUrl={reactionPart.user?.image}
+                    width={50}
+                  />
+                </div>
+                <div className="ml-4 font-roboto">
+                  <div className="text-gray-800 font-bold text-md mb-1">
+                    <Link
+                      to={routes.user({
+                        userName: reactionPart.user?.userName,
+                      })}
+                    >
+                      {reactionPart.user?.userName}
+                    </Link>
+                  </div>
+                </div>
+              </li>
+            ))}
+        </ul>
+      </div>
+    </>
+  )
+}
+
+export default PartReactions

web/src/components/PartReactionsCell/PartReactionsCell.js

@@ -1,12 +1,16 @@
+import PartReactions from 'src/components/PartReactions'
+
 export const QUERY = gql`
-  query PartReactionsQuery {
-    partReactions {
+  query PartReactionsQuery($partId: String!) {
+    partReactionsByPartId(partId: $partId) {
       id
       emote
       user {
         id
-        name
+        userName
+        image
       }
+      updatedAt
     }
   }
 `
@@ -17,6 +21,6 @@ export const Empty = () => <div>Empty</div>
 
 export const Failure = ({ error }) => <div>Error: {error.message}</div>
 
-export const Success = ({ partReactions }) => {
-  return JSON.stringify(partReactions)
+export const Success = ({ partReactionsByPartId }) => {
+  return <PartReactions reactions={partReactionsByPartId} /> //JSON.stringify(partReactions)
 }

web/src/components/ReactionList/ReactionList.js

@@ -1,72 +0,0 @@
-import { useState } from 'react'
-import Dialog from '@material-ui/core/Dialog'
-import Tab from '@material-ui/core/Tab'
-import Tabs from '@material-ui/core/Tabs'
-
-export const QUERY = gql`
-  query FIND_PART_BY_USERNAME_TITLE(
-    $userName: String!
-    $partTitle: String
-    $currentUserId: String
-  ) {
-    userPart: userName(userName: $userName) {
-      id
-      name
-      userName
-      bio
-      image
-      Part(partTitle: $partTitle) {
-        id
-        title
-        description
-        code
-        mainImage
-        createdAt
-        updatedAt
-        userId
-        Reaction {
-          emote
-          user {
-            userName
-            image
-          }
-        }
-        userReactions: Reaction(userId: $currentUserId) {
-          emote
-        }
-        Comment {
-          id
-          text
-          user {
-            userName
-            image
-          }
-        }
-      }
-    }
-  }
-`
-
-const emojiMenu = ['all', '❤️', '👍', '😄', '🙌']
-
-const ReactionList = ({}) => {
-  return (
-    <Dialog open={true}>
-      <Tabs
-        value={1}
-        onChange={() => {}}
-        variant="scrollable"
-        scrollButtons="off"
-        textColor="primary"
-        indicatorColor="primary"
-      >
-        {emojiMenu.map((emoji, i) => (
-          <Tab label={emoji} key={`${emoji}-${i}}`} style={{ minWidth: 100 }} />
-        ))}
-      </Tabs>
-      <section>List</section>
-    </Dialog>
-  )
-}
-
-export default ReactionList