diff --git a/src/components/bodyModal/QrCodeToken.jsx b/src/components/bodyModal/QrCodeToken.jsx index 37d59e2..fcda295 100644 --- a/src/components/bodyModal/QrCodeToken.jsx +++ b/src/components/bodyModal/QrCodeToken.jsx @@ -2,13 +2,12 @@ import React from "react"; import classes from "../../assets/styles/components/bodyModal/qrCodeToken.module.scss"; import MyQrCode from "../MyQrCode.jsx"; +const QrCodeToken = ({ value }) => { + return ( +
+ +
+ ); +}; -const QrCodeToken = ({value}) => { - return ( -
- -
- ) -} - -export default QrCodeToken \ No newline at end of file +export default QrCodeToken; diff --git a/src/pages/TokensForm.jsx b/src/pages/TokensForm.jsx index 0c92a3c..ee0e58e 100644 --- a/src/pages/TokensForm.jsx +++ b/src/pages/TokensForm.jsx @@ -2,7 +2,12 @@ import React, { useState, useEffect, useContext } from "react"; import { useNavigate, useParams } from "react-router-dom"; import { useCookies } from "react-cookie"; import classes from "../assets/styles/tokensForm.module.scss"; -import { listFormsByTokenApi, newFormTokenApi, removeTokenFormApi, editTokenFormApi} from "../hooks/api/listFormsApi"; +import { + listFormsByTokenApi, + newFormTokenApi, + removeTokenFormApi, + editTokenFormApi, +} from "../hooks/api/listFormsApi"; import MyButton from "../components/MyButton.jsx"; import { UserData } from "../context/index.js"; import DefaultModal from "../components/DefaultModal.jsx"; @@ -10,130 +15,133 @@ import EditToken from "../components/bodyModal/EditToken.jsx"; import QrCodeToken from "../components/bodyModal/QrCodeToken.jsx"; import QRCode from "qrcode"; - const TokensForm = () => { - const { formId } = useParams(); - const [tokens, setTokens] = useState([]); - const [currentIdToken, setCurrentIdToken] = useState(false); - const [loading, setLoading] = useState(true); - const [titleToken, setTitleToken] = useState(""); - const {user, setUser} = useContext(UserData); - const [qrCodeUrl, setQrcodeUrl] = useState(""); + const { formId } = useParams(); + const [tokens, setTokens] = useState([]); + const [currentIdToken, setCurrentIdToken] = useState(false); + const [loading, setLoading] = useState(true); + const [titleToken, setTitleToken] = useState(""); + const { user, setUser } = useContext(UserData); + const [qrCodeUrl, setQrcodeUrl] = useState(""); - const [cookies, _, __] = useCookies(["user"]); + const [cookies, _, __] = useCookies(["user"]); - useEffect(() => { - async function listFormsByToken() { - const response = await listFormsByTokenApi(cookies.token, formId) - - if (response.status === 200) { - setTokens(response.data.tokens.filter((item, i) => item.is_active === true && i !== 0)) - setLoading(false) - } - else if ( - response.status === 401 - ) { - // navigate("/enter") - setUser(false); - } - else { - console.log(response) - } - } + useEffect(() => { + async function listFormsByToken() { + const response = await listFormsByTokenApi(cookies.token, formId); - listFormsByToken() - }, []) - - async function newFormToken() { - const response = await newFormTokenApi(cookies.token, formId, titleToken) - - if (response.status === 200) { - setTokens([...tokens, response.data.token]) - } - else if ( - response.status === 401 - ) { - // navigate("/enter") - setUser(false); - } - else { - console.log(response) - } + if (response.status === 200) { + setTokens( + response.data.tokens.filter( + (item, i) => item.is_active === true && i !== 0 + ) + ); + setLoading(false); + } else if (response.status === 401) { + // navigate("/enter") + setUser(false); + } else { + console.log(response); + } } - // async function editTokenForm(tokenForm) { - // const response = await editTokenFormApi(cookies.token, formId, tokenForm, titleToken) + listFormsByToken(); + }, []); - // if (response.status === 200) { - // setTokens([]) - // } - // else if ( - // response.status === 401 - // ) { - // // navigate("/enter") - // setUser(false); - // } - // else { - // console.log(response) - // } - // } + async function newFormToken() { + const response = await newFormTokenApi(cookies.token, formId, titleToken); - async function removeTokenForm(tokenForm) { - const response = await removeTokenFormApi(cookies.token, formId, tokenForm) - - if (response.status === 200) { - setTokens(tokens.filter(item => item.id !== tokenForm)) - } - else if ( - response.status === 401 - ) { - // navigate("/enter") - setUser(false); - } - else { - console.log(response) - } + if (response.status === 200) { + setTokens([...tokens, response.data.token]); + } else if (response.status === 401) { + // navigate("/enter") + setUser(false); + } else { + console.log(response); } + } - return ( -
-
-
-
-
-

Токены формы

- { - setTitleToken("") - setCurrentIdToken(false) - }} - target={"#tokenModal"} - toggle={"modal"} - /> -
-
-
-
-
Название
-
Токен
-
-
+ // async function editTokenForm(tokenForm) { + // const response = await editTokenFormApi(cookies.token, formId, tokenForm, titleToken) - {tokens ? - tokens.map((item, i) => -
-
-
- {item.name} -
-
- {item.id} -
-
-
- {/* item.id !== tokenForm)); + } else if (response.status === 401) { + // navigate("/enter") + setUser(false); + } else { + console.log(response); + } + } + + return ( +
+
+
+
+
+

Токены формы

+ { + setTitleToken(""); + setCurrentIdToken(false); + }} + target={"#tokenModal"} + toggle={"modal"} + /> +
+
+
+
+
Название
+
Токен
+
+
+ + {tokens ? ( + tokens.map((item, i) => ( +
+
+
+ {item.name} +
+
+ {item.id} +
+
+
+ {/* { setCurrentIdToken(item.id) }}> */} - { - QRCode.toDataURL( - `http://localhost:3000/forms/${item.id}`, - {}, - (err , url) => { - setQrcodeUrl(url) - } - ) - }} - data-bs-toggle="modal" - data-bs-target={`#qrModal`}> - - removeTokenForm(item.id)}> -
- { - const aElem = document.createElement('a'); - aElem.href = qrCodeUrl - aElem.download = `${item.name}.png` - aElem.click() - }}, - {text: "Отмена", class: "main__white", dismiss: "modal", action: () => {}} - ]} - BodyModal={ - - } - /> -
- ) - : -
- -
} - newFormToken()}, - {text: "Отмена", class: "main__white", dismiss: "modal", action: () => {}} - ]} - BodyModal={ - - } - /> -
+ { + QRCode.toDataURL( + `http://minerva.krbl.ru/forms/${item.id}`, + {}, + (err, url) => { + setQrcodeUrl(url); + } + ); + }} + data-bs-toggle="modal" + data-bs-target={`#qrModal`} + > + removeTokenForm(item.id)} + >
+ { + const aElem = document.createElement("a"); + aElem.href = qrCodeUrl; + aElem.download = `${item.name}.png`; + aElem.click(); + }, + }, + { + text: "Отмена", + class: "main__white", + dismiss: "modal", + action: () => {}, + }, + ]} + BodyModal={} + /> +
+ )) + ) : ( +
+
+ )} + newFormToken(), + }, + { + text: "Отмена", + class: "main__white", + dismiss: "modal", + action: () => {}, + }, + ]} + BodyModal={ + + } + />
+
- ) -} +
+
+ ); +}; -export default TokensForm; \ No newline at end of file +export default TokensForm;