styling

stevensblueprint · Apr 29, 2024 · a2b79e1 · a2b79e1
1 parent f974c0a
commit a2b79e1
Show file tree

Hide file tree

Showing 28 changed files with 233 additions and 224 deletions.
diff --git a/src/api/apiClient.tsx b/src/api/apiClient.tsx
@@ -5,7 +5,7 @@ import axios, {
 } from 'axios'
 
 const apiClient = axios.create({
-  baseURL: 'https://auth.api.sitblueprint.com/api/v1',
+  baseURL: 'https://localhost:8080/api/v1',
   headers: {
     Accept: 'application/json',
     'Content-type': 'application/json'

diff --git a/src/api/lib/users.tsx b/src/api/lib/users.tsx
@@ -3,14 +3,15 @@ import request from '../apiClient'
 import type { User } from '../../types/index'
 
 const API_NAME = 'Blueprint Backend API'
-const BASE = '/users/'
+const BASE = '/user/'
 
 export const getAllUsers = async (): Promise<AxiosResponse> => {
   try {
     const response = await request('GET', BASE + 'all')
     return response
   } catch (error) {
     if (error instanceof AxiosError) {
+      console.log('error', error)
       console.error(
         `${API_NAME} Error: ${error.message}`,
         error.response?.data
@@ -19,6 +20,7 @@ export const getAllUsers = async (): Promise<AxiosResponse> => {
         `${API_NAME} Error: ${error.response?.status} ${error.response?.data?.error}`
       )
     }
+    console.error('Unknown Error')
     throw new Error('Unknown Error')
   }
 }

diff --git a/src/components/CreateUserButton.tsx b/src/components/CreateUserButton.tsx
@@ -12,51 +12,51 @@ import {
   Input,
   useDisclosure,
   Alert,
-  AlertIcon
-} from '@chakra-ui/react'
-import React, { useState } from 'react'
+  AlertIcon,
+} from "@chakra-ui/react";
+import React, { useState } from "react";
 
-function CreateUserButton ({
-  setDisplaySuccess
+function CreateUserButton({
+  setDisplaySuccess,
 }: {
-  displaySuccess: boolean
-  setDisplaySuccess: React.Dispatch<React.SetStateAction<boolean>>
+  displaySuccess: boolean;
+  setDisplaySuccess: React.Dispatch<React.SetStateAction<boolean>>;
 }): JSX.Element {
-  const { isOpen, onOpen, onClose } = useDisclosure()
-  const initialRef = React.useRef(null)
-  const finalRef = React.useRef(null)
-  const [formData, setFormData] = useState({ email: '', roles: '' })
-  const [displayError, setDisplayError] = useState(false)
+  const { isOpen, onOpen, onClose } = useDisclosure();
+  const initialRef = React.useRef(null);
+  const finalRef = React.useRef(null);
+  const [formData, setFormData] = useState({ email: "", roles: "" });
+  const [displayError, setDisplayError] = useState(false);
 
   const handleChange = (e: React.ChangeEvent<HTMLInputElement>): void => {
-    const { name, value } = e.target
-    setFormData((prev) => ({ ...prev, [name]: value }))
-  }
+    const { name, value } = e.target;
+    setFormData((prev) => ({ ...prev, [name]: value }));
+  };
 
   const handleSubmit = (event: React.MouseEvent<HTMLButtonElement>): void => {
-    event.preventDefault()
-    console.log('Form submitted', formData)
+    event.preventDefault();
+    console.log("Form submitted", formData);
 
     const simulateApiCall = async (): Promise<void> => {
       await new Promise<void>((resolve, reject) => {
-        const apiState = true
+        const apiState = true;
         if (!apiState) {
-          reject(new Error('API call failed'))
+          reject(new Error("API call failed"));
         } else {
-          resolve()
+          resolve();
         }
-      })
-    }
+      });
+    };
     simulateApiCall()
       .then(() => {
-        setDisplaySuccess(true)
-        onClose()
+        setDisplaySuccess(true);
+        onClose();
       })
       .catch((error) => {
-        setDisplayError(true)
-        console.error(error)
-      })
-  }
+        setDisplayError(true);
+        console.error(error);
+      });
+  };
 
   return (
     <>
@@ -113,7 +113,7 @@ function CreateUserButton ({
         </ModalContent>
       </Modal>
     </>
-  )
+  );
 }
 
-export default CreateUserButton
+export default CreateUserButton;
diff --git a/src/components/MetricCard.tsx b/src/components/MetricCard.tsx
@@ -3,21 +3,21 @@ import {
   StatLabel,
   StatNumber,
   StatHelpText,
-  StatArrow
-} from '@chakra-ui/react'
+  StatArrow,
+} from "@chakra-ui/react";
 
 interface MetricCardProps {
-  label: string
-  statistic: string | number
-  changePercentage: string | number
-  change: 'increase' | 'decrease'
+  label: string;
+  statistic: string | number;
+  changePercentage: string | number;
+  change: "increase" | "decrease";
 }
 
