frontend update

.gitignore

@@ -20,6 +20,8 @@ dist
 dist-ssr
 *.local
 
+frontend/.env
+
 # Editor directories and files
 .vscode/*
 !.vscode/extensions.json

backend/target/classes/application.yaml

@@ -3,6 +3,10 @@ server:
   error:
     include-message: always
 
+cors:
+  allowed-origins: "*"
+  allowed-methods: "*"
+
 spring:
   datasource:
     url:

frontend/react/src/App.jsx

@@ -1,25 +1,60 @@
-import { useEffect } from 'react'
+import { useEffect, useState } from "react";
 
-import SidebarWithHeader from './shared/Sidebar'
-import { getCustomers } from './services/client'
+import SidebarWithHeader from "./components/shared/Sidebar";
+import { getCustomers } from "./services/client";
+import { Spinner } from "@chakra-ui/react";
+import { Wrap, WrapItem } from '@chakra-ui/react'
+import SocialProfileWithImage from "./components/shared/CustomerCard";
 
 function App() {
+  const [customers, setCustomers] = useState([]);
+  const [loading, setLoading] = useState(false);
 
   useEffect(() => {
-    getCustomers().then((res) => {
-      console.log(res)
-    })
-    .catch((e) => {
-      console.log(e)
-    })
-  }, [])
+    setLoading(true);
+
+    getCustomers()
+      .then((res) => {
+        console.log(res);
+        setCustomers(res.data);
+      })
+      .catch((e) => {
+        console.log(e);
+      })
+      .then(() => {
+        setLoading(false);
+      });
+  }, []);
 
   return (
     <>
       <SidebarWithHeader>
+        {customers.length === 0 && loading ? (
+          <Spinner
+            thickness="4px"
+            speed="0.65s"
+            emptyColor="gray.200"
+            color="blue.500"
+            size="xl"
+          />
+        ) : (
+          <>
+            <Wrap spacing='30px' justify='center'>
+            {customers.map((customer) => (
+              <WrapItem key={customer.id}>
+                <SocialProfileWithImage
+                  name={customer.name}
+                  email={customer.email}
+                  age={customer.age}
+                />
+              </WrapItem>
+            ))}
+            </Wrap>
+          </>
+        )}
       </SidebarWithHeader>
     </>
-  )
+  );
 }
 
-export default App
+export default App;

frontend/react/src/UserProfile.jsx

@@ -0,0 +1,9 @@
+function UserProfile() {
+  return (
+    <div>
+        UserProfile
+    </div>
+  )
+}
+
+export default UserProfile

frontend/react/src/components/shared/CustomerCard.jsx

@@ -0,0 +1,59 @@
+'use client'
+
+import {
+  Heading,
+  Avatar,
+  Box,
+  Center,
+  Image,
+  Flex,
+  Text,
+  Stack,
+  Button,
+  useColorModeValue,
+} from '@chakra-ui/react'
+
+export default function SocialProfileWithImage({ name, email, age }) {
+  return (
+    <Center py={6}>
+      <Box
+        maxW={'270px'}
+        w={'full'}
+        bg={useColorModeValue('white', 'gray.800')}
+        boxShadow={'2xl'}
+        rounded={'md'}
+        overflow={'hidden'}>
+        <Image
+          h={'120px'}
+          w={'full'}
+          src={
+            'https://images.unsplash.com/photo-1612865547334-09cb8cb455da?ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=634&q=80'
+          }
+          objectFit="cover"
+          alt="#"
+        />
+        <Flex justify={'center'} mt={-12}>
+          <Avatar
+            size={'xl'}
+            src={
+              'https://images.unsplash.com/photo-1500648767791-00dcc994a43e?ixlib=rb-1.2.1&q=80&fm=jpg&crop=faces&fit=crop&h=200&w=200&ixid=eyJhcHBfaWQiOjE3Nzg0fQ'
+            }
+            css={{
+              border: '2px solid white',
+            }}
+          />
+        </Flex>
+
+        <Box p={6}>
+          <Stack spacing={0} align={'center'} mb={5}>
+            <Heading fontSize={'2xl'} fontWeight={500} fontFamily={'body'} textAlign={'center'}>
+              {name}
+            </Heading>
+            <Text color={'gray.500'}>{email}</Text>
+            <Text color={'gray.500'}>{age}</Text>
+          </Stack>
+        </Box>
+      </Box>
+    </Center>
+  )
+}

frontend/react/src/components/shared/Sidebar.jsx

@@ -0,0 +1,212 @@
+'use client'
+
+import {
+  IconButton,
+  Avatar,
+  Box,
+  CloseButton,
+  Flex,
+  HStack,
+  VStack,
+  Icon,
+  useColorModeValue,
+  Text,
+  Drawer,
+  DrawerContent,
+  useDisclosure,
+  Menu,
+  MenuButton,
+  MenuDivider,
+  MenuItem,
+  MenuList,
+} from '@chakra-ui/react'
+import {
+  FiHome,
+  FiTrendingUp,
+  FiCompass,
+  FiStar,
+  FiSettings,
+  FiMenu,
+  FiBell,
+  FiChevronDown,
+} from 'react-icons/fi'
+
+import { Image } from '@chakra-ui/react'
+
+const LinkItems = [
+  { name: 'Home', icon: FiHome },
+  { name: 'Trending', icon: FiTrendingUp },
+  { name: 'Explore', icon: FiCompass },
+  { name: 'Favourites', icon: FiStar },
+  { name: 'Settings', icon: FiSettings },
+]
+
+const SidebarContent = ({ onClose, ...rest }) => {
+  return (
+    <Box
+      transition="3s ease"
+      bg={useColorModeValue('white', 'gray.900')}
+      borderRight="1px"
+      borderRightColor={useColorModeValue('gray.200', 'gray.700')}
+      w={{ base: 'full', md: 60 }}
+      pos="fixed"
+      h="full"
+      {...rest}>
+      <Flex h="20" alignItems="center" mx="8" justifyContent="space-between"  mb={75} mt={2}>
+        <Flex h="20" alignItems="center" mx="8" justifyContent="space-between" flexDirection={"column"}>
+          <Image
+            borderRadius='full'
+            boxSize='75px'
+            src='https://avatars.githubusercontent.com/u/56971722?v=4'
+            alt='Dan Abramov'
+            mb={5}
+          />
+          <Text fontSize="2xl" fontFamily="monospace" fontWeight="bold">
+            Dashboard
+          </Text>
+        </Flex>
+        <CloseButton display={{ base: 'flex', md: 'none' }} onClick={onClose} />
+      </Flex>
+      {LinkItems.map((link) => (
+        <NavItem key={link.name} icon={link.icon}>
+          {link.name}
+        </NavItem>
+      ))}
+    </Box>
+  )
+}
+
+const NavItem = ({ icon, children, ...rest }) => {
+  return (
+    <Box
+      as="a"
+      href="#"
+      style={{ textDecoration: 'none' }}
+      _focus={{ boxShadow: 'none' }}>
+      <Flex
+        align="center"
+        p="4"
+        mx="4"
+        borderRadius="lg"
+        role="group"
+        cursor="pointer"
+        _hover={{
+          bg: 'cyan.400',
+          color: 'white',
+        }}
+        {...rest}>
+        {icon && (
+          <Icon
+            mr="4"
+            fontSize="16"
+            _groupHover={{
+              color: 'white',
+            }}
+            as={icon}
+          />
+        )}
+        {children}
+      </Flex>
+    </Box>
+  )
+}
+
+const MobileNav = ({ onOpen, ...rest }) => {
+  return (
+    <Flex
+      ml={{ base: 0, md: 60 }}
+      px={{ base: 4, md: 4 }}
+      height="20"
+      alignItems="center"
+      bg={useColorModeValue('white', 'gray.900')}
+      borderBottomWidth="1px"
+      borderBottomColor={useColorModeValue('gray.200', 'gray.700')}
+      justifyContent={{ base: 'space-between', md: 'flex-end' }}
+      {...rest}>
+      <IconButton
+        display={{ base: 'flex', md: 'none' }}
+        onClick={onOpen}
+        variant="outline"
+        aria-label="open menu"
+        icon={<FiMenu />}
+      />
+
+      <Text
+        display={{ base: 'flex', md: 'none' }}
+        fontSize="2xl"
+        fontFamily="monospace"
+        fontWeight="bold">
+        Logo
+      </Text>
+
+      <HStack spacing={{ base: '0', md: '6' }}>
+        <IconButton size="lg" variant="ghost" aria-label="open menu" icon={<FiBell />} />
+        <Flex alignItems={'center'}>
+          <Menu>
+            <MenuButton py={2} transition="all 0.3s" _focus={{ boxShadow: 'none' }}>
+              <HStack>
+                <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'
+                  }
+                />
+                <VStack
+                  display={{ base: 'none', md: 'flex' }}
+                  alignItems="flex-start"
+                  spacing="1px"
+                  ml="2">
+                  <Text fontSize="sm">Justina Clark</Text>
+                  <Text fontSize="xs" color="gray.600">
+                    Admin
+                  </Text>
+                </VStack>
+                <Box display={{ base: 'none', md: 'flex' }}>
+                  <FiChevronDown />
+                </Box>
+              </HStack>
+            </MenuButton>
+            <MenuList
+              bg={useColorModeValue('white', 'gray.900')}
+              borderColor={useColorModeValue('gray.200', 'gray.700')}>
+              <MenuItem>Profile</MenuItem>
+              <MenuItem>Settings</MenuItem>
+              <MenuItem>Billing</MenuItem>
+              <MenuDivider />
+              <MenuItem>Sign out</MenuItem>
+            </MenuList>
+          </Menu>
+        </Flex>
+      </HStack>
+    </Flex>
+  )
+}
+
+const SidebarWithHeader = ({...props}) => {
+  const { isOpen, onOpen, onClose } = useDisclosure()
+
+  return (
+    <Box minH="100vh" bg={useColorModeValue('gray.100', 'gray.900')}>
+      <SidebarContent onClose={() => onClose} display={{ base: 'none', md: 'block' }} />
+      <Drawer
+        isOpen={isOpen}
+        placement="left"
+        onClose={onClose}
+        returnFocusOnClose={false}
+        onOverlayClick={onClose}
+        size="full">
+        <DrawerContent>
+          <SidebarContent onClose={onClose} />
+        </DrawerContent>
+      </Drawer>
+      {/* mobilenav */}
+      <MobileNav onOpen={onOpen} />
+      <Box ml={{ base: 0, md: 60 }} p="4">
+        {/* Content */}
+        {props.children}
+      </Box>
+    </Box>
+  )
+}
+
+export default SidebarWithHeader

frontend/react/src/services/client.js

@@ -0,0 +1,10 @@
+import axios from "axios";
+
+export const getCustomers = async() => {
+    try {
+        return await axios.get(`${import.meta.env.VITE_API_BASE_URL}/api/v1/customers`)
+    }
+    catch(e) {
+        throw new Error(e);
+    }
+}