Запушил финальные изменения

moevm · Nov 11, 2024 · fcb5a42 · fcb5a42
1 parent 615568b
commit fcb5a42
Show file tree

Hide file tree

Showing 8 changed files with 111 additions and 115 deletions.
diff --git a/docker-compose.yml b/docker-compose.yml
@@ -13,7 +13,16 @@ services:
         condition: service_healthy
     networks:
       - database
-
+  frontend:
+    build:
+      context: ./frontend
+      dockerfile: Dockerfile
+    ports:
+      - "5173:5173"
+    volumes:
+      - .:/app
+      - /app/node_modules
+    command: npm run dev
   db:
     container_name: database
     hostname: mongodb
@@ -41,4 +50,4 @@ volumes:
   mongo-data:
 
 networks:
-  database:
+  database:
diff --git a/frontend/Dockerfile b/frontend/Dockerfile
@@ -0,0 +1,15 @@
+FROM node:20
+
+WORKDIR /app
+
+COPY package.json .
+
+COPY package-lock.json .
+
+RUN npm install
+
+COPY . .
+
+EXPOSE 5173
+
+CMD ["npm", "run", "dev"]
diff --git a/frontend/endpoints b/frontend/endpoints
diff --git a/frontend/src/components/author/index.tsx b/frontend/src/components/author/index.tsx
@@ -28,8 +28,6 @@ export const Author = () => {
 			.then(setAuthor);
 	}, []);
 
-	console.log(author, books);
-
 	const [user, setUser] = useState<any>();
 
 	useEffect(() => {

diff --git a/frontend/src/components/book/index.tsx b/frontend/src/components/book/index.tsx
@@ -27,6 +27,31 @@ export const Book = () => {
 			.then(setUser);
 	}, []);
 
+	function handle() {
+		if (book?.status) {
+			fetch("http://localhost:8081/return_book/" + book?._id, {
+				method: "POST",
+			}).then(() => {
+				fetch("http://localhost:8081/books/" + l.pathname.split("/").at(-1))
+					.then((r) => r.json())
+					.then(setBook);
+			});
+		} else {
+			fetch("http://localhost:8081/take_book/" + book?._id, {
+				method: "POST",
+				headers: {
+					"Content-Type": "application/json;charset=utf-8",
+				},
+				body: JSON.stringify({
+					login: user?.login,
+				}),
+			}).then(() => {
+				fetch("http://localhost:8081/books/" + l.pathname.split("/").at(-1))
+					.then((r) => r.json())
+					.then(setBook);
+			});
+		}
+	}
 	return (
 		<Box px={10} pt={5}>
 			<Flex justifyContent="space-between">
@@ -78,7 +103,7 @@ export const Book = () => {
 			<Heading>Описание</Heading>
 			<Text pb={3}>{book?.description || "Нет описания"} </Text>
 			<Separator variant="solid" py={3} />
-			<Button>Взять книгу</Button>
+			<Button onClick={handle}>{book?.status ? "Вернуть книгу" : "Взять книгу"}</Button>
 		</Box>
 	);
 };

diff --git a/frontend/src/components/create/author/index.tsx b/frontend/src/components/create/author/index.tsx
@@ -1,7 +1,11 @@
-import { Button, Flex, Input } from "@chakra-ui/react";
+import { Box, Button, Flex, Group, IconButton, Input } from "@chakra-ui/react";
 import { FormEvent, useState } from "react";
 import { useNavigate } from "react-router";
 import { getCookie } from "../../../utils";
+import { Link } from "react-router-dom";
+import { CiExport } from "react-icons/ci";
+import { FaHome, FaDownload } from "react-icons/fa";
+import { TbLogs } from "react-icons/tb";
 
 export const CreateAuthor = () => {
 	const [name, setName] = useState("");
@@ -29,15 +33,22 @@ export const CreateAuthor = () => {
 		});
 	}
 	return (
-		<Flex w="70dvw" alignItems="center" m="auto" h="100dvh" justifyContent="center">
-			<form style={{ width: "100%" }} onSubmit={handle}>
-				<Flex flexDir="column" gap="20px" w="100%">
-					<Input placeholder="Имя" value={name} onChange={(e) => setName(e.target.value)} />
-					<Input placeholder="Биография" value={biography} onChange={(e) => setdescription(e.target.value)} />
-					<Input placeholder="Книги" value={books} onChange={(e) => setlink(e.target.value)} />
-					<Button type="submit">Создать автора</Button>
-				</Flex>
-			</form>
-		</Flex>
+		<Box>
+			<Flex w="70dvw" alignItems="center" m="auto" h="100dvh" justifyContent="center">
+				<Flex gap="40px"></Flex>
+				<form style={{ width: "100%" }} onSubmit={handle}>
+					<Flex flexDir="column" gap="20px" w="100%">
+						<Input placeholder="Имя" value={name} onChange={(e) => setName(e.target.value)} />
+						<Input
+							placeholder="Биография"
+							value={biography}
+							onChange={(e) => setdescription(e.target.value)}
+						/>
+						<Input placeholder="Книги" value={books} onChange={(e) => setlink(e.target.value)} />
+						<Button type="submit">Создать автора</Button>
+					</Flex>
+				</form>
+			</Flex>
+		</Box>
 	);
 };
