mirror of
https://github.com/Radiquum/AniX.git
synced 2025-04-06 00:04:39 +00:00
frontend: profile and other minor improvements
This commit is contained in:
parent
1a83a80e07
commit
9392345480
GPG key ID:
858E8EE696525EED
5 changed files with 134 additions and 8 deletions
|
|
@ -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 (
|
||||
<>
|
||||
<div className="grid">
|
||||
|
|
@ -66,6 +108,30 @@ export const UserProfile = (props) => {
|
|||
</div>
|
||||
</div>
|
||||
</article>
|
||||
{hasSocials ? (
|
||||
<article className="fill">
|
||||
<i className="extra">workspaces</i>
|
||||
<div className="row">
|
||||
{socials.map((item) => {
|
||||
return item.nickname != "" ? (
|
||||
<button
|
||||
className="large circle tertiary-container"
|
||||
key={item.name}
|
||||
onClick={() =>
|
||||
router.push(`${item.urlPrefix}/${item.nickname}`)
|
||||
}
|
||||
>
|
||||
<FontAwesomeIcon icon={item.icon} />
|
||||
</button>
|
||||
) : (
|
||||
""
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
</article>
|
||||
) : (
|
||||
""
|
||||
)}
|
||||
</div>
|
||||
<div className="s4">
|
||||
<article className="secondary-container">
|
||||
|
|
@ -163,7 +229,7 @@ export const UserProfile = (props) => {
|
|||
</nav>
|
||||
</article>
|
||||
) : (
|
||||
""
|
||||
<progress></progress>
|
||||
)}
|
||||
</>
|
||||
);
|
||||
|
|
|
|||
|
|
@ -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 });
|
||||
};
|
||||
|
|
|
|||
|
|
@ -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 ? (
|
||||
<UserProfile profile={userStore.user.profile} />
|
||||
{userStore.isAuth ? (
|
||||
userStore.user ? (
|
||||
<UserProfile profile={userStore.user.profile} />
|
||||
) : (
|
||||
<progress></progress>
|
||||
)
|
||||
) : (
|
||||
<progress></progress>
|
||||
<LogInNeeded />
|
||||
)}
|
||||
</>
|
||||
);
|
||||
|
|
|
|||
53
frontend/package-lock.json
generated
53
frontend/package-lock.json
generated
|
|
@ -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",
|
||||
|
|
|
|||
|
|
@ -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",
|
||||
|
|
|
|||
Loading…
Add table
Reference in a new issue