Make avatar, with updatable state #46

Closed
opened 2020-10-27 21:18:01 +01:00 by Irev-Dev · 14 comments
Irev-Dev commented 2020-10-27 21:18:01 +01:00 (Migrated from github.com)

The profile page will have following updatable avatar component
image

For this issue you need to:

image

  • It should at least have 3 props 1) isEditable: boolean, 2) imageId: string (this will be a cloudinary id used to fetch the image) 3) onChange: callback that returns the new couldinaryid when a new upload occures
  • Style with tailwind css

Design can be found here
Context of where these inputs will go:
image

The profile page will have following updatable avatar component ![image](https://user-images.githubusercontent.com/29681384/97356658-b3091f00-18ec-11eb-81bb-cdf60f0fa0cc.png) For this issue you need to: - Make a react component for the above extending/modifying the [ImageUploader component](https://github.com/Irev-Dev/cadhub/blob/main/web/src/components/PartForm/ImageUploader.js) ![image](https://user-images.githubusercontent.com/29681384/97357439-e13b2e80-18ed-11eb-89c1-b44d6ebc56f7.png) - It should at least have 3 props 1) isEditable: boolean, 2) imageId: string (this will be a cloudinary id used to fetch the image) 3) onChange: callback that returns the new couldinaryid when a new upload occures - Style with tailwind css Design can be [found here](https://www.figma.com/file/VUh53RdncjZ7NuFYj0RGB9/CadHub?node-id=152%3A41) Context of where these inputs will go: ![image](https://user-images.githubusercontent.com/29681384/97356333-38400400-18ec-11eb-8049-4927d093f4df.png)
rohansp commented 2020-10-28 04:16:12 +01:00 (Migrated from github.com)

@Irev-Dev So, initially the user page will have the edit pencil icon on the image.User will click on this pencil and upload new image. After 100% image is uploaded the below image without the pencil icon is shown. Is this the behavior? You can assign this to me.

@Irev-Dev So, initially the user page will have the edit pencil icon on the image.User will click on this pencil and upload new image. After 100% image is uploaded the below image without the pencil icon is shown. Is this the behavior? You can assign this to me.
rohansp commented 2020-10-28 04:20:18 +01:00 (Migrated from github.com)

@Irev-Dev I am having trouble with yarn. yarn --force is taking too much time. Will keep you posted.

@Irev-Dev I am having trouble with yarn. yarn --force is taking too much time. Will keep you posted.
rohansp commented 2020-10-28 04:37:54 +01:00 (Migrated from github.com)

@Irev-Dev I am getting this error.
image
Need your feedback

@Irev-Dev I am getting this error. ![image](https://user-images.githubusercontent.com/11171608/97387933-0788ac00-18a5-11eb-99b7-d029668e7617.png) Need your feedback
rohansp commented 2020-10-28 04:47:00 +01:00 (Migrated from github.com)

@Irev-Dev yarn rw dev gives this error after opening the link http://localhost:8900 in Chrome and I see Something went wrong message on page.

@Irev-Dev yarn rw dev gives this error after opening the link http://localhost:8900 in Chrome and I see Something went wrong message on page.
rohansp commented 2020-10-28 04:53:17 +01:00 (Migrated from github.com)

@Irev-Dev Tried the yarn rw dev command on Windows Powershell in VS Code. Keep getting web | [HPM] Error occurred while trying to proxy request /graphql from localhost:8910 to http://[::1]:8911 (ECONNRESET) (https://nodejs.org/api/errors.html#errors_common_system_errors)
image

Am I missing something here?

@Irev-Dev Tried the yarn rw dev command on Windows Powershell in VS Code. Keep getting web | [HPM] Error occurred while trying to proxy request /graphql from localhost:8910 to http://[::1]:8911 (ECONNRESET) (https://nodejs.org/api/errors.html#errors_common_system_errors) ![image](https://user-images.githubusercontent.com/11171608/97388933-2d16b500-18a7-11eb-8505-5ec60e950265.png) Am I missing something here?
Irev-Dev commented 2020-10-28 08:44:56 +01:00 (Migrated from github.com)

Sorry I can't help you with you errors, I'm on a mac, and I haven't run into anything like this. Looks pretty system specific to me

@Irev-Dev So, initially the user page will have the edit pencil icon on the image.User will click on this pencil and upload new image. After 100% image is uploaded the below image without the pencil icon is shown. Is this the behavior? You can assign this to me.

So whether the pencil shows or not should be controlled by isEditable prop, that way the same component can be used to display the avatar on the profile page, and then again on the edit profile page where the pencil will show up.
If you look at the figma design, there designs for two pages, editable and not.

Sorry I can't help you with you errors, I'm on a mac, and I haven't run into anything like this. Looks pretty system specific to me > @Irev-Dev So, initially the user page will have the edit pencil icon on the image.User will click on this pencil and upload new image. After 100% image is uploaded the below image without the pencil icon is shown. Is this the behavior? You can assign this to me. So whether the pencil shows or not should be controlled by `isEditable` prop, that way the same component can be used to display the avatar on the profile page, and then again on the edit profile page where the pencil will show up. If you look at the figma design, there designs for two pages, editable and not.
Irev-Dev commented 2020-10-28 08:56:12 +01:00 (Migrated from github.com)

@rohansp I've had a look on both the redwood forums and the discord and couldn't find anyone who's hit the same error.
I've found the community to be very responsive if you wanted to ask on the discord. https://discord.com/invite/jjSYEQd

Sorry about the hassle, there's no obligation to keep push through it if you not enjoying it anymore.

@rohansp I've had a look on both the redwood forums and the discord and couldn't find anyone who's hit the same error. I've found the community to be very responsive if you wanted to ask on the discord. https://discord.com/invite/jjSYEQd Sorry about the hassle, there's no obligation to keep push through it if you not enjoying it anymore.
mvarrieur commented 2020-10-29 02:31:32 +01:00 (Migrated from github.com)

@rohansp @Irev-Dev I found that redwood API/backend just crashes completely on the latest v12 version of Node (12.19.0). 12.18.x was working for me. Looks like you might be having the same issue. I didn't try v14 since it just went LTS yesterday

@rohansp @Irev-Dev I found that redwood API/backend just crashes completely on the latest v12 version of Node (12.19.0). 12.18.x was working for me. Looks like you might be having the same issue. I didn't try v14 since it just went LTS yesterday
rohansp commented 2020-10-29 02:34:11 +01:00 (Migrated from github.com)

Okay Thanks Michael. I will try it out.

On Wed, Oct 28, 2020 at 8:31 PM Michael Varrieur notifications@github.com
wrote:

@rohansp https://github.com/rohansp @Irev-Dev
https://github.com/Irev-Dev I found that redwood API/backend just
crashes completely on the latest v12 version of Node (12.19.0). 12.18.x was
working for me. Looks like you might be having the same issue. I didn't try
v14 since it just went LTS yesterday


You are receiving this because you were mentioned.
Reply to this email directly, view it on GitHub
https://github.com/Irev-Dev/cadhub/issues/46#issuecomment-718302582, or
unsubscribe
https://github.com/notifications/unsubscribe-auth/ACVHOGCULTGZRPCVCHAIIODSNDAYDANCNFSM4TBK3QWQ
.

Okay Thanks Michael. I will try it out. On Wed, Oct 28, 2020 at 8:31 PM Michael Varrieur <notifications@github.com> wrote: > > > @rohansp <https://github.com/rohansp> @Irev-Dev > <https://github.com/Irev-Dev> I found that redwood API/backend just > crashes completely on the latest v12 version of Node (12.19.0). 12.18.x was > working for me. Looks like you might be having the same issue. I didn't try > v14 since it just went LTS yesterday > > > > > — > You are receiving this because you were mentioned. > Reply to this email directly, view it on GitHub > <https://github.com/Irev-Dev/cadhub/issues/46#issuecomment-718302582>, or > unsubscribe > <https://github.com/notifications/unsubscribe-auth/ACVHOGCULTGZRPCVCHAIIODSNDAYDANCNFSM4TBK3QWQ> > . > > >
Irev-Dev commented 2020-11-05 21:50:31 +01:00 (Migrated from github.com)

Resolved by #59

Resolved by #59
rohansp commented 2020-11-06 03:56:20 +01:00 (Migrated from github.com)

@Irev-Dev Sorry, couldn't find time to complete this.

@Irev-Dev Sorry, couldn't find time to complete this.
Irev-Dev commented 2020-11-06 07:06:26 +01:00 (Migrated from github.com)

@rohansp No need to apologise. Thanks for having a go.

Did you make a start purely because of hacktoberfest, or do you like the project and want to contribute to some other part of it?

@rohansp No need to apologise. Thanks for having a go. Did you make a start purely because of hacktoberfest, or do you like the project and want to contribute to some other part of it?
rohansp commented 2020-11-09 21:37:27 +01:00 (Migrated from github.com)

@Irev-Dev I started with Hacktoberfest but idea of project using React and having interesting design increased my interest in this project.

@Irev-Dev I started with Hacktoberfest but idea of project using React and having interesting design increased my interest in this project.
Irev-Dev commented 2020-11-11 08:59:44 +01:00 (Migrated from github.com)

Nice @rohansp 😄 .
I've set up a github project board https://github.com/Irev-Dev/cadhub/projects/1
It's a little bare at the moment, but I hope to fill up the backlog with things I'd like to get done, if any of them interest you at anypoint feel free pick them up or chat to me about it. I'm also open to any ideas you have for the website.

I've also setup a discord server, its bit easier to chat if you want to spit-ball ideas.
Up to you
https://discord.gg/57J4y4AR

Nice @rohansp 😄 . I've set up a github project board https://github.com/Irev-Dev/cadhub/projects/1 It's a little bare at the moment, but I hope to fill up the backlog with things I'd like to get done, if any of them interest you at anypoint feel free pick them up or chat to me about it. I'm also open to any ideas you have for the website. I've also setup a discord server, its bit easier to chat if you want to spit-ball ideas. Up to you https://discord.gg/57J4y4AR
Sign in to join this conversation.
No Label
1 Participants
Notifications
Due Date
No due date set.
Dependencies

No dependencies set.

Reference: h3n3/cadhub#46