From 73ffaacbaedd4dfe819af116a7c5c622b85ab877 Mon Sep 17 00:00:00 2001 From: Michael Varrieur Date: Tue, 27 Oct 2020 22:30:04 -0400 Subject: [PATCH 1/5] Add EmojiReaction component --- .../components/EmojiReaction/EmojiReaction.js | 73 +++++++++++++++++++ .../EmojiReaction/EmojiReaction.stories.js | 7 ++ .../EmojiReaction/EmojiReaction.test.js | 11 +++ web/src/components/Svg/Svg.js | 3 + 4 files changed, 94 insertions(+) create mode 100644 web/src/components/EmojiReaction/EmojiReaction.js create mode 100644 web/src/components/EmojiReaction/EmojiReaction.stories.js create mode 100644 web/src/components/EmojiReaction/EmojiReaction.test.js diff --git a/web/src/components/EmojiReaction/EmojiReaction.js b/web/src/components/EmojiReaction/EmojiReaction.js new file mode 100644 index 0000000..83fb7b3 --- /dev/null +++ b/web/src/components/EmojiReaction/EmojiReaction.js @@ -0,0 +1,73 @@ +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 [ +
+ + + +
+ {emotes.map((emote) => ( + handleEmojiClick(emote.emoji)}> + {emote.emoji} {emote.count} + + ))} +
+
, + + {emojiMenu.map((emoji) => ( + handleEmojiClick(emoji)}>{emoji} + ))} + , + ] +} + +export default EmojiReaction diff --git a/web/src/components/EmojiReaction/EmojiReaction.stories.js b/web/src/components/EmojiReaction/EmojiReaction.stories.js new file mode 100644 index 0000000..1f0c8ab --- /dev/null +++ b/web/src/components/EmojiReaction/EmojiReaction.stories.js @@ -0,0 +1,7 @@ +import EmojiReaction from './EmojiReaction' + +export const generated = () => { + return +} + +export default { title: 'Components/EmojiReaction' } diff --git a/web/src/components/EmojiReaction/EmojiReaction.test.js b/web/src/components/EmojiReaction/EmojiReaction.test.js new file mode 100644 index 0000000..f034533 --- /dev/null +++ b/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() + }).not.toThrow() + }) +}) diff --git a/web/src/components/Svg/Svg.js b/web/src/components/Svg/Svg.js index 8212212..43ec2ff 100644 --- a/web/src/components/Svg/Svg.js +++ b/web/src/components/Svg/Svg.js @@ -9,6 +9,9 @@ const Svg = ({name, className: className2, strokeWidth = 2}) => { , "pencil": + , + "dots-vertical": + } -- 2.39.5 From 5c412fffee6b0705def8af938ef1a8b8d3a91de2 Mon Sep 17 00:00:00 2001 From: Kurt Hutten Date: Wed, 28 Oct 2020 20:47:05 +1100 Subject: [PATCH 2/5] Inconsequential changes --- web/src/components/PartForm/ImageUploader.js | 2 +- web/src/layouts/MainLayout/MainLayout.js | 1 + 2 files changed, 2 insertions(+), 1 deletion(-) diff --git a/web/src/components/PartForm/ImageUploader.js b/web/src/components/PartForm/ImageUploader.js index 4809ec0..b88023e 100644 --- a/web/src/components/PartForm/ImageUploader.js +++ b/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) diff --git a/web/src/layouts/MainLayout/MainLayout.js b/web/src/layouts/MainLayout/MainLayout.js index 8621647..ae55bd0 100644 --- a/web/src/layouts/MainLayout/MainLayout.js +++ b/web/src/layouts/MainLayout/MainLayout.js @@ -23,6 +23,7 @@ const MainLayout = ({ children }) => {
  • + {/* Because of how specific these styles are to this heading/logo and it doesn't need to be replicated else where as well as it's very precise with the placement of "pre-alpha" I think it's appropriate. */}

    CadHub

    pre-alpha
    -- 2.39.5 From 1bad0de25f8d20ffa74c309a0ff4b5079be22ef9 Mon Sep 17 00:00:00 2001 From: Kurt Hutten Date: Wed, 28 Oct 2020 21:19:26 +1100 Subject: [PATCH 3/5] A few quick tweaks to emoji component --- .../components/EmojiReaction/EmojiReaction.js | 17 ++++++++++------- web/src/components/Parts/Parts.js | 14 +++++++++++++- web/src/components/Svg/Svg.js | 2 +- web/src/index.css | 2 +- 4 files changed, 25 insertions(+), 10 deletions(-) diff --git a/web/src/components/EmojiReaction/EmojiReaction.js b/web/src/components/EmojiReaction/EmojiReaction.js index 83fb7b3..0f2d162 100644 --- a/web/src/components/EmojiReaction/EmojiReaction.js +++ b/web/src/components/EmojiReaction/EmojiReaction.js @@ -38,12 +38,15 @@ const EmojiReaction = ({ emotes, callback = () => {} }) => { return [
    - - - + +
    + +
    +     +
    - {emotes.map((emote) => ( - handleEmojiClick(emote.emoji)}> + {emotes.map((emote, i) => ( + handleEmojiClick(emote.emoji)}> {emote.emoji} {emote.count} ))} @@ -63,8 +66,8 @@ const EmojiReaction = ({ emotes, callback = () => {} }) => { horizontal: 'center', }} > - {emojiMenu.map((emoji) => ( - handleEmojiClick(emoji)}>{emoji} + {emojiMenu.map((emoji, i) => ( + handleEmojiClick(emoji)}>{emoji} ))} , ] diff --git a/web/src/components/Parts/Parts.js b/web/src/components/Parts/Parts.js index 8f49c7b..b5573e8 100644 --- a/web/src/components/Parts/Parts.js +++ b/web/src/components/Parts/Parts.js @@ -1,6 +1,7 @@ import { useMutation, useFlash } from '@redwoodjs/web' import { Link, routes } from '@redwoodjs/router' import { Image as CloudinaryImage } from 'cloudinary-react' +import EmojiiReaction from 'src/components/EmojiReaction/EmojiReaction' import avatar from 'src/assets/harold.jpg' @@ -53,6 +54,17 @@ const PartsList = ({ parts }) => { } return ( + <> + console.log(e)} />
    {parts.map((part) => { return ( @@ -82,7 +94,7 @@ const PartsList = ({ parts }) => {
    )})} -
    +
    ) } diff --git a/web/src/components/Svg/Svg.js b/web/src/components/Svg/Svg.js index 43ec2ff..0e03c06 100644 --- a/web/src/components/Svg/Svg.js +++ b/web/src/components/Svg/Svg.js @@ -11,7 +11,7 @@ const Svg = ({name, className: className2, strokeWidth = 2}) => { , "dots-vertical": - + } diff --git a/web/src/index.css b/web/src/index.css index eed36d4..5b01aec 100644 --- a/web/src/index.css +++ b/web/src/index.css @@ -36,7 +36,7 @@ body { /* TODO can I use a tailwind class here? */ - background-color: #4a5568; + background-color: #E5E5E5; } button, input, label, textarea { -- 2.39.5 From 171299dd822cc99bb6261e823f9be8ced312c18e Mon Sep 17 00:00:00 2001 From: Kurt Hutten Date: Wed, 28 Oct 2020 21:21:09 +1100 Subject: [PATCH 4/5] Remove mistake --- web/src/components/Parts/Parts.js | 14 +------------- 1 file changed, 1 insertion(+), 13 deletions(-) diff --git a/web/src/components/Parts/Parts.js b/web/src/components/Parts/Parts.js index b5573e8..8f49c7b 100644 --- a/web/src/components/Parts/Parts.js +++ b/web/src/components/Parts/Parts.js @@ -1,7 +1,6 @@ import { useMutation, useFlash } from '@redwoodjs/web' import { Link, routes } from '@redwoodjs/router' import { Image as CloudinaryImage } from 'cloudinary-react' -import EmojiiReaction from 'src/components/EmojiReaction/EmojiReaction' import avatar from 'src/assets/harold.jpg' @@ -54,17 +53,6 @@ const PartsList = ({ parts }) => { } return ( - <> - console.log(e)} />
    {parts.map((part) => { return ( @@ -94,7 +82,7 @@ const PartsList = ({ parts }) => {
    )})} - + ) } -- 2.39.5 From c3f866967e552c3dd01c140ae1b451ee9dd32368 Mon Sep 17 00:00:00 2001 From: Kurt Hutten Date: Thu, 29 Oct 2020 05:25:16 +1100 Subject: [PATCH 5/5] Tweak PR50 further --- web/src/components/UserPart/UserPart.js | 5 ++--- web/tailwind.config.js | 3 +++ 2 files changed, 5 insertions(+), 3 deletions(-) diff --git a/web/src/components/UserPart/UserPart.js b/web/src/components/UserPart/UserPart.js index 5596649..83256b2 100644 --- a/web/src/components/UserPart/UserPart.js +++ b/web/src/components/UserPart/UserPart.js @@ -1,12 +1,11 @@ function UserPart({ userName, partName }) { return (

    - +
    .
    {userName} - - +
    .
    {partName} diff --git a/web/tailwind.config.js b/web/tailwind.config.js index 35fa635..c15b6f2 100644 --- a/web/tailwind.config.js +++ b/web/tailwind.config.js @@ -20,6 +20,9 @@ module.exports = { 'ropa-sans': ['Ropa Sans', 'Arial', 'sans-serif'], 'roboto': ['Roboto', 'Arial', 'sans-serif'], }, + skew: { + '-20': "-20deg" + } } }, variants: {}, -- 2.39.5