From 939234548025f483a1e3fe94f99799848e4685cc Mon Sep 17 00:00:00 2001 From: Kentai Radiquum Date: Fri, 26 Apr 2024 04:20:59 +0500 Subject: [PATCH] frontend: profile and other minor improvements --- .../components/UserProfile/UserProfile.jsx | 68 ++++++++++++++++++- frontend/app/login/page.js | 7 ++ frontend/app/profile/page.js | 11 ++- frontend/package-lock.json | 53 +++++++++++++-- frontend/package.json | 3 + 5 files changed, 134 insertions(+), 8 deletions(-) diff --git a/frontend/app/components/UserProfile/UserProfile.jsx b/frontend/app/components/UserProfile/UserProfile.jsx index 5d0029a..dbdb1af 100644 --- a/frontend/app/components/UserProfile/UserProfile.jsx +++ b/frontend/app/components/UserProfile/UserProfile.jsx @@ -3,6 +3,14 @@ import { ReleaseCard } from "../ReleaseCard/ReleaseCard"; import { getData } from "@/app/api/api-utils"; import { endpoints } from "@/app/api/config"; import { useEffect, useState } from "react"; +import { useRouter } from "next/navigation"; +import { FontAwesomeIcon } from "@fortawesome/react-fontawesome"; +import { + faTiktok, + faVk, + faInstagram, + faTelegram, +} from "@fortawesome/free-brands-svg-icons"; function getNoun(number, one, two, five) { let n = Math.abs(number); @@ -33,6 +41,7 @@ function convertMinutes(min) { export const UserProfile = (props) => { const [lastWatched, setLastWatched] = useState(); + const router = useRouter(); useEffect(() => { async function _getData() { @@ -45,6 +54,39 @@ export const UserProfile = (props) => { // eslint-disable-next-line react-hooks/exhaustive-deps }, []); + const hasSocials = + props.profile.vk_page != "" || + props.profile.tg_page != "" || + props.profile.tt_page != "" || + props.profile.inst_page != "" || + false; + const socials = [ + { + name: "vk", + nickname: props.profile.vk_page, + icon: faVk, + urlPrefix: "https://vk.com", + }, + { + name: "telegram", + nickname: props.profile.tg_page, + icon: faTelegram, + urlPrefix: "https://t.me", + }, + { + name: "tiktok", + nickname: props.profile.tt_page, + icon: faTiktok, + urlPrefix: "https://tiktok.com", + }, + { + name: "instagram", + nickname: props.profile.inst_page, + icon: faInstagram, + urlPrefix: "https://instagram.com", + }, + ]; + return ( <>
@@ -66,6 +108,30 @@ export const UserProfile = (props) => {
+ {hasSocials ? ( +
+ workspaces +
+ {socials.map((item) => { + return item.nickname != "" ? ( + + ) : ( + "" + ); + })} +
+
+ ) : ( + "" + )}
@@ -163,7 +229,7 @@ export const UserProfile = (props) => {
) : ( - "" + )} ); diff --git a/frontend/app/login/page.js b/frontend/app/login/page.js index 52c3725..98a1c0d 100644 --- a/frontend/app/login/page.js +++ b/frontend/app/login/page.js @@ -11,6 +11,13 @@ export default function LoginPage() { const router = useRouter(); const [authData, setAuthData] = useState({ email: "", password: "" }); + useEffect(() => { + if (userStore.isAuth) { + router.push("/profile"); + } + // eslint-disable-next-line react-hooks/exhaustive-deps + }, []); + const handleInput = (e) => { setAuthData({ ...authData, [e.target.name]: e.target.value }); }; diff --git a/frontend/app/profile/page.js b/frontend/app/profile/page.js index 2696919..f4d2f01 100644 --- a/frontend/app/profile/page.js +++ b/frontend/app/profile/page.js @@ -1,16 +1,21 @@ "use client"; import { useUserStore } from "@/app/store/user-store"; import { UserProfile } from "@/app/components/UserProfile/UserProfile"; +import { LogInNeeded } from "../components/LogInNeeded/LogInNeeded"; export default function Profile() { const userStore = useUserStore(); return ( <> - {userStore.user ? ( - + {userStore.isAuth ? ( + userStore.user ? ( + + ) : ( + + ) ) : ( - + )} ); diff --git a/frontend/package-lock.json b/frontend/package-lock.json index ae54458..d597d88 100644 --- a/frontend/package-lock.json +++ b/frontend/package-lock.json @@ -8,6 +8,9 @@ "name": "frontend", "version": "0.1.0", "dependencies": { + "@fortawesome/fontawesome-svg-core": "^6.5.2", + "@fortawesome/free-brands-svg-icons": "^6.5.2", + "@fortawesome/react-fontawesome": "^0.2.0", "beercss": "^3.5.1", "material-dynamic-colors": "^1.1.0", "react": "^18", @@ -92,6 +95,51 @@ "node": "^12.0.0 || ^14.0.0 || >=16.0.0" } }, + "node_modules/@fortawesome/fontawesome-common-types": { + "version": "6.5.2", + "resolved": "https://registry.npmjs.org/@fortawesome/fontawesome-common-types/-/fontawesome-common-types-6.5.2.tgz", + "integrity": "sha512-gBxPg3aVO6J0kpfHNILc+NMhXnqHumFxOmjYCFfOiLZfwhnnfhtsdA2hfJlDnj+8PjAs6kKQPenOTKj3Rf7zHw==", + "hasInstallScript": true, + "engines": { + "node": ">=6" + } + }, + "node_modules/@fortawesome/fontawesome-svg-core": { + "version": "6.5.2", + "resolved": "https://registry.npmjs.org/@fortawesome/fontawesome-svg-core/-/fontawesome-svg-core-6.5.2.tgz", + "integrity": "sha512-5CdaCBGl8Rh9ohNdxeeTMxIj8oc3KNBgIeLMvJosBMdslK/UnEB8rzyDRrbKdL1kDweqBPo4GT9wvnakHWucZw==", + "hasInstallScript": true, + "dependencies": { + "@fortawesome/fontawesome-common-types": "6.5.2" + }, + "engines": { + "node": ">=6" + } + }, + "node_modules/@fortawesome/free-brands-svg-icons": { + "version": "6.5.2", + "resolved": "https://registry.npmjs.org/@fortawesome/free-brands-svg-icons/-/free-brands-svg-icons-6.5.2.tgz", + "integrity": "sha512-zi5FNYdmKLnEc0jc0uuHH17kz/hfYTg4Uei0wMGzcoCL/4d3WM3u1VMc0iGGa31HuhV5i7ZK8ZlTCQrHqRHSGQ==", + "hasInstallScript": true, + "dependencies": { + "@fortawesome/fontawesome-common-types": "6.5.2" + }, + "engines": { + "node": ">=6" + } + }, + "node_modules/@fortawesome/react-fontawesome": { + "version": "0.2.0", + "resolved": "https://registry.npmjs.org/@fortawesome/react-fontawesome/-/react-fontawesome-0.2.0.tgz", + "integrity": "sha512-uHg75Rb/XORTtVt7OS9WoK8uM276Ufi7gCzshVWkUJbHhh3svsUUeqXerrM96Wm7fRiDzfKRwSoahhMIkGAYHw==", + "dependencies": { + "prop-types": "^15.8.1" + }, + "peerDependencies": { + "@fortawesome/fontawesome-svg-core": "~1 || ~6", + "react": ">=16.3" + } + }, "node_modules/@humanwhocodes/config-array": { "version": "0.11.14", "resolved": "https://registry.npmjs.org/@humanwhocodes/config-array/-/config-array-0.11.14.tgz", @@ -3185,7 +3233,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, "engines": { "node": ">=0.10.0" } @@ -3515,7 +3562,6 @@ "version": "15.8.1", "resolved": "https://registry.npmjs.org/prop-types/-/prop-types-15.8.1.tgz", "integrity": "sha512-oj87CgZICdulUohogVAR7AjlC0327U4el4L6eAvOqCeudMDVU0NThNaV+b9Df4dXgSP1gXMTnPdhfe/2qDH5cg==", - "dev": true, "dependencies": { "loose-envify": "^1.4.0", "object-assign": "^4.1.1", @@ -3578,8 +3624,7 @@ "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==", - "dev": true + "integrity": "sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ==" }, "node_modules/reflect.getprototypeof": { "version": "1.0.6", diff --git a/frontend/package.json b/frontend/package.json index 6cf8e4f..03f8643 100644 --- a/frontend/package.json +++ b/frontend/package.json @@ -9,6 +9,9 @@ "lint": "next lint" }, "dependencies": { + "@fortawesome/fontawesome-svg-core": "^6.5.2", + "@fortawesome/free-brands-svg-icons": "^6.5.2", + "@fortawesome/react-fontawesome": "^0.2.0", "beercss": "^3.5.1", "material-dynamic-colors": "^1.1.0", "react": "^18",