From 691203d0c8e12f2d908ddc61cbf22dc63eb06bf1 Mon Sep 17 00:00:00 2001
From: Haris Kurspahic <haris.kurspahic@moonshiner.at>
Date: Thu, 23 Nov 2023 11:24:52 +0100
Subject: [PATCH 1/2] fe changes regarding refactor

---
 frontend/react/src/Customer.jsx               |  1 +
 .../src/components/context/AuthContext.jsx    |  1 +
 .../customer/CreateCustomerDrawer.jsx         |  1 -
 .../src/components/customer/CustomerCard.jsx  |  7 +-
 .../customer/UpdateCustomerForm.jsx           | 70 ++++++++++++++++---
 frontend/react/src/components/login/Login.jsx | 19 ++---
 .../react/src/components/shared/SideBar.jsx   |  9 +--
 .../react/src/components/signup/Signup.jsx    | 18 +----
 frontend/react/src/index.css                  |  1 +
 frontend/react/src/main.jsx                   |  4 +-
 frontend/react/src/services/client.js         | 20 +++++-
 11 files changed, 96 insertions(+), 55 deletions(-)

diff --git a/frontend/react/src/Customer.jsx b/frontend/react/src/Customer.jsx
index e57e00f..8ba2a8b 100644
--- a/frontend/react/src/Customer.jsx
+++ b/frontend/react/src/Customer.jsx
@@ -12,6 +12,7 @@ import CreateCustomerDrawer from "./components/customer/CreateCustomerDrawer.jsx
 import {errorNotification} from "./services/notification.js";
 
 const Customer = () => {
+
     const [customers, setCustomers] = useState([]);
     const [loading, setLoading] = useState(false);
     const [err, setError] = useState("");
diff --git a/frontend/react/src/components/context/AuthContext.jsx b/frontend/react/src/components/context/AuthContext.jsx
index 754745c..576d1f8 100644
--- a/frontend/react/src/components/context/AuthContext.jsx
+++ b/frontend/react/src/components/context/AuthContext.jsx
@@ -10,6 +10,7 @@ import {jwtDecode} from "jwt-decode";
 const AuthContext = createContext({});
 
 const AuthProvider = ({ children }) => {
+
     const [customer, setCustomer] = useState(null);
 
     const setCustomerFromToken = () => {
diff --git a/frontend/react/src/components/customer/CreateCustomerDrawer.jsx b/frontend/react/src/components/customer/CreateCustomerDrawer.jsx
index 3b8a2b2..41c76fb 100644
--- a/frontend/react/src/components/customer/CreateCustomerDrawer.jsx
+++ b/frontend/react/src/components/customer/CreateCustomerDrawer.jsx
@@ -16,7 +16,6 @@ const CloseIcon = () => "x";
 
 const CreateCustomerDrawer = ({ fetchCustomers }) => {
     const { isOpen, onOpen, onClose } = useDisclosure()
-
     return <>
         <Button
             leftIcon={<AddIcon/>}
diff --git a/frontend/react/src/components/customer/CustomerCard.jsx b/frontend/react/src/components/customer/CustomerCard.jsx
index 7777843..7b4ee0c 100644
--- a/frontend/react/src/components/customer/CustomerCard.jsx
+++ b/frontend/react/src/components/customer/CustomerCard.jsx
@@ -16,7 +16,7 @@ import {
 } from '@chakra-ui/react';
 
 import {useRef} from 'react'
-import {deleteCustomer} from "../../services/client.js";
+import {customerProfilePictureUrl, deleteCustomer} from "../../services/client.js";
 import {errorNotification, successNotification} from "../../services/notification.js";
 import UpdateCustomerDrawer from "./UpdateCustomerDrawer.jsx";
 
@@ -48,9 +48,7 @@ export default function CardWithImage({id, name, email, age, gender, imageNumber
                 <Flex justify={'center'} mt={-12}>
                     <Avatar
                         size={'xl'}
-                        src={
-                            `https://randomuser.me/api/portraits/${randomUserGender}/${imageNumber}.jpg`
-                        }
+                        src={customerProfilePictureUrl(id)}
                         alt={'Author'}
                         css={{
                             border: '2px solid white',
@@ -137,6 +135,7 @@ export default function CardWithImage({id, name, email, age, gender, imageNumber
                             </AlertDialogOverlay>
                         </AlertDialog>
                     </Stack>
+
                 </Stack>
             </Box>
         </Center>
diff --git a/frontend/react/src/components/customer/UpdateCustomerForm.jsx b/frontend/react/src/components/customer/UpdateCustomerForm.jsx
index 5149729..06a819b 100644
--- a/frontend/react/src/components/customer/UpdateCustomerForm.jsx
+++ b/frontend/react/src/components/customer/UpdateCustomerForm.jsx
@@ -1,8 +1,10 @@
 import {Form, Formik, useField} from 'formik';
 import * as Yup from 'yup';
-import {Alert, AlertIcon, Box, Button, FormLabel, Input, Select, Stack} from "@chakra-ui/react";
-import {updateCustomer} from "../../services/client.js";
-import {successNotification, errorNotification} from "../../services/notification.js";
+import {Alert, AlertIcon, Box, Button, FormLabel, Image, Input, Stack, VStack} from "@chakra-ui/react";
+import {customerProfilePictureUrl, updateCustomer, uploadCustomerProfilePicture} from "../../services/client.js";
+import {errorNotification, successNotification} from "../../services/notification.js";
+import {useCallback} from "react";
+import {useDropzone} from "react-dropzone";
 
 const MyTextInput = ({label, ...props}) => {
     // useField() returns [formik.getFieldProps(), formik.getFieldMeta()]
@@ -23,10 +25,58 @@ const MyTextInput = ({label, ...props}) => {
     );
 };
 
+const MyDropzone = ({ customerId, fetchCustomers }) => {
+    const onDrop = useCallback(acceptedFiles => {
+        const formData = new FormData();
+        formData.append("file", acceptedFiles[0])
+
+        uploadCustomerProfilePicture(
+            customerId,
+            formData
+        ).then(() => {
+            successNotification("Success", "Profile picture uploaded")
+            fetchCustomers()
+        }).catch(() => {
+            errorNotification("Error", "Profile picture failed upload")
+        })
+    }, [])
+    const {getRootProps, getInputProps, isDragActive} = useDropzone({onDrop})
+
+    return (
+        <Box {...getRootProps()}
+             w={'100%'}
+             textAlign={'center'}
+             border={'dashed'}
+             borderColor={'gray.200'}
+             borderRadius={'3xl'}
+             p={6}
+             rounded={'md'}>
+            <input {...getInputProps()} />
+            {
+                isDragActive ?
+                    <p>Drop the picture here ...</p> :
+                    <p>Drag 'n' drop picture here, or click to select picture</p>
+            }
+        </Box>
+    )
+}
+
 // And now we can use these
-const UpdateCustomerForm = ({ fetchCustomers, initialValues, customerId }) => {
+const UpdateCustomerForm = ({fetchCustomers, initialValues, customerId}) => {
     return (
         <>
+            <VStack spacing={'5'} mb={'5'}>
+                <Image
+                    borderRadius={'full'}
+                    boxSize={'150px'}
+                    objectFit={'cover'}
+                    src={customerProfilePictureUrl(customerId)}
+                />
+                <MyDropzone
+                    customerId={customerId}
+                    fetchCustomers={fetchCustomers}
+                />
+            </VStack>
             <Formik
                 initialValues={initialValues}
                 validationSchema={Yup.object({
@@ -52,13 +102,13 @@ const UpdateCustomerForm = ({ fetchCustomers, initialValues, customerId }) => {
                             )
                             fetchCustomers();
                         }).catch(err => {
-                            console.log(err);
-                            errorNotification(
-                                err.code,
-                                err.response.data.message
-                            )
+                        console.log(err);
+                        errorNotification(
+                            err.code,
+                            err.response.data.message
+                        )
                     }).finally(() => {
-                         setSubmitting(false);
+                        setSubmitting(false);
                     })
                 }}
             >
diff --git a/frontend/react/src/components/login/Login.jsx b/frontend/react/src/components/login/Login.jsx
index fcfc4c0..3aa161b 100644
--- a/frontend/react/src/components/login/Login.jsx
+++ b/frontend/react/src/components/login/Login.jsx
@@ -101,6 +101,7 @@ const LoginForm = () => {
 }
 
 const Login = () => {
+
     const { customer } = useAuth();
     const navigate = useNavigate();
 
@@ -114,12 +115,6 @@ const Login = () => {
         <Stack minH={'100vh'} direction={{base: 'column', md: 'row'}}>
             <Flex p={8} flex={1} alignItems={'center'} justifyContent={'center'}>
                 <Stack spacing={4} w={'full'} maxW={'md'}>
-                    <Image
-                        src={"https://user-images.githubusercontent.com/40702606/210880158-e7d698c2-b19a-4057-b415-09f48a746753.png"}
-                        boxSize={"200px"}
-                        alt={"Amigoscode Logo"}
-                        alignSelf={"center"}
-                    />
                     <Heading fontSize={'2xl'} mb={15}>Sign in to your account</Heading>
                     <LoginForm/>
                     <Link color={"blue.500"} href={"/signup"}>
@@ -136,17 +131,11 @@ const Login = () => {
                 bgGradient={{sm: 'linear(to-r, blue.600, purple.600)'}}
             >
                 <Text fontSize={"6xl"} color={'white'} fontWeight={"bold"} mb={5}>
-                    <Link target={"_blank"} href={"https://amigoscode.com/courses"}>
-                        Enrol Now
+                    Welcome to my portfolio! Check out my&nbsp;
+                    <Link target={"_blank"} color={'greenyellow'} href={"https://www.linkedin.com/in/haris-kurspahic-331655137/"}>
+                        LinkedIn page.
                     </Link>
                 </Text>
-                <Image
-                    alt={'Login Image'}
-                    objectFit={'scale-down'}
-                    src={
-                        'https://user-images.githubusercontent.com/40702606/215539167-d7006790-b880-4929-83fb-c43fa74f429e.png'
-                    }
-                />
             </Flex>
         </Stack>
     );
diff --git a/frontend/react/src/components/shared/SideBar.jsx b/frontend/react/src/components/shared/SideBar.jsx
index e92b4c9..ee30e2f 100644
--- a/frontend/react/src/components/shared/SideBar.jsx
+++ b/frontend/react/src/components/shared/SideBar.jsx
@@ -31,6 +31,7 @@ import {
     FiUsers
 } from 'react-icons/fi';
 import {useAuth} from "../context/AuthContext.jsx";
+import {customerProfilePictureUrl} from "../../services/client.js";
 
 const LinkItems = [
     {name: 'Home', route: '/dashboard', icon: FiHome},
@@ -82,12 +83,6 @@ const SidebarContent = ({onClose, ...rest}) => {
                 <Text fontSize="2xl" fontFamily="monospace" fontWeight="bold" mb={5}>
                     Dashboard
                 </Text>
-                <Image
-                    borderRadius='full'
-                    boxSize='75px'
-                    src='https://user-images.githubusercontent.com/40702606/210880158-e7d698c2-b19a-4057-b415-09f48a746753.png'
-                    alt='Amigoscode'
-                />
                 <CloseButton display={{base: 'flex', md: 'none'}} onClick={onClose}/>
             </Flex>
             {LinkItems.map((link) => (
@@ -176,7 +171,7 @@ const MobileNav = ({onOpen, ...rest}) => {
                                 <Avatar
                                     size={'sm'}
                                     src={
-                                        'https://images.unsplash.com/photo-1619946794135-5bc917a27793?ixlib=rb-0.3.5&q=80&fm=jpg&crop=faces&fit=crop&h=200&w=200&s=b616b2c5b373a80ffc9636ba24f7a4a9'
+                                        customerProfilePictureUrl(customer?.id)
                                     }
                                 />
                                 <VStack
diff --git a/frontend/react/src/components/signup/Signup.jsx b/frontend/react/src/components/signup/Signup.jsx
index 622190e..78e0d6b 100644
--- a/frontend/react/src/components/signup/Signup.jsx
+++ b/frontend/react/src/components/signup/Signup.jsx
@@ -18,12 +18,6 @@ const Signup = () => {
         <Stack minH={'100vh'} direction={{base: 'column', md: 'row'}}>
             <Flex p={8} flex={1} alignItems={'center'} justifyContent={'center'}>
                 <Stack spacing={4} w={'full'} maxW={'md'}>
-                    <Image
-                        src={"https://user-images.githubusercontent.com/40702606/210880158-e7d698c2-b19a-4057-b415-09f48a746753.png"}
-                        boxSize={"200px"}
-                        alt={"Amigoscode Logo"}
-                        alignSelf={"center"}
-                    />
                     <Heading fontSize={'2xl'} mb={15}>Register for an account</Heading>
                     <CreateCustomerForm onSuccess={(token) => {
                         localStorage.setItem("access_token", token)
@@ -44,17 +38,11 @@ const Signup = () => {
                 bgGradient={{sm: 'linear(to-r, blue.600, purple.600)'}}
             >
                 <Text fontSize={"6xl"} color={'white'} fontWeight={"bold"} mb={5}>
-                    <Link target={"_blank"} href={"https://amigoscode.com/courses"}>
-                        Enrol Now
+                    Welcome to my portfolio! Check out my&nbsp;
+                    <Link target={"_blank"} color={'greenyellow'} href={"https://www.linkedin.com/in/haris-kurspahic-331655137/"}>
+                        LinkedIn page.
                     </Link>
                 </Text>
-                <Image
-                    alt={'Login Image'}
-                    objectFit={'scale-down'}
-                    src={
-                        'https://user-images.githubusercontent.com/40702606/215539167-d7006790-b880-4929-83fb-c43fa74f429e.png'
-                    }
-                />
             </Flex>
         </Stack>
     );
diff --git a/frontend/react/src/index.css b/frontend/react/src/index.css
index e69de29..8b13789 100644
--- a/frontend/react/src/index.css
+++ b/frontend/react/src/index.css
@@ -0,0 +1 @@
+
diff --git a/frontend/react/src/main.jsx b/frontend/react/src/main.jsx
index bfd3c31..1e72769 100644
--- a/frontend/react/src/main.jsx
+++ b/frontend/react/src/main.jsx
@@ -23,11 +23,11 @@ const router = createBrowserRouter([
         element: <Signup />
     },
     {
-        path: "/dashboard",
+        path: "dashboard",
         element: <ProtectedRoute><Home/></ProtectedRoute>
     },
     {
-        path: "/dashboard/customers",
+        path: "dashboard/customers",
         element: <ProtectedRoute><Customer /></ProtectedRoute>
     }
 ])
diff --git a/frontend/react/src/services/client.js b/frontend/react/src/services/client.js
index 799cae5..46a47a3 100644
--- a/frontend/react/src/services/client.js
+++ b/frontend/react/src/services/client.js
@@ -60,4 +60,22 @@ export const login = async (usernameAndPassword) => {
     } catch (e) {
         throw e;
     }
-}
\ No newline at end of file
+}
+
+export const uploadCustomerProfilePicture = async (id, formData) => {
+    try {
+        return axios.post(
+            `${import.meta.env.VITE_API_BASE_URL}/api/v1/customers/${id}/profile-image`,
+            formData,
+            {
+                ...getAuthConfig(),
+                'Content-Type' : 'multipart/form-data'
+            }
+        );
+    } catch (e) {
+        throw e;
+    }
+}
+
+export const customerProfilePictureUrl = (id) =>
+    `${import.meta.env.VITE_API_BASE_URL}/api/v1/customers/${id}/profile-image`;

From 619671a066f509793ca476154ac5567e21322bd4 Mon Sep 17 00:00:00 2001
From: Haris Kurspahic <haris.kurspahic@moonshiner.at>
Date: Thu, 23 Nov 2023 11:41:35 +0100
Subject: [PATCH 2/2] npm install fix

---
 frontend/react/package-lock.json | 59 ++++++++++++++++++++++++++++++++
 frontend/react/package.json      |  1 +
 2 files changed, 60 insertions(+)

diff --git a/frontend/react/package-lock.json b/frontend/react/package-lock.json
index 8a9efda..2505211 100644
--- a/frontend/react/package-lock.json
+++ b/frontend/react/package-lock.json
@@ -18,6 +18,7 @@
         "jwt-decode": "^4.0.0",
         "react": "^18.2.0",
         "react-dom": "^18.2.0",
+        "react-dropzone": "^14.2.3",
         "react-icons": "^4.11.0",
         "react-router-dom": "^6.8.0",
         "yup": "^1.3.2"
@@ -2582,6 +2583,14 @@
       "resolved": "https://registry.npmjs.org/asynckit/-/asynckit-0.4.0.tgz",
       "integrity": "sha512-Oei9OH4tRh0YqU3GxhX79dM/mwVgvbZJaSNaRk+bshkj0S5cfHcgYakreBjrHwatXKbz+IoIdYLxrKim2MjW0Q=="
     },
+    "node_modules/attr-accept": {
+      "version": "2.2.2",
+      "resolved": "https://registry.npmjs.org/attr-accept/-/attr-accept-2.2.2.tgz",
+      "integrity": "sha512-7prDjvt9HmqiZ0cl5CRjtS84sEyhsHP2coDkaZKRKVfCDo9s7iw7ChVmar78Gu9pC4SoR/28wFu/G5JJhTnqEg==",
+      "engines": {
+        "node": ">=4"
+      }
+    },
     "node_modules/available-typed-arrays": {
       "version": "1.0.5",
       "resolved": "https://registry.npmjs.org/available-typed-arrays/-/available-typed-arrays-1.0.5.tgz",
@@ -3444,6 +3453,17 @@
         "node": "^10.12.0 || >=12.0.0"
       }
     },
+    "node_modules/file-selector": {
+      "version": "0.6.0",
+      "resolved": "https://registry.npmjs.org/file-selector/-/file-selector-0.6.0.tgz",
+      "integrity": "sha512-QlZ5yJC0VxHxQQsQhXvBaC7VRJ2uaxTf+Tfpu4Z/OcVQJVpZO+DGU0rkoVW5ce2SccxugvpBJoMvUs59iILYdw==",
+      "dependencies": {
+        "tslib": "^2.4.0"
+      },
+      "engines": {
+        "node": ">= 12"
+      }
+    },
     "node_modules/find-root": {
       "version": "1.1.0",
       "resolved": "https://registry.npmjs.org/find-root/-/find-root-1.1.0.tgz",
@@ -4878,6 +4898,22 @@
         "react": "^18.2.0"
       }
     },
+    "node_modules/react-dropzone": {
+      "version": "14.2.3",
+      "resolved": "https://registry.npmjs.org/react-dropzone/-/react-dropzone-14.2.3.tgz",
+      "integrity": "sha512-O3om8I+PkFKbxCukfIR3QAGftYXDZfOE2N1mr/7qebQJHs7U+/RSL/9xomJNpRg9kM5h9soQSdf0Gc7OHF5Fug==",
+      "dependencies": {
+        "attr-accept": "^2.2.2",
+        "file-selector": "^0.6.0",
+        "prop-types": "^15.8.1"
+      },
+      "engines": {
+        "node": ">= 10.13"
+      },
+      "peerDependencies": {
+        "react": ">= 16.8 || 18.0.0"
+      }
+    },
     "node_modules/react-fast-compare": {
       "version": "3.2.2",
       "resolved": "https://registry.npmjs.org/react-fast-compare/-/react-fast-compare-3.2.2.tgz",
@@ -7677,6 +7713,11 @@
       "resolved": "https://registry.npmjs.org/asynckit/-/asynckit-0.4.0.tgz",
       "integrity": "sha512-Oei9OH4tRh0YqU3GxhX79dM/mwVgvbZJaSNaRk+bshkj0S5cfHcgYakreBjrHwatXKbz+IoIdYLxrKim2MjW0Q=="
     },
+    "attr-accept": {
+      "version": "2.2.2",
+      "resolved": "https://registry.npmjs.org/attr-accept/-/attr-accept-2.2.2.tgz",
+      "integrity": "sha512-7prDjvt9HmqiZ0cl5CRjtS84sEyhsHP2coDkaZKRKVfCDo9s7iw7ChVmar78Gu9pC4SoR/28wFu/G5JJhTnqEg=="
+    },
     "available-typed-arrays": {
       "version": "1.0.5",
       "resolved": "https://registry.npmjs.org/available-typed-arrays/-/available-typed-arrays-1.0.5.tgz",
@@ -8332,6 +8373,14 @@
         "flat-cache": "^3.0.4"
       }
     },
+    "file-selector": {
+      "version": "0.6.0",
+      "resolved": "https://registry.npmjs.org/file-selector/-/file-selector-0.6.0.tgz",
+      "integrity": "sha512-QlZ5yJC0VxHxQQsQhXvBaC7VRJ2uaxTf+Tfpu4Z/OcVQJVpZO+DGU0rkoVW5ce2SccxugvpBJoMvUs59iILYdw==",
+      "requires": {
+        "tslib": "^2.4.0"
+      }
+    },
     "find-root": {
       "version": "1.1.0",
       "resolved": "https://registry.npmjs.org/find-root/-/find-root-1.1.0.tgz",
@@ -9346,6 +9395,16 @@
         "scheduler": "^0.23.0"
       }
     },
+    "react-dropzone": {
+      "version": "14.2.3",
+      "resolved": "https://registry.npmjs.org/react-dropzone/-/react-dropzone-14.2.3.tgz",
+      "integrity": "sha512-O3om8I+PkFKbxCukfIR3QAGftYXDZfOE2N1mr/7qebQJHs7U+/RSL/9xomJNpRg9kM5h9soQSdf0Gc7OHF5Fug==",
+      "requires": {
+        "attr-accept": "^2.2.2",
+        "file-selector": "^0.6.0",
+        "prop-types": "^15.8.1"
+      }
+    },
     "react-fast-compare": {
       "version": "3.2.2",
       "resolved": "https://registry.npmjs.org/react-fast-compare/-/react-fast-compare-3.2.2.tgz",
diff --git a/frontend/react/package.json b/frontend/react/package.json
index 0a25ca0..4860436 100644
--- a/frontend/react/package.json
+++ b/frontend/react/package.json
@@ -20,6 +20,7 @@
     "jwt-decode": "^4.0.0",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
+    "react-dropzone": "^14.2.3",
     "react-icons": "^4.11.0",
     "react-router-dom": "^6.8.0",
     "yup": "^1.3.2"