From f27730662c884786f419823ed930863aed1d7b54 Mon Sep 17 00:00:00 2001 From: Kirill Ivlev Date: Wed, 18 Dec 2024 19:12:30 +0400 Subject: [PATCH] vocabularies --- package-lock.json | 67 ++++++++++++++++++++++++++++++- package.json | 3 ++ src/components/NoVocabularies.tsx | 8 ++++ src/components/UI/HeaderMenu.tsx | 17 ++++++-- src/routes/Home.tsx | 19 ++++++--- src/types/LanguageEntity.ts | 5 +++ 6 files changed, 108 insertions(+), 11 deletions(-) create mode 100644 src/components/NoVocabularies.tsx create mode 100644 src/types/LanguageEntity.ts diff --git a/package-lock.json b/package-lock.json index 5cd4762..32653b8 100644 --- a/package-lock.json +++ b/package-lock.json @@ -8,6 +8,9 @@ "name": "wokapp-ui", "version": "0.0.0", "dependencies": { + "@fortawesome/fontawesome-svg-core": "^6.7.2", + "@fortawesome/free-solid-svg-icons": "^6.7.2", + "@fortawesome/react-fontawesome": "^0.2.2", "axios": "^1.7.9", "react": "^18.3.1", "react-dom": "^18.3.1", @@ -2156,6 +2159,52 @@ "node": "^18.18.0 || ^20.9.0 || >=21.1.0" } }, + "node_modules/@fortawesome/fontawesome-common-types": { + "version": "6.7.2", + "resolved": "https://registry.npmjs.org/@fortawesome/fontawesome-common-types/-/fontawesome-common-types-6.7.2.tgz", + "integrity": "sha512-Zs+YeHUC5fkt7Mg1l6XTniei3k4bwG/yo3iFUtZWd/pMx9g3fdvkSK9E0FOC+++phXOka78uJcYb8JaFkW52Xg==", + "license": "MIT", + "engines": { + "node": ">=6" + } + }, + "node_modules/@fortawesome/fontawesome-svg-core": { + "version": "6.7.2", + "resolved": "https://registry.npmjs.org/@fortawesome/fontawesome-svg-core/-/fontawesome-svg-core-6.7.2.tgz", + "integrity": "sha512-yxtOBWDrdi5DD5o1pmVdq3WMCvnobT0LU6R8RyyVXPvFRd2o79/0NCuQoCjNTeZz9EzA9xS3JxNWfv54RIHFEA==", + "license": "MIT", + "dependencies": { + "@fortawesome/fontawesome-common-types": "6.7.2" + }, + "engines": { + "node": ">=6" + } + }, + "node_modules/@fortawesome/free-solid-svg-icons": { + "version": "6.7.2", + "resolved": "https://registry.npmjs.org/@fortawesome/free-solid-svg-icons/-/free-solid-svg-icons-6.7.2.tgz", + "integrity": "sha512-GsBrnOzU8uj0LECDfD5zomZJIjrPhIlWU82AHwa2s40FKH+kcxQaBvBo3Z4TxyZHIyX8XTDxsyA33/Vx9eFuQA==", + "license": "(CC-BY-4.0 AND MIT)", + "dependencies": { + "@fortawesome/fontawesome-common-types": "6.7.2" + }, + "engines": { + "node": ">=6" + } + }, + "node_modules/@fortawesome/react-fontawesome": { + "version": "0.2.2", + "resolved": "https://registry.npmjs.org/@fortawesome/react-fontawesome/-/react-fontawesome-0.2.2.tgz", + "integrity": "sha512-EnkrprPNqI6SXJl//m29hpaNzOp1bruISWaOiRtkMi/xSvHJlzc2j2JAYS7egxt/EbjSNV/k6Xy0AQI6vB2+1g==", + "license": "MIT", + "dependencies": { + "prop-types": "^15.8.1" + }, + "peerDependencies": { + "@fortawesome/fontawesome-svg-core": "~1 || ~6", + "react": ">=16.3" + } + }, "node_modules/@humanfs/core": { "version": "0.19.1", "resolved": "https://registry.npmjs.org/@humanfs/core/-/core-0.19.1.tgz", @@ -6251,7 +6300,6 @@ "version": "4.1.1", "resolved": "https://registry.npmjs.org/object-assign/-/object-assign-4.1.1.tgz", "integrity": "sha512-rJgTQnkUnH1sFw8yT6VSU3zD3sWmu6sZhIseY8VX+GRu3P6F7Fu+JNDoXfklElbLJSnc3FUQHVe4cU5hj+BcUg==", - "dev": true, "license": "MIT", "engines": { "node": ">=0.10.0" @@ -6713,6 +6761,17 @@ "url": "https://github.com/sponsors/sindresorhus" } }, + "node_modules/prop-types": { + "version": "15.8.1", + "resolved": "https://registry.npmjs.org/prop-types/-/prop-types-15.8.1.tgz", + "integrity": "sha512-oj87CgZICdulUohogVAR7AjlC0327U4el4L6eAvOqCeudMDVU0NThNaV+b9Df4dXgSP1gXMTnPdhfe/2qDH5cg==", + "license": "MIT", + "dependencies": { + "loose-envify": "^1.4.0", + "object-assign": "^4.1.1", + "react-is": "^16.13.1" + } + }, "node_modules/proxy-from-env": { "version": "1.1.0", "resolved": "https://registry.npmjs.org/proxy-from-env/-/proxy-from-env-1.1.0.tgz", @@ -6821,6 +6880,12 @@ "react": "^18.3.1" } }, + "node_modules/react-is": { + "version": "16.13.1", + "resolved": "https://registry.npmjs.org/react-is/-/react-is-16.13.1.tgz", + "integrity": "sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ==", + "license": "MIT" + }, "node_modules/react-refresh": { "version": "0.14.2", "resolved": "https://registry.npmjs.org/react-refresh/-/react-refresh-0.14.2.tgz", diff --git a/package.json b/package.json index 16a9257..3371c57 100644 --- a/package.json +++ b/package.json @@ -11,6 +11,9 @@ "preview": "vite preview" }, "dependencies": { + "@fortawesome/fontawesome-svg-core": "^6.7.2", + "@fortawesome/free-solid-svg-icons": "^6.7.2", + "@fortawesome/react-fontawesome": "^0.2.2", "axios": "^1.7.9", "react": "^18.3.1", "react-dom": "^18.3.1", diff --git a/src/components/NoVocabularies.tsx b/src/components/NoVocabularies.tsx new file mode 100644 index 0000000..4a09deb --- /dev/null +++ b/src/components/NoVocabularies.tsx @@ -0,0 +1,8 @@ +export const NoVocabularies = () => { + return <> +

+ Oh, no! +

+

Looks like you don't have any vocabularies in you account. Add a new one?

+ +} diff --git a/src/components/UI/HeaderMenu.tsx b/src/components/UI/HeaderMenu.tsx index 5b77fb7..70300b4 100644 --- a/src/components/UI/HeaderMenu.tsx +++ b/src/components/UI/HeaderMenu.tsx @@ -1,5 +1,8 @@ import {useAuth} from "../../context/AuthContext.tsx"; import {useNavigate} from "react-router-dom"; +import mainLogo from "../../assets/logo.png"; +import {FontAwesomeIcon} from "@fortawesome/react-fontawesome"; +import {faSignOut} from "@fortawesome/free-solid-svg-icons"; const HeaderMenu = () => { const auth = useAuth() @@ -9,12 +12,18 @@ const HeaderMenu = () => { navigate('/'); } return <> -
-
- Menu will be placed here +
+
+
+ {"logo"}/ +
+ +
+
- Logout +
diff --git a/src/routes/Home.tsx b/src/routes/Home.tsx index e004679..9afb7eb 100644 --- a/src/routes/Home.tsx +++ b/src/routes/Home.tsx @@ -1,18 +1,25 @@ import HeaderMenu from "../components/UI/HeaderMenu.tsx"; import {useEffect, useState} from "react"; import api from "../api.tsx"; +import {LanguageEntity} from "../types/LanguageEntity.ts"; +import {NoVocabularies} from "../components/NoVocabularies.tsx"; function Home() { - const [message,setMessage] = useState(''); + const [languageEntity, setLanguageEntity] = useState([]); useEffect(() => { - api.get('test/hello').then((response) => { - setMessage(response.data.message); + api.get('vocabulary').then((response) => { + console.log(response.data); + setLanguageEntity(response.data); }) - }, [message]) + }, []) return <> - { message } -

Home

+ +
+

Welcome

+ {languageEntity.length === 0 && } +
+ } diff --git a/src/types/LanguageEntity.ts b/src/types/LanguageEntity.ts new file mode 100644 index 0000000..14b978f --- /dev/null +++ b/src/types/LanguageEntity.ts @@ -0,0 +1,5 @@ +export interface LanguageEntity { + id: string; + name: string; + isoCode: string; +} \ No newline at end of file