Make a button that show who has reacted on pizza and not #5109
Conversation
|
The latest updates on your projects. Learn more about Vercel for Git ↗︎ 1 Skipped Deployment
|
|
When I come to think of it - could we maybe support this directly on the pizza reaction button? Instead of having it on a separate button |
We could have it integrated onto the pizza reaction button. I have of sometime in the future (it may take a while) to connect it to the pizza project @nye(2023) had. Is it better to integrate it into the pizza button now and maybe make it its own thing later? |
|
Is there a general rule on which imports should come first? The linter tells me to move imports a lot, it would be easier to just do it right the first time |
It's a linting rule defined here. If you use vscode you can enable auto sorting on save: https://dev.to/shanesc/how-to-sort-and-cleanup-imports-on-save-in-vs-code-52p1 |
Thank you, that is so useful!! |
Button is only visible when pizza is reacted with Make a component that makes a list of items from string with newline Make a pizza button Make a pizza button that displays when atleast one person has reacted with 🍕. The button displays who has reacted on pizza and who has not. Make reactions use ContentList for nicer formatting fix linting
ShaileshS1702
force-pushed
the
make-pizza-diff-button
branch
from
047e8b6
to
d0fec45
Compare
|
This is very cool! |
| .map((name) => <div key={name}>{name}</div>); | ||
| const tooltipContent = tooltipContentNames ? ( | ||
| <div> | ||
| {tooltipContentNames} | ||
| har reagert med {emoji} | ||
| </div> | ||
| ) : undefined; |
There was a problem hiding this comment.
Why the added divs etc? Did the current way not work?
There was a problem hiding this comment.
I think it's to get them on separate lines. Now all the names are all on one long line, and it's impossible to read them
There was a problem hiding this comment.
Originally I made a component to take care of the information in tooltips. The component became redundant. Now the main reason the divs are there , as Eik said, are to make it cleaner and separate each name on a new line. There may be better ways to do that.
There was a problem hiding this comment.
Can you use a shard (<></>) with display: block, or just insert newline characters (\n)?
There was a problem hiding this comment.
showPeople && optimisticUsers?.map((user) => user.fullName).join(', \n');
Something like this?
There was a problem hiding this comment.
Shards may work ( I am not sure if shards are inline or blocks). My original plan was, as you said, to use \n, but it gets interpreted as HTML or something and and newlines just get switched out with spaces (I may have done it wrong).
There was a problem hiding this comment.
Turns out the shards are also inline
There was a problem hiding this comment.
Shards are not rendered as html, so it will work exactly the same as just having the names directly after each other
There was a problem hiding this comment.
But adding "\n" after each line seems like a good solution imo.
There was a problem hiding this comment.
My original plan was to use \n, but it gets interpreted as HTML or something and newlines just get switched out with spaces (I may have done it wrong). How should I use implement newlines?
|
Good to merge? |
| return ( | ||
| <Tooltip content={tooltipContent}> | ||
| <Button> | ||
| <Pizza /> Pizza-reaksjoner | ||
| </Button> | ||
| </Tooltip> | ||
| ); |
There was a problem hiding this comment.
It would be really nice if you could press this to react/unreact with pizza emoji!
There was a problem hiding this comment.
There is a plan to make the button redirect to @nye(2023)s pizza project on a later date.
I can make the button temporarily react/unreact with the pizza emoji, but feel like having a button changing its purpose later might make it confusing. (It might be smart in case I do not actually ever finish the pizza project). What do you think?
Description
This commit makes a new pizza button component that when hovered display who has wants pizza and who does not. It also makes the reaction cleaner, by sorting alphabetically and newline for each person.
As of now the pizza button is a button, but does not do anything. There is plan to connect it to the @nye(2023)'s project pizza on a later date. Any tips here are welcome.
Also as of now the button is only visible if at least one person has reacted with pizza to the meeting. There is a plan to make "pizza mode" and option when making a new meeting/updating a meeting rather than just who has reacted.
Result
If you've made visual changes, please check the boxes below and include images showing the changes. Descriptions are appreciated.
Caution
Make sure your images do not contain any real user information.
Testing
Please describe what and how the changes have been tested, and provide instructions to reproduce if necessary.
Tried different meetings with different amount of people and tried light mode and screen width. Only issue I can think of is if someone has a very long name. I was not able to test would happen then.
Resolves ABA-1132