add profile image

[diegoalzate]

Overview

This PR adds an upload profile image functionality to the create-profile page ISSUE

In order to create this i installed the following packages:

• web3.storage

How the AddAvatar component works

Firstly, i checked the supabase client and hooks were being created, very cool btw. So i followed that arcihtecture and stored the web3StorageClient in the common folder

import { Web3Storage } from 'web3.storage';

export const makeStorageClient = () => {
  return new Web3Storage({ token: process.env.WEB3STORAGE_TOKEN ?? '' });
};

note: this whole functionality requires a web3Storage token to be added to doppler, as of right now this token is associated to my account, ill leave this up to you guys @carlomigueldy @angeljgomezc @Dhaiwat10

AddAvatarComponent

This component recieves a src as a prop which will be the image that is rendered initially.

• In this component we switch from a Image to Div with a background image using the state variable hoverImage.
• The variable hoverImage changes with the toggleHover function that is triggered by the events onMouseLeave while it is a div with a background image and onMouseEnter while it is just an image component, in order to show a button while mouse is over the image and remove it when it is no longer there.
• In order to upload the image we use the function submitProfilePicture, this function shows what we send to web3Storage and what they return, i added a todo so the result is updated in db

[vercel[bot]]

This pull request is being automatically deployed with Vercel (learn more).
To see the status of your deployment, click below or on the icon next to each commit.

🔍 Inspect: https://vercel.com/developdao/dao-job-board/5ytcsqcrxCAtx2kwHbJHr7kGVKGK
✅ Preview: https://dao-job-board-git-feature-add-profile-image-developdao.vercel.app

[carlomigueldy]

@allcontributors please add @diegoalzate for code

[allcontributors[bot]]

@carlomigueldy

I've put up a pull request to add @diegoalzate! :tada:

[diegoalzate]

Looks good overall thank you @diegoalzate 🎉

I've requested some minor changes. But I also noticed that yarn.lock was removed and package-lock.json is added, I am not entirely sure if this is a problem but would like to request your review 👀 on this PR @with-heart @Dhaiwat10

@carlomigueldy True i didnt notice that I removed the yarn.lock, i did a back merge to fix conflicts with the new changes that were uploaded to main but something obviously went wrong along the way. Just let me know how i should fix it :)

[carlomigueldy]

Looks good overall thank you @diegoalzate 🎉 I've requested some minor changes. But I also noticed that yarn.lock was removed and package-lock.json is added, I am not entirely sure if this is a problem but would like to request your review 👀 on this PR @with-heart @Dhaiwat10

@carlomigueldy True i didnt notice that I removed the yarn.lock, i did a back merge to fix conflicts with the new changes that were uploaded to main but something obviously went wrong along the way. Just let me know how i should fix it :)

Yo @diegoalzate ! Just delete all package-lock.json files and run yarn install this creates the yarn.lock files. Then that should be it for the quick fix.

And then we're ready to merge this in!

[diegoalzate]

Looks good overall thank you @diegoalzate 🎉 I've requested some minor changes. But I also noticed that yarn.lock was removed and package-lock.json is added, I am not entirely sure if this is a problem but would like to request your review 👀 on this PR @with-heart @Dhaiwat10

@carlomigueldy True i didnt notice that I removed the yarn.lock, i did a back merge to fix conflicts with the new changes that were uploaded to main but something obviously went wrong along the way. Just let me know how i should fix it :)

Yo @diegoalzate ! Just delete all package-lock.json files and run yarn install this creates the yarn.lock files. Then that should be it for the quick fix.

And then we're ready to merge this in!

@carlomigueldy sounds great, just pushed these changes, not sure why it says i dismissed @Dhaiwat10 stale review :/

[carlomigueldy]

Looks good overall thank you @diegoalzate 🎉 I've requested some minor changes. But I also noticed that yarn.lock was removed and package-lock.json is added, I am not entirely sure if this is a problem but would like to request your review 👀 on this PR @with-heart @Dhaiwat10

@carlomigueldy True i didnt notice that I removed the yarn.lock, i did a back merge to fix conflicts with the new changes that were uploaded to main but something obviously went wrong along the way. Just let me know how i should fix it :)

Yo @diegoalzate ! Just delete all package-lock.json files and run yarn install this creates the yarn.lock files. Then that should be it for the quick fix. And then we're ready to merge this in!

@carlomigueldy sounds great, just pushed these changes, not sure why it says i dismissed @Dhaiwat10 stale review :/

Whoops sorry, I think it was the branch rules that I put. I removed that rule instead so it doesn't get dismissed unintentionally