From 072fe6f84832b7a5be8debed886d23b75a57e114 Mon Sep 17 00:00:00 2001 From: Nikolai Date: Wed, 14 Sep 2022 13:24:02 +0300 Subject: [PATCH] =?UTF-8?q?=D0=BC=D0=BE=D0=B4=D0=B0=D0=BB=D0=BA=D0=B0=20-?= =?UTF-8?q?=20=D0=BD=D0=B0=20=D1=80=D0=B5=D0=B2=D1=8C=D1=8E?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- example.js | 185 -------------------- package-lock.json | 48 +++++- package.json | 3 +- src/Components/LoggedIn/index.tsx | 21 ++- src/Components/ModalWindow copy/index.tsx | 132 --------------- src/Components/ModalWindow/index.tsx | 198 ++++++++++++---------- src/Components/Users/index.tsx | 18 +- src/index.tsx | 3 +- src/store.ts | 19 +++ 9 files changed, 202 insertions(+), 425 deletions(-) delete mode 100644 example.js delete mode 100644 src/Components/ModalWindow copy/index.tsx create mode 100644 src/store.ts diff --git a/example.js b/example.js deleted file mode 100644 index 1ec2eb9..0000000 --- a/example.js +++ /dev/null @@ -1,185 +0,0 @@ -import React from "react"; -import { - BrowserRouter as Router, - Switch, - Route, - Link, - useHistory, - useLocation, - useParams -} from "react-router-dom"; - -// This example shows how to render two different screens -// (or the same screen in a different context) at the same URL, -// depending on how you got there. -// -// Click the "featured images" and see them full screen. Then -// "visit the gallery" and click on the colors. Note the URL and -// the component are the same as before but now we see them -// inside a modal on top of the gallery screen. - -export default function ModalGalleryExample() { - return ( - - - - ); -} - -function ModalSwitch() { - let location = useLocation(); - - // This piece of state is set when one of the - // gallery links is clicked. The `background` state - // is the location that we were at when one of - // the gallery links was clicked. If it's there, - // use it as the location for the so - // we show the gallery in the background, behind - // the modal. - let background = location.state && location.state.background; - - return ( -
- - } /> - } /> - } /> - - - {/* Show the modal when a background page is set */} - {background && } />} -
- ); -} - -const IMAGES = [ - { id: 0, title: "Dark Orchid", color: "DarkOrchid" }, - { id: 1, title: "Lime Green", color: "LimeGreen" }, - { id: 2, title: "Tomato", color: "Tomato" }, - { id: 3, title: "Seven Ate Nine", color: "#789" }, - { id: 4, title: "Crimson", color: "Crimson" } -]; - -function Thumbnail({ color }) { - return ( -
- ); -} - -function Image({ color }) { - return ( -
- ); -} - -function Home() { - return ( -
- Visit the Gallery -

Featured Images

-
    -
  • - Tomato -
    • -
  • - Crimson -
    • -
-
- ); -} - -function Gallery() { - let location = useLocation(); - - return ( -
- {IMAGES.map(i => ( - - -

{i.title}

- - ))} -
- ); -} - -function ImageView() { - let { id } = useParams(); - let image = IMAGES[parseInt(id, 10)]; - - if (!image) return
Image not found
; - - return ( -
-

{image.title}

- -
- ); -} - -function Modal() { - let history = useHistory(); - let { id } = useParams(); - let image = IMAGES[parseInt(id, 10)]; - - if (!image) return null; - - let back = e => { - e.stopPropagation(); - history.goBack(); - }; - - return ( -
-
-

{image.title}

- - -
-
- ); -} diff --git a/package-lock.json b/package-lock.json index d3d18dd..bcbe30c 100644 --- a/package-lock.json +++ b/package-lock.json @@ -26,7 +26,8 @@ "react-scripts": "5.0.1", "styled-components": "^5.3.5", "typescript": "^4.8.2", - "web-vitals": "^2.1.4" + "web-vitals": "^2.1.4", + "zustand": "^4.1.1" } }, "node_modules/@adobe/css-tools": { @@ -16240,6 +16241,14 @@ "requires-port": "^1.0.0" } }, + "node_modules/use-sync-external-store": { + "version": "1.2.0", + "resolved": "https://registry.npmjs.org/use-sync-external-store/-/use-sync-external-store-1.2.0.tgz", + "integrity": "sha512-eEgnFxGQ1Ife9bzYs6VLi8/4X6CObHMw9Qr9tPY43iKwsPw8xE8+EFsf/2cFZ5S3esXgpWgtSCtLNS41F+sKPA==", + "peerDependencies": { + "react": "^16.8.0 || ^17.0.0 || ^18.0.0" + } + }, "node_modules/util-deprecate": { "version": "1.0.2", "resolved": "https://registry.npmjs.org/util-deprecate/-/util-deprecate-1.0.2.tgz", @@ -17219,6 +17228,29 @@ "funding": { "url": "https://github.com/sponsors/sindresorhus" } + }, + "node_modules/zustand": { + "version": "4.1.1", + "resolved": "https://registry.npmjs.org/zustand/-/zustand-4.1.1.tgz", + "integrity": "sha512-h4F3WMqsZgvvaE0n3lThx4MM81Ls9xebjvrABNzf5+jb3/03YjNTSgZXeyrvXDArMeV9untvWXRw1tY+ntPYbA==", + "dependencies": { + "use-sync-external-store": "1.2.0" + }, + "engines": { + "node": ">=12.7.0" + }, + "peerDependencies": { + "immer": ">=9.0", + "react": ">=16.8" + }, + "peerDependenciesMeta": { + "immer": { + "optional": true + }, + "react": { + "optional": true + } + } } }, "dependencies": { @@ -28616,6 +28648,12 @@ "requires-port": "^1.0.0" } }, + "use-sync-external-store": { + "version": "1.2.0", + "resolved": "https://registry.npmjs.org/use-sync-external-store/-/use-sync-external-store-1.2.0.tgz", + "integrity": "sha512-eEgnFxGQ1Ife9bzYs6VLi8/4X6CObHMw9Qr9tPY43iKwsPw8xE8+EFsf/2cFZ5S3esXgpWgtSCtLNS41F+sKPA==", + "requires": {} + }, "util-deprecate": { "version": "1.0.2", "resolved": "https://registry.npmjs.org/util-deprecate/-/util-deprecate-1.0.2.tgz", @@ -29379,6 +29417,14 @@ "version": "0.1.0", "resolved": "https://registry.npmjs.org/yocto-queue/-/yocto-queue-0.1.0.tgz", "integrity": "sha512-rVksvsnNCdJ/ohGc6xgPwyN8eheCxsiLM8mxuE/t/mOVqJewPuO1miLpTHQiRgTKCLexL4MeAFVagts7HmNZ2Q==" + }, + "zustand": { + "version": "4.1.1", + "resolved": "https://registry.npmjs.org/zustand/-/zustand-4.1.1.tgz", + "integrity": "sha512-h4F3WMqsZgvvaE0n3lThx4MM81Ls9xebjvrABNzf5+jb3/03YjNTSgZXeyrvXDArMeV9untvWXRw1tY+ntPYbA==", + "requires": { + "use-sync-external-store": "1.2.0" + } } } } diff --git a/package.json b/package.json index 6d134ac..afae754 100644 --- a/package.json +++ b/package.json @@ -21,7 +21,8 @@ "react-scripts": "5.0.1", "styled-components": "^5.3.5", "typescript": "^4.8.2", - "web-vitals": "^2.1.4" + "web-vitals": "^2.1.4", + "zustand": "^4.1.1" }, "scripts": { "start": "react-scripts start", diff --git a/src/Components/LoggedIn/index.tsx b/src/Components/LoggedIn/index.tsx index eb21568..6c10b42 100644 --- a/src/Components/LoggedIn/index.tsx +++ b/src/Components/LoggedIn/index.tsx @@ -1,14 +1,25 @@ import * as React from "react"; import { Box } from "@mui/material"; import { ThemeProvider } from "@mui/material"; -import theme from "../../theme"; import CssBaseline from '@mui/material/CssBaseline'; import Menu from "../Menu"; import Header from "../Header"; import Content from "../Content"; +import ModalWindow from "../ModalWindow"; +import theme from "../../theme"; +import { useMatch } from "react-router-dom"; +import useStore from "../../store"; -const CenterBox: React.FC = () => { +const LoggedIn: React.FC = () => { + const handleOpen = useStore((state) => state.handleOpen); + const handleClose = useStore((state) => state.handleClose); + + const match = useMatch('/modal'); + match ? handleOpen() : handleClose() + + + return ( @@ -37,12 +48,14 @@ const CenterBox: React.FC = () => { - + + + ); } -export default CenterBox; \ No newline at end of file +export default LoggedIn; \ No newline at end of file diff --git a/src/Components/ModalWindow copy/index.tsx b/src/Components/ModalWindow copy/index.tsx deleted file mode 100644 index 1bdadbd..0000000 --- a/src/Components/ModalWindow copy/index.tsx +++ /dev/null @@ -1,132 +0,0 @@ -import * as React from "react"; -import { Box, Modal, Fade, Backdrop, Typography, Button } from "@mui/material"; -import { BrowserRouter, Routes, Route } from "react-router-dom"; -import theme from "../../theme"; - - -const ModalWindow: React.FC = () => { - const [open, setOpen] = React.useState(false); - const handleOpen = () => setOpen(true); - const handleClose = () => setOpen(false); - - return ( - - - - - - - Проект - - - - - - СТАТИСТИКА - - - ТРЕКЕРЫ УСТРОЙСТВ - - - ВВОДЫ - - - ВЫВОДЫ - - - - Long text Long text Long text Long text Long text - Long text Long text Long text Long text Long text - Long text Long text Long text - - - - - - - ); -} - - -export default ModalWindow; \ No newline at end of file diff --git a/src/Components/ModalWindow/index.tsx b/src/Components/ModalWindow/index.tsx index 33bba35..5636bc9 100644 --- a/src/Components/ModalWindow/index.tsx +++ b/src/Components/ModalWindow/index.tsx @@ -1,112 +1,128 @@ import * as React from "react"; -import { Box, Typography } from "@mui/material"; -import { ThemeProvider } from "@mui/material"; +import { useNavigate } from "react-router-dom"; +import { Box, Modal, Fade, Backdrop, Typography } from "@mui/material"; import theme from "../../theme"; +import useStore from "../../store"; const ModalWindow: React.FC = () => { + const open = useStore((state) => state.open); + // const handleClose = useStore((state) => state.handleClose); + const navigate = useNavigate(); + return ( - - - - Проект - - + navigate(-1) } + closeAfterTransition + BackdropComponent={Backdrop} + BackdropProps={{ + timeout: 500, + }} + > + + + Проект + + - + + СТАТИСТИКА + + + ТРЕКЕРЫ УСТРОЙСТВ + + + ВВОДЫ + + + ВЫВОДЫ + + + - СТАТИСТИКА - - - ТРЕКЕРЫ УСТРОЙСТВ - - - ВВОДЫ - - - ВЫВОДЫ - - - - Long text Long text Long text Long text Long text - Long text Long text Long text Long text Long text - Long text Long text Long text + Long text Long text Long text Long text Long text + Long text Long text Long text Long text Long text + Long text Long text Long text + - - + + ); } diff --git a/src/Components/Users/index.tsx b/src/Components/Users/index.tsx index 0a7eefa..fbf54e1 100644 --- a/src/Components/Users/index.tsx +++ b/src/Components/Users/index.tsx @@ -1,6 +1,6 @@ import * as React from "react"; +import { useNavigate } from "react-router-dom"; import { Box, Typography, TextField, Button } from "@mui/material"; -import { Link } from "react-router-dom"; import Table from '@mui/material/Table'; import TableHead from '@mui/material/TableHead'; import TableBody from '@mui/material/TableBody'; @@ -12,19 +12,17 @@ import theme from "../../theme"; const Users: React.FC = () => { const [selectedValue, setSelectedValue] = React.useState('a'); - const handleChange = (event: React.ChangeEvent) => { setSelectedValue(event.target.value); }; + const navigate = useNavigate(); + return ( - - } /> } /> } /> - } /> + } /> } diff --git a/src/store.ts b/src/store.ts new file mode 100644 index 0000000..873f7f8 --- /dev/null +++ b/src/store.ts @@ -0,0 +1,19 @@ +import create from "zustand"; + + +const useStore = create((set) => ({ + open: false, + handleOpen: () => set({ open: true }), + handleClose: () => set({ open: false }), + + openModal: () => { } +})) + +interface StoreState { + open: boolean + handleOpen: () => void + handleClose: () => void +} + + +export default useStore; \ No newline at end of file