Merge pull request #36 from kursph/fix/fe-image-changew

fe changes regarding refactor
kursph · Nov 23, 2023 · 5d8e105 · 5d8e105
2 parents 4f311de + 619671a
commit 5d8e105
Show file tree

Hide file tree

Showing 13 changed files with 156 additions and 55 deletions.
diff --git a/frontend/react/package-lock.json b/frontend/react/package-lock.json
diff --git 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"

diff --git 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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -0,0 +1 @@
+
diff --git 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>
     }
 ])