frontend: profile and other minor improvements

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 (
     <>
       <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>
       )}
     </>
   );

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 });
   };

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 ? (
-        <UserProfile profile={userStore.user.profile} />
+        userStore.user ? (
+          <UserProfile profile={userStore.user.profile} />
+        ) : (
+          <progress></progress>
+        )
       ) : (
-        <progress></progress>
+        <LogInNeeded />
       )}
     </>
   );

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==",
+      "integrity": "sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ=="
-      "dev": true
     },
     "node_modules/reflect.getprototypeof": {
       "version": "1.0.6",

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",