diff --git a/frontend/src/components/home/index.tsx b/frontend/src/components/home/index.tsx
@@ -61,9 +61,28 @@ export const Home = () => {
 				</Flex>
 
 				<Text px={5} fontSize={20} border="1px solid black" borderRadius={10}>
-					{user?.login}
+					{user?.login ? (
+						<Link to={`/user/${user?.login}`} className="link">
+							{user?.login}
+						</Link>
+					) : (
+						<Link to={`/auth`} className="link">
+							Войти
+						</Link>
+					)}
 				</Text>
 			</Flex>
+
+			<Flex mt={5}>
+				<Group attached>
+					<Button colorPalette="blue">
+						<Link to="/create/book">Создать книгу</Link>
+					</Button>
+					<Button colorPalette="blue">
+						<Link to="/create/author">Создать автора</Link>
+					</Button>
+				</Group>
+			</Flex>
 			<Box py={5} px={3} border="1px solid black" mt={10} borderRadius={10}>
 				<Text>Книги, изданные автором</Text>
 			</Box>

diff --git a/frontend/src/components/user/index.tsx b/frontend/src/components/user/index.tsx
@@ -15,6 +15,15 @@ export const User = () => {
 			.then((r) => r.json())
 			.then(setUser);
 	}, []);
+
+	const [avtiv, setavtiv] = useState<any>();
+
+	useEffect(() => {
+		fetch("http://localhost:8081/activities")
+			.then((r) => r.json())
+			.then(setavtiv);
+	}, []);
+	console.log(avtiv);
 	return (
 		<Box px={10} pt={5}>
 			<Flex justifyContent="space-between">
@@ -56,55 +65,6 @@ export const User = () => {
 				</DataListRoot>
 			</Box>
 
-			<Box py={2} px={3} border="1px solid black" mt={10} borderRadius={5}>
-				<Text>Взятые книги</Text>
-			</Box>
-
-			<Box py={5} borderRadius={10}>
-				<Table.Root size="sm">
-					<Table.Header>
-						<Table.Row>
-							<Table.ColumnHeader>Название</Table.ColumnHeader>
-							<Table.ColumnHeader>Автор</Table.ColumnHeader>
-							<Table.ColumnHeader>Жанр</Table.ColumnHeader>
-							<Table.ColumnHeader>Дата взятия</Table.ColumnHeader>
-						</Table.Row>
-					</Table.Header>
-					<Table.Body>
-						<Table.Row>
-							<Table.Cell>1</Table.Cell>
-							<Table.Cell>1</Table.Cell>
-							<Table.Cell>1</Table.Cell>
-							<Table.Cell>1</Table.Cell>
-						</Table.Row>
-						<Table.Row>
-							<Table.Cell>1</Table.Cell>
-							<Table.Cell>1</Table.Cell>
-							<Table.Cell>1</Table.Cell>
-							<Table.Cell>1</Table.Cell>
-						</Table.Row>
-						<Table.Row>
-							<Table.Cell>1</Table.Cell>
-							<Table.Cell>1</Table.Cell>
-							<Table.Cell>1</Table.Cell>
-							<Table.Cell>1</Table.Cell>
-						</Table.Row>
-						<Table.Row>
-							<Table.Cell>1</Table.Cell>
-							<Table.Cell>1</Table.Cell>
-							<Table.Cell>1</Table.Cell>
-							<Table.Cell>1</Table.Cell>
-						</Table.Row>
-						<Table.Row>
-							<Table.Cell>1</Table.Cell>
-							<Table.Cell>1</Table.Cell>
-							<Table.Cell>1</Table.Cell>
-							<Table.Cell>1</Table.Cell>
-						</Table.Row>
-					</Table.Body>
-				</Table.Root>
-			</Box>
-
 			<Box py={2} px={3} border="1px solid black" mt={10} borderRadius={5}>
 				<Text>История действий</Text>
 			</Box>
@@ -115,47 +75,17 @@ export const User = () => {
 						<Table.Row>
 							<Table.ColumnHeader>Название</Table.ColumnHeader>
 							<Table.ColumnHeader>Автор</Table.ColumnHeader>
-							<Table.ColumnHeader>Жанр</Table.ColumnHeader>
-							<Table.ColumnHeader>Дата взятия</Table.ColumnHeader>
-							<Table.ColumnHeader>Дата возврата</Table.ColumnHeader>
 						</Table.Row>
 					</Table.Header>
 					<Table.Body>
-						<Table.Row>
-							<Table.Cell>1</Table.Cell>
-							<Table.Cell>1</Table.Cell>
-							<Table.Cell>1</Table.Cell>
-							<Table.Cell>1</Table.Cell>
-							<Table.Cell>1</Table.Cell>
-						</Table.Row>
-						<Table.Row>
-							<Table.Cell>1</Table.Cell>
-							<Table.Cell>1</Table.Cell>
-							<Table.Cell>1</Table.Cell>
-							<Table.Cell>1</Table.Cell>
-							<Table.Cell>1</Table.Cell>
-						</Table.Row>
-						<Table.Row>
-							<Table.Cell>1</Table.Cell>
-							<Table.Cell>1</Table.Cell>
-							<Table.Cell>1</Table.Cell>
-							<Table.Cell>1</Table.Cell>
-							<Table.Cell>-</Table.Cell>
-						</Table.Row>
-						<Table.Row>
-							<Table.Cell>1</Table.Cell>
-							<Table.Cell>1</Table.Cell>
-							<Table.Cell>1</Table.Cell>
-							<Table.Cell>1</Table.Cell>
-							<Table.Cell>1</Table.Cell>
-						</Table.Row>
-						<Table.Row>
-							<Table.Cell>1</Table.Cell>
-							<Table.Cell>1</Table.Cell>
-							<Table.Cell>1</Table.Cell>
-							<Table.Cell>1</Table.Cell>
-							<Table.Cell>-</Table.Cell>
-						</Table.Row>
+						{avtiv?.map((el: any) => {
+							return (
+								<Table.Row>
+									<Table.Cell>{el.description}</Table.Cell>
+									<Table.Cell>{el.user_id}</Table.Cell>
+								</Table.Row>
+							);
+						})}
 					</Table.Body>
 				</Table.Root>
 			</Box>