-function MetricCard ({
+function MetricCard({
   label,
   statistic,
   changePercentage,
-  change
+  change,
 }: MetricCardProps): JSX.Element {
   return (
     <Stat>
@@ -28,7 +28,7 @@ function MetricCard ({
         {changePercentage.toLocaleString()}
       </StatHelpText>
     </Stat>
-  )
+  );
 }
 
-export default MetricCard
+export default MetricCard;
diff --git a/src/components/Sidebar.tsx b/src/components/Sidebar.tsx
@@ -1,5 +1,5 @@
-import { useState } from 'react'
-import { Link as ReactRouterLink } from 'react-router-dom'
+import { useState } from "react";
+import { Link as ReactRouterLink } from "react-router-dom";
 import {
   Box,
   Flex,
@@ -8,24 +8,24 @@ import {
   Button,
   Image,
   Text,
-  Link as ChakraLink
-} from '@chakra-ui/react'
-import { motion } from 'framer-motion'
-import HomeIcon from './icons/HomeIcon'
-import DashboardIcon from './icons/Dashboard'
-import BlogIcon from './icons/BlogIcon'
-import ExpandIcon from './icons/ExpandIcon'
-import Logo from '../assets/images/logo_negative.png'
+  Link as ChakraLink,
+} from "@chakra-ui/react";
+import { motion } from "framer-motion";
+import HomeIcon from "./icons/HomeIcon";
+import DashboardIcon from "./icons/Dashboard";
+import BlogIcon from "./icons/BlogIcon";
+import ExpandIcon from "./icons/ExpandIcon";
+import Logo from "../assets/images/logo_negative.png";
 
-function Sidebar (): JSX.Element {
-  const [hidden, setHidden] = useState(false)
+function Sidebar(): JSX.Element {
+  const [hidden, setHidden] = useState(false);
 
   return (
     <Flex width="fit-content" height="100%" position="relative">
       <motion.nav
         initial={hidden}
-        animate={{ width: hidden ? 0 : '300px' }}
-        transition={{ ease: 'easeOut', duration: 0.3 }}
+        animate={{ width: hidden ? 0 : "300px" }}
+        transition={{ ease: "easeOut", duration: 0.3 }}
       >
         <Flex
           height="100%"
@@ -48,7 +48,7 @@ function Sidebar (): JSX.Element {
               <ChakraLink
                 as={ReactRouterLink}
                 to="/"
-                _hover={{ textDecoration: 'none' }}
+                _hover={{ textDecoration: "none" }}
               >
                 <Button
                   leftIcon={<HomeIcon />}
@@ -66,7 +66,7 @@ function Sidebar (): JSX.Element {
               <ChakraLink
                 as={ReactRouterLink}
                 to="/dashboard"
-                _hover={{ textDecoration: 'none' }}
+                _hover={{ textDecoration: "none" }}
               >
                 <Button
                   leftIcon={<DashboardIcon />}
@@ -84,7 +84,7 @@ function Sidebar (): JSX.Element {
               <ChakraLink
                 as={ReactRouterLink}
                 to="/blog"
-                _hover={{ textDecoration: 'none' }}
+                _hover={{ textDecoration: "none" }}
               >
                 <Button
                   leftIcon={<BlogIcon />}
@@ -105,7 +105,7 @@ function Sidebar (): JSX.Element {
       </motion.nav>
       <Button
         onClick={() => {
-          setHidden(!hidden)
+          setHidden(!hidden);
         }}
         leftIcon={<ExpandIcon />}
         colorScheme="none"
@@ -115,7 +115,7 @@ function Sidebar (): JSX.Element {
         right="-50px"
       ></Button>
     </Flex>
-  )
+  );
 }
 
-export default Sidebar
+export default Sidebar;
diff --git a/src/components/TableDashboard.tsx b/src/components/TableDashboard.tsx
@@ -1,8 +1,8 @@
-import { Table, Thead, Tbody, Tr, Th, TableContainer } from '@chakra-ui/react'
-import { type User } from '../types/index'
-import React from 'react'
+import { Table, Thead, Tbody, Tr, Th, TableContainer } from "@chakra-ui/react";
+import { type User } from "../types/index";
+import React from "react";
 
-function TableDashboard ({ members }: { members: User[] }): JSX.Element {
+function TableDashboard({ members }: { members: User[] }): JSX.Element {
   return (
     <TableContainer>
       <Table variant="simple" size="md">
@@ -17,25 +17,25 @@ function TableDashboard ({ members }: { members: User[] }): JSX.Element {
         <Tbody>
           {members
             .sort((a: User, b: User) => {
-              return a.name.localeCompare(b.name)
+              return a.name.localeCompare(b.name);
             })
             .filter((user: User) => !user.isEnabled)
             .map(
               (
-                { name, email, isEnabled }: User // Add type annotation for User
+                { name, email, isEnabled }: User, // Add type annotation for User
               ) => (
                 <Tr key={email}>
                   <Th>{name}</Th>
                   <Th>{email}</Th>
                   <Th></Th>
-                  <Th>{isEnabled ? 'Active' : 'Inactive'}</Th>
+                  <Th>{isEnabled ? "Active" : "Inactive"}</Th>
                 </Tr>
-              )
+              ),
             )}
         </Tbody>
       </Table>
     </TableContainer>
-  )
+  );
 }
 
-export default TableDashboard
+export default TableDashboard;
diff --git a/src/components/UserCard.tsx b/src/components/UserCard.tsx
@@ -1,5 +1,5 @@
-function UserCard (): JSX.Element {
-  return <div></div>
+function UserCard(): JSX.Element {
+  return <div></div>;
 }
 
-export default UserCard
+export default UserCard;
diff --git a/src/components/icons/BlogIcon.tsx b/src/components/icons/BlogIcon.tsx
@@ -1,6 +1,6 @@
-import { Icon } from '@chakra-ui/react'
+import { Icon } from "@chakra-ui/react";
 
-function BlogIcon (): JSX.Element {
+function BlogIcon(): JSX.Element {
   return (
     <Icon
       fill="none"
@@ -14,7 +14,7 @@ function BlogIcon (): JSX.Element {
         d="M20.25 8.511c.884.284 1.5 1.128 1.5 2.097v4.286c0 1.136-.847 2.1-1.98 2.193-.34.027-.68.052-1.02.072v3.091l-3-3c-1.354 0-2.694-.055-4.02-.163a2.115 2.115 0 0 1-.825-.242m9.345-8.334a2.126 2.126 0 0 0-.476-.095 48.64 48.64 0 0 0-8.048 0c-1.131.094-1.976 1.057-1.976 2.192v4.286c0 .837.46 1.58 1.155 1.951m9.345-8.334V6.637c0-1.621-1.152-3.026-2.76-3.235A48.455 48.455 0 0 0 11.25 3c-2.115 0-4.198.137-6.24.402-1.608.209-2.76 1.614-2.76 3.235v6.226c0 1.621 1.152 3.026 2.76 3.235.577.075 1.157.14 1.74.194V21l4.155-4.155"
       />
     </Icon>
-  )
+  );
 }
 
-export default BlogIcon
+export default BlogIcon;
diff --git a/src/components/icons/Dashboard.tsx b/src/components/icons/Dashboard.tsx
@@ -1,6 +1,6 @@
-import { Icon } from '@chakra-ui/react'
+import { Icon } from "@chakra-ui/react";
 
-function DashboardIcon (): JSX.Element {
+function DashboardIcon(): JSX.Element {
   return (
     <Icon
       fill="none"
@@ -14,7 +14,7 @@ function DashboardIcon (): JSX.Element {
         d="M4 5a1 1 0 0 1 1-1h4a1 1 0 0 1 1 1v5a1 1 0 0 1-1 1H5a1 1 0 0 1-1-1V5ZM14 5a1 1 0 0 1 1-1h4a1 1 0 0 1 1 1v2a1 1 0 0 1-1 1h-4a1 1 0 0 1-1-1V5ZM4 16a1 1 0 0 1 1-1h4a1 1 0 0 1 1 1v3a1 1 0 0 1-1 1H5a1 1 0 0 1-1-1v-3ZM14 13a1 1 0 0 1 1-1h4a1 1 0 0 1 1 1v6a1 1 0 0 1-1 1h-4a1 1 0 0 1-1-1v-6Z"
       />
     </Icon>
-  )
+  );
 }
 
-export default DashboardIcon
+export default DashboardIcon;
diff --git a/src/components/icons/ExpandIcon.tsx b/src/components/icons/ExpandIcon.tsx
@@ -1,6 +1,6 @@
-import { Icon } from '@chakra-ui/react'
+import { Icon } from "@chakra-ui/react";
 
-function ExpandIcon (): JSX.Element {
+function ExpandIcon(): JSX.Element {
   return (
     <Icon
       fill="none"
@@ -14,7 +14,7 @@ function ExpandIcon (): JSX.Element {
         d="m5.25 4.5 7.5 7.5-7.5 7.5m6-15 7.5 7.5-7.5 7.5"
       />
     </Icon>
-  )
+  );
 }
 
-export default ExpandIcon
+export default ExpandIcon;
diff --git a/src/components/icons/HomeIcon.tsx b/src/components/icons/HomeIcon.tsx
@@ -1,6 +1,6 @@
-import { Icon } from '@chakra-ui/react'
+import { Icon } from "@chakra-ui/react";
 
-function HomeIcon (): JSX.Element {
+function HomeIcon(): JSX.Element {
   return (
     <Icon
       fill="none"
@@ -14,7 +14,7 @@ function HomeIcon (): JSX.Element {
         d="m2.25 12 8.954-8.955c.44-.439 1.152-.439 1.591 0L21.75 12M4.5 9.75v10.125c0 .621.504 1.125 1.125 1.125H9.75v-4.875c0-.621.504-1.125 1.125-1.125h2.25c.621 0 1.125.504 1.125 1.125V21h4.125c.621 0 1.125-.504 1.125-1.125V9.75M8.25 21h8.25"
       />
     </Icon>
-  )
+  );
 }
 
-export default HomeIcon
+export default HomeIcon;