Skip to content
Snippets Groups Projects
Commit af9feca5 authored by Bendegúz Cseresnyés's avatar Bendegúz Cseresnyés
Browse files

Add CreatePersonDialog

parent a9af9a7b
Branches
No related tags found
1 merge request!2Dev ui
This commit is part of merge request !2. Comments created here will be created in the context of that merge request.
import { BrowserRouter as Router, Route, Switch } from "react-router-dom"; import { BrowserRouter as Router, Route, Switch } from "react-router-dom";
import Dashboard from "../pages/Dashboard"; import Dashboard from "../pages/Dashboard";
import Guest from "../pages/Guest";
import Home from "../pages/Home"; import Home from "../pages/Home";
import Login from "../pages/Login"; import Login from "../pages/Login";
import Register from "../pages/Register"; import Register from "../pages/Register";
...@@ -14,6 +15,7 @@ function App() { ...@@ -14,6 +15,7 @@ function App() {
<Route exact path="/register" component={Register} /> <Route exact path="/register" component={Register} />
<Route exact path="/login" component={Login} /> <Route exact path="/login" component={Login} />
<Route exact path="/dashboard" component={Dashboard} /> <Route exact path="/dashboard" component={Dashboard} />
<Route exact path="/guest" component={Guest} />
</Switch> </Switch>
</Layout> </Layout>
</Router> </Router>
......
import { Alert, AlertIcon } from "@chakra-ui/alert";
import { Text, VStack } from "@chakra-ui/layout";
import React, { ReactElement } from "react";
interface Props {
error: Error | null;
}
export default function ErrorAlert({ error }: Props): ReactElement | null {
if (!error || !error.message) return null;
return (
<Alert status="error">
<AlertIcon />
<VStack align="flex-start">
<Text>{error.message}</Text>
</VStack>
</Alert>
);
}
import { Button } from "@chakra-ui/button";
import { FormControl, FormLabel } from "@chakra-ui/form-control";
import { Input } from "@chakra-ui/input";
import { Text } from "@chakra-ui/layout";
import {
Modal,
ModalBody,
ModalCloseButton,
ModalContent,
ModalFooter,
ModalHeader,
ModalOverlay,
} from "@chakra-ui/modal";
import React, { ReactElement, useState } from "react";
import ErrorAlert from "../components/ErrorAlert";
import { Person } from "../data/Person";
import usePromiseHandler from "../hooks/usePromiseHandler";
interface Props {
onClose: () => void;
onCreated: (person: Person) => void;
isOpen: boolean;
barcode: string;
}
export default function CreatePersonDialog({
isOpen,
onClose,
onCreated,
barcode,
}: Props): ReactElement {
const [name, setName] = useState("");
const [runPromise, , loading, error] = usePromiseHandler();
const handleSave = async () => {
// TODO save user data
await new Promise((resolve, reject) => {
setTimeout(resolve, 500);
});
throw new Error("Creating a new person is not implemented");
// onCreated({ barcode: barcode, name: name });
};
return (
<Modal isOpen={isOpen} onClose={onClose}>
<ModalOverlay />
<ModalContent
as="form"
onSubmit={(event) => {
event.preventDefault();
runPromise(handleSave);
}}
>
<ModalHeader>Vendég adatai</ModalHeader>
<ModalCloseButton />
<ModalBody>
<FormControl>
<FormLabel>Név</FormLabel>
<Input
type="text"
name="name"
value={name}
required
onChange={(event) => setName(event.target.value)}
/>
<Text fontSize="sm" color="gray.600">
Ennek a módosítására nincs lehetőség később!
</Text>
</FormControl>
<ErrorAlert error={error} />
</ModalBody>
<ModalFooter>
<Button
colorScheme="blue"
mr={3}
onClick={onClose}
loading={loading}
disabled={loading}
>
Mégsem
</Button>
<Button
variant="ghost"
loading={loading}
disabled={loading}
type="submit"
>
Mentés
</Button>
</ModalFooter>
</ModalContent>
</Modal>
);
}
import { import React, { useState } from "react";
collection,
onSnapshot,
query,
QuerySnapshot,
where,
} from "firebase/firestore";
import React, { useEffect, useState } from "react";
import { useAuthState } from "react-firebase-hooks/auth"; import { useAuthState } from "react-firebase-hooks/auth";
import { useHistory } from "react-router"; import { Redirect, useHistory } from "react-router";
import { auth, db, logout } from "../config/firebase-config"; import { auth, logout } from "../config/firebase-config";
import { getAllPlacements } from "../queries/getAllPlacements";
function Dashboard() { function Dashboard() {
const [user, loading, error] = useAuthState(auth); const [user, loading, error] = useAuthState(auth);
const [name, setName] = useState(""); const [name, setName] = useState("");
const history = useHistory(); const history = useHistory();
/*
const fetchUserName = async () => { const fetchUserName = async () => {
try { try {
const q = await query( const q = await query(
...@@ -43,6 +36,9 @@ function Dashboard() { ...@@ -43,6 +36,9 @@ function Dashboard() {
fetchUserName(); fetchUserName();
fetchData(); fetchData();
}, [user, loading]); }, [user, loading]);
*/
if(!user) return <Redirect to="/login" />;
return ( return (
<div className="dashboard"> <div className="dashboard">
......
import { Text, VStack } from "@chakra-ui/layout";
import { ReactElement, useState } from "react";
import { useHistory } from "react-router";
import { Person } from "../data/Person";
import CreatePersonDialog from "../dialogs/CreatePersonDialog";
interface Props {}
export default function Guest({}: Props): ReactElement {
// states
const [person, setPerson] = useState<Person | null>(null);
const history = useHistory();
return (
<VStack align="stretch">
<Text fontSize="3xl">Vendég</Text>
<CreatePersonDialog
barcode=""
onCreated={(person) => setPerson(person)}
onClose={() => history.push("/")}
isOpen={person == null}
/>
</VStack>
);
}
0% Loading or .
You are about to add 0 people to the discussion. Proceed with caution.
Please register or to comment