Merge remote-tracking branch 'upstream/main' into main

web/src/components/EmojiReaction/EmojiReaction.js

@@ -0,0 +1,76 @@
+import { useState } from 'react'
+import Fab from '@material-ui/core/Fab'
+import IconButton from '@material-ui/core/IconButton'
+import Popover from '@material-ui/core/Popover'
+import Svg from 'src/components/Svg'
+
+const emojiMenu = ['🏆', '❤️', '👍', '😊', '😄', '🚀', '👏', '🙌']
+
+const EmojiReaction = ({ emotes, callback = () => {} }) => {
+  const [isOpen, setIsOpen] = useState(false)
+  const [anchorEl, setAnchorEl] = useState(null)
+  const [popoverId, setPopoverId] = useState(undefined)
+
+  const openPopover = (target) => {
+    setAnchorEl(target)
+    setPopoverId('simple-popover')
+    setIsOpen(true)
+  }
+
+  const closePopover = () => {
+    setAnchorEl(null)
+    setPopoverId(undefined)
+    setIsOpen(false)
+  }
+
+  const togglePopover = ({ currentTarget }) => {
+    if (isOpen) {
+      return closePopover()
+    }
+
+    openPopover(currentTarget)
+  }
+
+  const handleEmojiClick = (emoji) => {
+    callback(emoji)
+    closePopover()
+  }
+
+  return [
+    <div className="flex justify-between">
+        <Fab size="medium" variant="round" aria-describedby={popoverId} onClick={togglePopover}>
+          <div className="bg-gray-200 border-2 m-px border-gray-300 text-gray-500 absolute inset-0 rounded-full flex justify-center items-center">
+            <Svg name="dots-vertical" />
+          </div>
+        </Fab>
+
+      <div>
+        {emotes.map((emote, i) => (
+          <IconButton key={`${emote.emoji}--${i}`} onClick={() => handleEmojiClick(emote.emoji)}>
+            {emote.emoji} <span>{emote.count}</span>
+          </IconButton>
+        ))}
+      </div>
+    </div>,
+    <Popover
+      id={popoverId}
+      open={isOpen}
+      anchorEl={anchorEl}
+      onClose={closePopover}
+      anchorOrigin={{
+        vertical: 'bottom',
+        horizontal: 'right',
+      }}
+      transformOrigin={{
+        vertical: 'top',
+        horizontal: 'center',
+      }}
+    >
+      {emojiMenu.map((emoji, i) => (
+        <IconButton key={`${emoji}-${i}}`} onClick={() => handleEmojiClick(emoji)}>{emoji}</IconButton>
+      ))}
+    </Popover>,
+  ]
+}
+
+export default EmojiReaction

web/src/components/EmojiReaction/EmojiReaction.stories.js

@@ -0,0 +1,7 @@
+import EmojiReaction from './EmojiReaction'
+
+export const generated = () => {
+  return <EmojiReaction />
+}
+
+export default { title: 'Components/EmojiReaction' }

web/src/components/EmojiReaction/EmojiReaction.test.js

@@ -0,0 +1,11 @@
+import { render } from '@redwoodjs/testing'
+
+import EmojiReaction from './EmojiReaction'
+
+describe('EmojiReaction', () => {
+  it('renders successfully', () => {
+    expect(() => {
+      render(<EmojiReaction />)
+    }).not.toThrow()
+  })
+})

web/src/components/PartForm/ImageUploader.js

@@ -9,7 +9,7 @@ import 'react-image-crop/dist/ReactCrop.css'
 import Svg from 'src/components/Svg/Svg.js'
 
 const CLOUDINARY_UPLOAD_PRESET = "CadHub_project_images";
-const CLOUDINARY_UPLOAD_URL = "https://api.cloudinary.com/v1_1/irevdev/upload/?custom_coordinates=10,10,20,20";
+const CLOUDINARY_UPLOAD_URL = "https://api.cloudinary.com/v1_1/irevdev/upload";
 
 export default function ImageUploader({ onImageUpload, imageUrl }) {
   const [isModalOpen, setIsModalOpen] = useState(false)

web/src/components/Parts/Parts.js

@@ -53,7 +53,7 @@ const PartsList = ({ parts }) => {
   }
 
   return (
-    <div className="max-w-6xl mx-auto grid gap-8 grid-cols-4">
+    <div className="max-w-xs sm:max-w-sm md:max-w-2xl lg:max-w-5xl xl:max-w-6xl mx-auto grid gap-8 grid-cols-1 md:grid-cols-2 lg:grid-cols-3 xl:grid- cols-4">
       {parts.map((part) => {
         return (
           <Link

web/src/components/Svg/Svg.js

@@ -9,6 +9,9 @@ const Svg = ({name, className: className2, strokeWidth = 2}) => {
     </svg>,
     "pencil": <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
       <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={strokeWidth} d="M15.232 5.232l3.536 3.536m-2.036-5.036a2.5 2.5 0 113.536 3.536L6.5 21.036H3v-3.572L16.732 3.732z" />
+    </svg>,
+    "dots-vertical": <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+      <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={strokeWidth} d="M12 5v.01M12 12v.01M12 19v.01M12 6a1 1 0 110-2 1 1 0 010 2zm0 7a1 1 0 110-2 1 1 0 010 2zm0 7a1 1 0 110-2 1 1 0 010 2z" />
     </svg>
   }
 

web/src/components/UserPart/UserPart.js

@@ -0,0 +1,16 @@
+function UserPart({ userName, partName }) {
+  return (
+    <h3 className="text-xl font-roboto">
+      <div className="w-1 inline-block text-indigo-800 bg-indigo-800 mr-2">.</div>
+      <span className="text-gray-500">
+        {userName}
+      </span>
+      <div className="w-1 inline-block bg-gray-400 text-gray-400 mx-3 transform -skew-x-20" >.</div>
+      <span className="text-indigo-800">
+        {partName}
+      </span>
+    </h3>
+  )
+}
+
+export default UserPart