update profile and footer

Author: peanut201

client/package.json

@@ -22,6 +22,7 @@
     "react-dom": "^17.0.2",
     "react-hook-form": "^7.17.5",
     "react-icons": "^4.3.1",
+    "react-image-crop": "^9.0.5",
     "react-redux": "^7.2.5",
     "react-router-dom": "^5.3.0",
     "react-scripts": "4.0.3",
@@ -59,4 +60,4 @@
     "concurrently": "^6.3.0",
     "redux-devtools": "^3.7.0"
   }
-}
+}

client/src/components/Footer.js

@@ -6,7 +6,7 @@ import {
   useColorModeValue,
   VisuallyHidden,
 } from "@chakra-ui/react";
-import {FaInstagram, FaTwitter, FaYoutube} from "react-icons/fa";
+import {BsTelegram ,BsFacebook ,BsLinkedin} from "react-icons/bs";
 
 const Logo = (props) => {
   return (
@@ -73,14 +73,14 @@ export function Footer() {
         © {new Date().getFullYear()} React Example. All rights reserved
       </Text>
       <Stack direction={"row"} spacing={6}>
-        <SocialButton label={"Twitter"} href={"#"}>
-          <FaTwitter/>
+        <SocialButton label={"Telegram"} href={"https://t.me/peanut201"}>
+          <BsTelegram/>
         </SocialButton>
-        <SocialButton label={"YouTube"} href={"#"}>
-          <FaYoutube/>
+        <SocialButton label={"Facebook"} href={"https://www.facebook.com/truongdq2001/"}>
+          <BsFacebook/>
         </SocialButton>
-        <SocialButton label={"Instagram"} href={"#"}>
-          <FaInstagram/>
+        <SocialButton label={"Linked In"} href={"www.linkedin.com/in/peanut201"}>
+          <BsLinkedin/>
         </SocialButton>
       </Stack>
     </Container>

client/src/components/Header.js

@@ -14,15 +14,15 @@ import {
   useColorMode,
   Center,
 } from "@chakra-ui/react";
-import { MoonIcon, SunIcon } from "@chakra-ui/icons";
-import { useDispatch, useSelector } from "react-redux";
-import { userSelector } from "../redux/selector";
-import { MemoryClient } from "../utils";
-import { useHistory } from "react-router-dom";
-import { CHECKING_AUTH, ENUM_STATUS, genericAction } from "../redux/actions";
+import {MoonIcon, SunIcon} from "@chakra-ui/icons";
+import {useDispatch, useSelector} from "react-redux";
+import {userSelector} from "../redux/selector";
+import {MemoryClient} from "../utils";
+import {useHistory} from "react-router-dom";
+import {CHECKING_AUTH, ENUM_STATUS, genericAction} from "../redux/actions";
 
 export function Header() {
-  const { colorMode, toggleColorMode } = useColorMode();
+  const {colorMode, toggleColorMode} = useColorMode();
   const dataUser = useSelector(userSelector);
   const history = useHistory();
   const dispatch = useDispatch();
@@ -45,7 +45,7 @@ export function Header() {
           <Flex alignItems={"center"}>
             <Stack direction={"row"} spacing={7}>
               <Button onClick={toggleColorMode}>
-                {colorMode === "light" ? <MoonIcon /> : <SunIcon />}
+                {colorMode === "light" ? <MoonIcon/> : <SunIcon/>}
               </Button>
 
               <Menu>
@@ -58,23 +58,23 @@ export function Header() {
                 >
                   <Avatar
                     size={"sm"}
-                    src={"https://avatars.dicebear.com/api/male/username.svg"}
+                    src={dataUser.user.avatar_url || "https://avatars.dicebear.com/api/male/username.svg"}
                   />
                 </MenuButton>
                 <MenuList alignItems={"center"}>
-                  <br />
+                  <br/>
                   <Center>
                     <Avatar
                       size={"2xl"}
-                      src={"https://avatars.dicebear.com/api/male/username.svg"}
+                      src={dataUser.user.avatar_url || "https://avatars.dicebear.com/api/male/username.svg"}
                     />
                   </Center>
-                  <br />
+                  <br/>
                   <Center>
-                    <p>{dataUser.user ? dataUser.user.username : ""}</p>
+                    <p>{dataUser.user.username || ""}</p>
                   </Center>
-                  <br />
-                  <MenuDivider />
+                  <br/>
+                  <MenuDivider/>
                   <MenuItem onClick={() => history.push("/my-profile")}>
                     Account Settings
                   </MenuItem>

client/src/components/SingleUploadFile.js

@@ -0,0 +1,46 @@
+import React from 'react';
+import {Button, FormLabel, useToast} from "@chakra-ui/react";
+import {uploadFileFirebase} from "../utils";
+import {useSelector} from "react-redux";
+import {userSelector} from "../redux/selector";
+
+
+export function SingleUploadFile({onComplete}) {
+  const dataUser = useSelector(userSelector);
+  const toast = useToast();
+  const onChangeFile = async (e) => {
+    if (!e.target.files || e.target.files && !e.target.files.length) {
+      toast({
+        title: "Error load file",
+        description: "Something went wrong load file!",
+        status: "error",
+        duration: 3000,
+        isClosable: true,
+        variant: "left-accent",
+        position: "top",
+      });
+    }
+    let imgFile = e.target.files[0];
+    let validFile = imgFile.type !== 'image/png';
+    if (validFile) {
+      toast({
+        title: "Valid file",
+        description: "File includes .png | .jpg !",
+        status: "error",
+        duration: 3000,
+        isClosable: true,
+        variant: "left-accent",
+        position: "top",
+      });
+      return;
+    }
+    const link = await uploadFileFirebase(dataUser.user._id, imgFile);
+    onComplete(link);
+  }
+  return (
+    <div className={'w-full'}>
+      <Button as={FormLabel} htmlFor="upload" className="w-full">Change Avatar</Button>
+      <input type={'file'} id="upload" hidden onChange={onChangeFile} value={''}/>
+    </div>
+  )
+}

client/src/config/firebase-cloud.js

@@ -1,7 +1,7 @@
 // Import the functions you need from the SDKs you need
 import { initializeApp } from "firebase/app";
 import { GoogleAuthProvider, getAuth, signInWithPopup } from "firebase/auth";
-import { getStorage, ref } from "firebase/storage";
+import { getStorage } from "firebase/storage";
 
 // TODO: Add SDKs for Firebase products that you want to use
 // https://firebase.google.com/docs/web/setup#available-libraries
@@ -23,10 +23,8 @@ const app = initializeApp(firebaseConfig);
 // const analytics = getAnalytics(app);
 const auth = getAuth();
 
-const storage = getStorage(app);
+export const storage = getStorage(app);
 
-// Create a storage reference from our storage service
-export const storageRef = ref(storage);
 export const providerGoogle = new GoogleAuthProvider();
 providerGoogle.setCustomParameters({ prompt: "select_account" });