Skip to content

Commit b4a1da9

Browse files
alejsdevtiangolo
alejsdev
and
tiangolo
authored
✨ Add new pages, components, panels, modals, and theme; refactor and improvements in existing components (#593)
Co-authored-by: Sebastián Ramírez <tiangolo@gmail.com>
1 parent 2014a3b commit b4a1da9

20 files changed

+927
-81
lines changed

‎src/new-frontend/src/App.tsx

+47-9
Original file line numberDiff line numberDiff line change
@@ -1,19 +1,57 @@
1-
import { BrowserRouter, Route, Routes } from 'react-router-dom';
1+
import { Route, BrowserRouter as Router, Routes } from 'react-router-dom';
22

33
import Layout from './pages/Layout';
44
import Login from './pages/auth/Login';
55
import RecoverPassword from './pages/auth/RecoverPassword';
6+
import Admin from './pages/main/Admin';
7+
import Dashboard from './pages/main/Dashboard';
8+
import Items from './pages/main/Items';
9+
import Profile from './pages/main/Profile';
10+
import { ChakraProvider, extendTheme } from '@chakra-ui/react';
11+
12+
// Theme
13+
const theme = extendTheme({
14+
colors: {
15+
ui: {
16+
main: "#009688",
17+
secondary: "#EDF2F7",
18+
success: '#48BB78',
19+
danger: '#E53E3E',
20+
}
21+
},
22+
components: {
23+
Tabs: {
24+
variants: {
25+
enclosed: {
26+
tab: {
27+
_selected: {
28+
color: 'ui.main',
29+
},
30+
},
31+
},
32+
},
33+
},
34+
},
35+
});
636

737
function App() {
838
return (
9-
<BrowserRouter>
10-
<Routes>
11-
<Route path="/login" element={<Login />} />
12-
<Route path="/recover-password" element={<RecoverPassword />} />
13-
<Route element={<Layout />}>
14-
</Route>
15-
</Routes>
16-
</BrowserRouter>
39+
<>
40+
<Router>
41+
<ChakraProvider theme={theme}>
42+
<Routes>
43+
<Route path="/login" element={<Login />} />
44+
<Route path="/recover-password" element={<RecoverPassword />} />
45+
<Route element={<Layout />}>
46+
<Route path="/" element={<Dashboard />} />
47+
<Route path="/settings" element={<Profile />} />
48+
<Route path="/items" element={<Items />} />
49+
<Route path="/admin" element={<Admin />} />
50+
</Route>
51+
</Routes>
52+
</ ChakraProvider>
53+
</Router>
54+
</>
1755
)
1856
}
1957

‎src/new-frontend/src/components/ActionsMenu.tsx

+39
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,39 @@
1+
import React from 'react';
2+
3+
import { Button, Menu, MenuButton, MenuItem, MenuList, useDisclosure } from '@chakra-ui/react';
4+
import { BsThreeDotsVertical } from 'react-icons/bs';
5+
import { FiTrash, FiEdit } from 'react-icons/fi';
6+
7+
import Delete from '../pages/modals/DeleteAlert';
8+
import EditUser from '../pages/modals/EditUser';
9+
import EditItem from '../pages/modals/EditItem';
10+
11+
interface ActionsMenuProps {
12+
type: string;
13+
id: number;
14+
}
15+
16+
const ActionsMenu: React.FC<ActionsMenuProps> = ({ type, id }) => {
17+
const editUserModal = useDisclosure();
18+
const deleteModal = useDisclosure();
19+
20+
return (
21+
<>
22+
<Menu>
23+
<MenuButton as={Button} bg="white" rightIcon={<BsThreeDotsVertical />} variant="unstyled">
24+
</MenuButton>
25+
<MenuList>
26+
<MenuItem onClick={editUserModal.onOpen} icon={<FiEdit fontSize="16px" />}>Edit {type}</MenuItem>
27+
<MenuItem onClick={deleteModal.onOpen} icon={<FiTrash fontSize="16px" />} color="ui.danger">Delete {type}</MenuItem>
28+
</MenuList>
29+
{
30+
type === "User" ? <EditUser isOpen={editUserModal.isOpen} onClose={editUserModal.onClose} />
31+
: <EditItem isOpen={editUserModal.isOpen} onClose={editUserModal.onClose} />
32+
}
33+
<Delete type={type} id={id} isOpen={deleteModal.isOpen} onClose={deleteModal.onClose} />
34+
</Menu>
35+
</>
36+
);
37+
};
38+
39+
export default ActionsMenu;

‎src/new-frontend/src/components/Navbar.tsx

+30
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,30 @@
1+
import React from 'react';
2+
3+
import { Button, Flex, Icon, useDisclosure } from '@chakra-ui/react';
4+
import { FaPlus } from "react-icons/fa";
5+
6+
import CreateItem from '../pages/modals/CreateItem';
7+
import CreateUser from '../pages/modals/CreateUser';
8+
9+
interface NavbarProps {
10+
type: string;
11+
}
12+
13+
const Navbar: React.FC<NavbarProps> = ({ type }) => {
14+
const createUserModal = useDisclosure();
15+
const createItemModal = useDisclosure();
16+
17+
return (
18+
<>
19+
<Flex gap={4} py={{ base: "8", md: "4" }} justify={{ base: "center", md: "end" }}>
20+
<Button bg="ui.main" color="white" gap={1} fontSize={{ base: "sm", md: "inherit" }} onClick={type === "User" ? createUserModal.onOpen : createItemModal.onOpen}>
21+
<Icon as={FaPlus} /> Create {type}
22+
</Button>
23+
<CreateUser isOpen={createUserModal.isOpen} onClose={createUserModal.onClose} />
24+
<CreateItem isOpen={createItemModal.isOpen} onClose={createItemModal.onClose} />
25+
</Flex>
26+
</>
27+
);
28+
};
29+
30+
export default Navbar;

‎src/new-frontend/src/components/Sidebar.tsx

+2-2
Original file line numberDiff line numberDiff line change
@@ -17,7 +17,7 @@ const Sidebar: React.FC = () => {
1717
<IconButton onClick={onOpen} display={{ base: 'flex', md: 'none' }} aria-label="Open Menu" position="absolute" fontSize='20px' m={4} icon={<FiMenu />} />
1818
<Drawer isOpen={isOpen} placement="left" onClose={onClose}>
1919
<DrawerOverlay />
20-
<DrawerContent bg="gray.100" maxW="250px">
20+
<DrawerContent bg="ui.secondary" maxW="250px">
2121
<DrawerCloseButton />
2222
<DrawerBody py={8}>
2323
<Flex flexDir="column" justify="space-between" h="100%">
@@ -33,7 +33,7 @@ const Sidebar: React.FC = () => {
3333

3434
{/* Desktop */}
3535
<Box bg="white" p={3} h="100vh" position="sticky" top="0" display={{ base: 'none', md: 'flex' }}>
36-
<Flex flexDir="column" justify="space-between" bg="gray.100" p={6} borderRadius={12}>
36+
<Flex flexDir="column" justify="space-between" bg="ui.secondary" p={6} borderRadius={12}>
3737
<Box>
3838
<Image src={Logo} alt="Logo" w="180px" maxW="2xs" />
3939
<SidebarItems />

‎src/new-frontend/src/components/SidebarItems.tsx

+16-6
Original file line numberDiff line numberDiff line change
@@ -1,14 +1,15 @@
11
import React from 'react';
22

33
import { Flex, Icon, Text } from '@chakra-ui/react';
4-
import { FiBriefcase, FiHome, FiLogOut, FiUser, FiUsers } from 'react-icons/fi';
5-
import { Link } from 'react-router-dom';
4+
import { FiBriefcase, FiHome, FiLogOut, FiSettings, FiUsers } from 'react-icons/fi';
5+
import { Link, useNavigate } from 'react-router-dom';
6+
67

78
const items = [
89
{ icon: FiHome, title: 'Dashboard', path: "/" },
9-
{ icon: FiUser, title: 'Profile', path: "/profile" },
1010
{ icon: FiBriefcase, title: 'Items', path: "/items" },
1111
{ icon: FiUsers, title: 'Admin', path: "/admin" },
12+
{ icon: FiSettings, title: 'User Settings', path: "/settings" },
1213
{ icon: FiLogOut, title: 'Log out' }
1314
];
1415

@@ -17,15 +18,24 @@ interface SidebarItemsProps {
1718
}
1819

1920
const SidebarItems: React.FC<SidebarItemsProps> = ({ onClose }) => {
21+
const navigate = useNavigate();
22+
23+
const handleLogout = async () => {
24+
localStorage.removeItem("access_token");
25+
navigate("/login");
26+
// TODO: reset all Zustand states
27+
};
28+
2029
const listItems = items.map((item) => (
2130
<Flex w="100%" p={2} key={item.title} _hover={{
2231
background: "gray.200",
2332
borderRadius: "12px",
24-
}} onClick={onClose}>
33+
}} onClick={item.title === 'Log out' ? handleLogout : onClose}>
2534
<Link to={item.path || "/"}>
26-
<Flex color="teal.500" gap={4}>
27-
<Icon as={item.icon} alignSelf="center" />
35+
<Flex gap={4}>
36+
<Icon color="ui.main" as={item.icon} alignSelf="center" />
2837
<Text>{item.title}</Text>
38+
2939
</Flex>
3040
</Link>
3141
</Flex>

‎src/new-frontend/src/components/UserInfo.tsx

+8-19
Original file line numberDiff line numberDiff line change
@@ -1,33 +1,22 @@
1-
import React, { useEffect, useState } from 'react';
1+
import React from 'react';
22

33
import { Avatar, Flex, Skeleton, Text } from '@chakra-ui/react';
44
import { FaUserAstronaut } from 'react-icons/fa';
55

6-
import { UserOut, UsersService } from '../client';
6+
import { useUserStore } from '../store/user-store';
77

8-
const UserInfo: React.FC = () => {
9-
const [userData, setUserData] = useState<UserOut>();
108

11-
useEffect(() => {
12-
const fetchUserData = async () => {
13-
try {
14-
const userResponse = await UsersService.readUserMe();
15-
setUserData(userResponse);
16-
} catch (error) {
17-
// TODO: Handle error to give feedback to the user
18-
console.error(error);
19-
}
20-
};
21-
fetchUserData();
22-
}, []);
9+
const UserInfo: React.FC = () => {
10+
const { user } = useUserStore();
11+
2312

2413
return (
2514
<>
26-
{userData ? (
15+
{user ? (
2716
<Flex gap={2} maxW="180px">
28-
<Avatar icon={<FaUserAstronaut fontSize="18px" />} size='sm' alignSelf="center" />
17+
<Avatar bg="ui.main" icon={<FaUserAstronaut fontSize="18px" />} size='sm' alignSelf="center" />
2918
{/* TODO: Conditional tooltip based on email length */}
30-
<Text color='gray' alignSelf={"center"} noOfLines={1} fontSize="14px">{userData.email}</Text>
19+
<Text color='gray' alignSelf={"center"} noOfLines={1} fontSize="14px">{user.email}</Text>
3120
</Flex>
3221
) :
3322
<Skeleton height='20px' />

‎src/new-frontend/src/pages/auth/Login.tsx

+46-45
Original file line numberDiff line numberDiff line change
@@ -10,10 +10,9 @@ import { LoginService } from "../../client";
1010
import { Body_login_login_access_token as AccessToken } from "../../client/models/Body_login_login_access_token";
1111

1212
const Login: React.FC = () => {
13-
const [show, setShow] = useBoolean();
13+
const [show, setShow] = useBoolean();
1414
const navigate = useNavigate();
1515
const { register, handleSubmit } = useForm<AccessToken>();
16-
1716
const onSubmit: SubmitHandler<AccessToken> = async (data) => {
1817
const response = await LoginService.loginAccessToken({
1918
formData: data,
@@ -23,49 +22,51 @@ const Login: React.FC = () => {
2322
};
2423

2524
return (
26-
<Container
27-
as="form"
28-
onSubmit={handleSubmit(onSubmit)}
29-
h="100vh"
30-
maxW="sm"
31-
alignItems="stretch"
32-
justifyContent="center"
33-
gap={4}
34-
centerContent
35-
>
36-
<Image src={Logo} alt="FastAPI logo" height="auto" maxW="2xs" alignSelf="center" />
37-
<FormControl id="email">
38-
<Input {...register("username")} focusBorderColor="blue.200" placeholder="Email" type="text" />
39-
</FormControl>
40-
<FormControl id="password">
41-
<InputGroup>
42-
<Input
43-
{...register("password")}
44-
type={show ? "text" : "password"}
45-
focusBorderColor="blue.200"
46-
placeholder="Password"
47-
/>
48-
<InputRightElement
49-
color="gray.500"
50-
_hover={{
51-
cursor: "pointer",
52-
}}
53-
>
54-
<Icon onClick={setShow.toggle} aria-label={show ? "Hide password" : "Show password"}>
55-
{show ? <ViewOffIcon /> : <ViewIcon />}
56-
</Icon>
57-
</InputRightElement>
58-
</InputGroup>
59-
<Center>
60-
<Link as={ReactRouterLink} to="/recover-password" color="blue.500" mt={2}>
61-
Forgot password?
62-
</Link>
63-
</Center>
64-
</FormControl>
65-
<Button colorScheme="teal" type="submit">
66-
Log In
67-
</Button>
68-
</Container>
25+
<>
26+
<Container
27+
as="form"
28+
onSubmit={handleSubmit(onSubmit)}
29+
h="100vh"
30+
maxW="sm"
31+
alignItems="stretch"
32+
justifyContent="center"
33+
gap={4}
34+
centerContent
35+
>
36+
<Image src={Logo} alt="FastAPI logo" height="auto" maxW="2xs" alignSelf="center" />
37+
<FormControl id="email">
38+
<Input {...register("username")} placeholder="Email" type="text" />
39+
</FormControl>
40+
<FormControl id="password">
41+
<InputGroup>
42+
<Input
43+
{...register("password")}
44+
type={show ? "text" : "password"}
45+
46+
placeholder="Password"
47+
/>
48+
<InputRightElement
49+
color="gray.400"
50+
_hover={{
51+
cursor: "pointer",
52+
}}
53+
>
54+
<Icon onClick={setShow.toggle} aria-label={show ? "Hide password" : "Show password"}>
55+
{show ? <ViewOffIcon /> : <ViewIcon />}
56+
</Icon>
57+
</InputRightElement>
58+
</InputGroup>
59+
<Center>
60+
<Link as={ReactRouterLink} to="/recover-password" color="blue.500" mt={2}>
61+
Forgot password?
62+
</Link>
63+
</Center>
64+
</FormControl>
65+
<Button bg="ui.main" color="white" type="submit">
66+
Log In
67+
</Button>
68+
</Container>
69+
</>
6970
);
7071
};
7172

0 commit comments

Comments
 (0)