Skip to content

Commit

Permalink
feat: space used + refacto routing
Browse files Browse the repository at this point in the history
  • Loading branch information
olup committed Jul 27, 2022
1 parent 696a36f commit a7d3c1e
Show file tree
Hide file tree
Showing 18 changed files with 395 additions and 273 deletions.
5 changes: 5 additions & 0 deletions frontend/package-lock.json

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

3 changes: 2 additions & 1 deletion frontend/package.json
Original file line number Diff line number Diff line change
Expand Up @@ -18,7 +18,8 @@
"react": "^18.0.0",
"react-beautiful-dnd": "^13.1.0",
"react-dom": "^18.0.0",
"react-icons": "^4.4.0"
"react-icons": "^4.4.0",
"wouter": "^2.8.0-alpha.2"
},
"devDependencies": {
"@types/react": "^18.0.0",
Expand Down
2 changes: 1 addition & 1 deletion frontend/package.json.md5
Original file line number Diff line number Diff line change
@@ -1 +1 @@
626e939685488d9757296e235ae50971
273bafaffaa3c4ec09341a3248f1a7c5
233 changes: 34 additions & 199 deletions frontend/src/App.tsx
Original file line number Diff line number Diff line change
@@ -1,103 +1,45 @@
import { Box, Button, Center, Icon, Text, Tooltip } from "@chakra-ui/react";
import { useQuery } from "@tanstack/react-query";
import { BiPlug } from "react-icons/bi";
import {
Box,
Button,
Center,
Code,
Flex,
Icon,
IconButton,
Popover,
PopoverBody,
PopoverCloseButton,
PopoverContent,
PopoverHeader,
PopoverTrigger,
Table,
Tbody,
Td,
Text,
Th,
Thead,
Tooltip,
Tr,
useToast,
} from "@chakra-ui/react";
import { useMutation, useQuery, useQueryClient } from "@tanstack/react-query";
import { useState } from "react";
import {
FiArrowDown,
FiArrowUp,
FiMenu,
FiPackage,
FiRefreshCcw,
FiSmartphone,
FiUpload,
} from "react-icons/fi";
import { BiMenu, BiPlug } from "react-icons/bi";
import { MdDragIndicator } from "react-icons/md";
import {
ChangePackOrder,
GetDeviceInfos,
InstallPack,
ListPacks,
OpenFile,
} from "../wailsjs/go/main/App";
import { Link, Route } from "wouter";
import { ListPacks } from "../wailsjs/go/main/App";
import { DetailsModal } from "./components/DetailsModal";
import { DeviceModal } from "./components/DeviceModal";
import { Header } from "./components/Header";
import { IsInstallingModal } from "./components/IsInstallingModal";
import { NewPackModal } from "./components/NewPackModal";
import { PackTag } from "./components/PackTag";
import { PackList } from "./components/PackList";
import { SyncMdMenu } from "./components/SyncMdMenu";
import { DragDropContext, Draggable, Droppable } from "react-beautiful-dnd";
import { lunii } from "../wailsjs/go/models";
import { useChangePackOrder } from "./hooks/useChangePackOrder";
import { useDeviceQuery } from "./hooks/useApi";
import { useInstallPack } from "./hooks/useInstallPack";

function App() {
const {
data: device,
refetch: refetchDevice,
isLoading: isLoadingDevice,
} = useQuery(["device"], GetDeviceInfos);
const { data: packs, refetch: refetchPacks } = useQuery(
["packs"],
ListPacks,
{
refetchOnMount: true,
enabled: !!device,
}
);

const [isInstalling, setIsInstalling] = useState(false);
const toast = useToast();

const handleInstallStory = async () => {
const packPath = await OpenFile("Select your pack");
if (!packPath) return;

setIsInstalling(true);
try {
await InstallPack(packPath);
toast({
title: "The pack was installed on the device",
status: "success",
isClosable: true,
});
await refetchPacks();
} catch (e) {
toast({
title: "Could not install pack on device",
status: "warning",
description:
"Something went wrong while installing the pack on your device",
});
}
setIsInstalling(false);
};

const { mutate: handleChangePackOrder } = useChangePackOrder();
} = useDeviceQuery();

if (isLoadingDevice) return null;

return (
<Box id="App" p={3}>
<Route path="/create-pack">
<NewPackModal />
</Route>
<Route path="/device">
<DeviceModal />
</Route>
<Route path="/pack/:id">
<DetailsModal />
</Route>

{!device && (
<>
<Box display="flex">
Expand All @@ -110,7 +52,16 @@ function App() {
Refresh
</Button>
</Tooltip>
<NewPackModal />
<Link to="/create-pack">
<Button
variant="ghost"
colorScheme="linkedin"
leftIcon={<FiPackage />}
ml={2}
>
Create pack
</Button>
</Link>
</Box>
<Center opacity={0.3} fontSize={20} h={500} flexDirection="column">
<Icon as={BiPlug}></Icon>
Expand All @@ -122,126 +73,10 @@ function App() {

{device && (
<Box pt="56px">
<Box
display="flex"
position="fixed"
backgroundColor="white"
zIndex={2}
top={0}
right={0}
left={0}
p={2}
>
<Box>
<Popover placement="bottom-start" closeOnBlur={false}>
<PopoverTrigger>
<Button colorScheme="linkedin" leftIcon={<FiSmartphone />}>
My Lunii
</Button>
</PopoverTrigger>
<PopoverContent>
<PopoverCloseButton />
<PopoverHeader>Details</PopoverHeader>
<PopoverBody>
<Box>
Serial Number <Code>{device.serialNumber}</Code>
Version{" "}
<Code>
{device.firmwareVersionMajor}.
{device.firmwareVersionMinor}
</Code>
</Box>
</PopoverBody>
</PopoverContent>
</Popover>
</Box>
<Box ml={2}>
<SyncMdMenu />
</Box>
<Button
variant="ghost"
colorScheme="linkedin"
leftIcon={<FiUpload />}
onClick={handleInstallStory}
ml={2}
>
Install pack
</Button>
<NewPackModal />
</Box>

<Box>
<Flex py={3}>
<Box width={50}></Box>
<Box flex={1}>Title</Box>
<Box width={100}></Box>
<Box width={50}></Box>
</Flex>
<DragDropContext
onDragEnd={(a) => {
if (!a.destination) return;
handleChangePackOrder({
id: a.draggableId,
position: a.destination?.index,
});
}}
>
<Droppable droppableId="droppable">
{(provided) => (
<Box {...provided.droppableProps} ref={provided.innerRef}>
{packs?.map((p, i) => (
<Draggable
key={p.uuid as any}
draggableId={p.uuid as any}
index={i}
>
{(provided) => (
<Flex
ref={provided.innerRef}
{...provided.draggableProps}
backgroundColor="white"
borderBottom="1px solid #eee"
borderTop="1px solid #eee"
mt="-1px"
py={2}
alignItems="center"
>
<Box width={50}>
<IconButton
size="xs"
aria-label="up"
icon={<MdDragIndicator />}
variant="ghost"
mr={1}
{...provided.dragHandleProps}
/>
</Box>

<Box
flex={1}
fontWeight={p.title && "bold"}
opacity={p.title ? 1 : 0.5}
>
{p.title || p.uuid}
</Box>
<Box width={100}>
<PackTag metadata={p} />
</Box>
<Box width={50}>
<DetailsModal uuid={p.uuid} />
</Box>
</Flex>
)}
</Draggable>
))}
</Box>
)}
</Droppable>
</DragDropContext>
</Box>
<Header />
<PackList />
</Box>
)}
<IsInstallingModal isOpen={isInstalling} />
</Box>
);
}
Expand Down
28 changes: 11 additions & 17 deletions frontend/src/components/DetailsModal.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -22,17 +22,18 @@ import { DeleteModal } from "./DeleteModal";
import { PackTag } from "./PackTag";
import parse from "html-react-parser";
import { ListPacks, RemovePack } from "../../wailsjs/go/main/App";
import { useQuery } from "@tanstack/react-query";
import { useQuery, useQueryClient } from "@tanstack/react-query";
import { useLocation, useRoute } from "wouter";

export const DetailsModal: FC<{
uuid: number[];
}> = ({ uuid }) => {
const { isOpen, onOpen, onClose } = useDisclosure();
const { data: packs, refetch: refetchPacks } = useQuery(["packs"], ListPacks);
const pack = packs?.find((p) => p.uuid === uuid);
export const DetailsModal: FC = () => {
const [, setLocation] = useLocation();
const [, params] = useRoute("/pack/:uuid");
const toast = useToast();
const { data: packs } = useQuery(["packs"], ListPacks);

const pack = packs?.find((p) => (p.uuid as any) === params?.uuid);
if (!pack) return null;
const queryClient = useQueryClient();

const parsedDescription = parse(pack.description);

Expand All @@ -43,20 +44,13 @@ export const DetailsModal: FC<{
status: "success",
isClosable: true,
});
onClose();
await refetchPacks();
await queryClient.invalidateQueries(["packs"]);
setLocation("/");
};

return (
<>
<IconButton
variant="ghost"
aria-label="Details"
icon={<FiMoreVertical />}
onClick={onOpen}
/>

<Modal isOpen={isOpen} onClose={onClose}>
<Modal isOpen={true} onClose={() => setLocation("/")}>
<ModalOverlay />
<ModalContent>
<ModalHeader></ModalHeader>
Expand Down
Loading

0 comments on commit a7d3c1e

Please sign in to comment.