add profile image (#139)

* added add-avatar component

* added AddAvatar Component to create-profile index

* changed typescript type variable from camel case to pascal case and removed style components from package.json

* moved AddAvatar from pages folder to components folder

* removed package lock and added yarn lock

CONTRIBUTING.md

@@ -62,22 +62,27 @@ In order to create a pull request for DAO Job Board, follow the GitHub instructi
    For a thorough complete guide, read more from the [official docs](https://docs.doppler.com/docs/enclave-installation).
 
 5. Verify if Doppler CLI has been installed
+
    ```bash
    doppler --version
    ```
 
 6. Authenticate to Doppler.
+
    ```bash
    doppler login
    ```
+
    It will ask you to open a URL and gives you a auth code, so make sure to copy that and paste it into Doppler, and from there select "Developer DAO" workspace when it asks you to select one.
 
 7. Setting up Doppler. (Select "Development")
+
    ```bash
    doppler setup
    ```
 
 8. Start the development server with
+
    ```bash
    npm run dev # or `yarn dev`
    ```

README.md

@@ -1,7 +1,9 @@
 # DAO-job-board
 
 <!-- ALL-CONTRIBUTORS-BADGE:START - Do not remove or modify this section -->
+
 [![All Contributors](https://img.shields.io/badge/all_contributors-14-orange.svg?style=flat-square)](#contributors-)
+
 <!-- ALL-CONTRIBUTORS-BADGE:END -->
 
 _In Development 🏗️_

client/common/web3Storage.ts

@@ -0,0 +1,5 @@
+import { Web3Storage } from 'web3.storage';
+
+export const makeStorageClient = () => {
+  return new Web3Storage({ token: process.env.WEB3STORAGE_TOKEN ?? '' });
+};

client/components/create-profile/AddAvatar.tsx

@@ -0,0 +1,110 @@
+import {
+  Button,
+  Image,
+  Center,
+  useDisclosure,
+  Modal,
+  ModalOverlay,
+  ModalContent,
+  ModalHeader,
+  ModalCloseButton,
+  ModalBody,
+  ModalFooter,
+  Input,
+} from '@chakra-ui/react';
+import React, { useState } from 'react';
+import { makeStorageClient } from '../../common/web3Storage';
+import {
+  ButtonGray2,
+  ButtonGreen,
+} from '../../styles/ui-components/Chakra-Button';
+
+type AddAvatarProps = {
+  src: string;
+};
+
+const circularStyles = {
+  w: '8rem',
+  h: '8rem',
+  margin: 'auto',
+  mt: '5%',
+  borderRadius: '180px',
+};
+
+const IPFS_ENDPOINT = 'https://ipfs.io/ipfs';
+
+const AddAvatar = ({ src }: AddAvatarProps) => {
+  const [hoverImage, setHoverImage] = useState(false);
+  const { isOpen, onOpen, onClose } = useDisclosure();
+  const [file, setFile] = useState<string>();
+  const [tempFile, setTempFile] = useState<File>();
+  const web3Storage = makeStorageClient();
+
+  const toggleHover = () => {
+    setHoverImage((prev) => !prev);
+  };
+
+  const handleImageChange = (event: React.ChangeEvent<HTMLInputElement>) => {
+    const { currentTarget } = event;
+    if (currentTarget.files) {
+      setTempFile(currentTarget.files[0]);
+    }
+  };
+
+  const submitProfilePicture = async () => {
+    if (tempFile) {
+      try {
+        const cid = await web3Storage.put([tempFile], {
+          maxRetries: 3,
+        });
+        /*
+         * TODO:
+         * - Add the cid to the database
+         */
+        setFile(`${IPFS_ENDPOINT}/${cid}/${tempFile.name}`);
+        toggleHover();
+        onClose();
+      } catch (e) {
+        console.error('uploading image', e);
+      }
+    }
+  };
+
+  return hoverImage ? (
+    <>
+      <Center
+        {...circularStyles}
+        bgImage={file ?? src}
+        bgSize="cover"
+        bgRepeat="no-repeat"
+        opacity={0.5}
+        onMouseLeave={toggleHover}
+      >
+        <ButtonGray2 onClick={onOpen}>edit</ButtonGray2>
+      </Center>
+      <Modal isOpen={isOpen} onClose={onClose}>
+        <ModalOverlay />
+        <ModalContent>
+          <ModalHeader>Set new Profile pic</ModalHeader>
+          <ModalCloseButton />
+          <ModalBody>
+            <Input type="file" onChange={handleImageChange}></Input>
+          </ModalBody>
+          <ModalFooter>
+            <ButtonGray2 onClick={onClose}>Close</ButtonGray2>
+            <ButtonGreen onClick={submitProfilePicture}>Submit</ButtonGreen>
+          </ModalFooter>
+        </ModalContent>
+      </Modal>
+    </>
+  ) : (
+    <Image
+      {...circularStyles}
+      src={file ?? src}
+      alt="developer"
+      onMouseEnter={toggleHover}
+    />
+  );
+};
+
+export default AddAvatar;

client/next.config.js

@@ -7,5 +7,6 @@ module.exports = {
     SUPABASE_URL: process.env.SUPABASE_URL,
     SUPABASE_SECRET: process.env.SUPABASE_SECRET,
     SUPABASE_PUBLIC_KEY: process.env.SUPABASE_PUBLIC_KEY,
+    WEB3STORAGE_TOKEN: process.env.WEB3STORAGE_TOKEN
   },
 };

client/package.json

@@ -30,6 +30,7 @@
     "nextjs": "0.0.3",
     "react": "17.0.2",
     "react-dom": "17.0.2",
+    "web3.storage": "^3.3.4",
     "uuid": "^8.3.2"
   },
   "devDependencies": {

client/pages/_app.tsx

@@ -7,7 +7,6 @@ import { DAppProvider } from '@usedapp/core';
 import { AuthProvider } from '@/hooks/useAuth';
 import { appWithTranslation } from 'next-i18next';
 
-
 function MyApp({ Component, pageProps }: AppProps) {
   return (
     <AuthProvider>

client/pages/create-profile/index.tsx

@@ -32,6 +32,7 @@ import {
   ButtonGreen,
   ButtonOrange,
 } from '../../styles/ui-components/Chakra-Button';
+import AddAvatar from '../../components/create-profile/AddAvatar';
 import Project from '@/components/create-profile/project';
 import { DeleteIcon } from '@chakra-ui/icons';
 
@@ -193,14 +194,7 @@ export default function CreateProfile() {
 
             <Box m="auto">
               <Text size="md">PFP</Text>
-              <Image
-                w="8rem"
-                h="8rem"
-                margin="auto"
-                borderRadius="180px"
-                src="/DevDAO.png"
-                alt="developer"
-              />
+              <AddAvatar src="/DevDAO.png" />
             </Box>
 
             <Stack direction="column" textAlign="left" spacing={2}>