From 5e1d4a38ff90e96019a860095b84621d766cee69 Mon Sep 17 00:00:00 2001
From: tigran <tigran.contact@gmail.com>
Date: Tue, 24 Dec 2024 16:57:00 +0400
Subject: [PATCH] added user profile and logout

---
 package-lock.json                    | 10 ++++++
 package.json                         |  1 +
 src/components/Comment/style.ts      |  1 +
 src/components/Editor/index.tsx      | 54 ++++++++++++++++------------
 src/components/UserProfile/index.tsx | 32 +++++++++++++++++
 src/components/UserProfile/style.ts  | 21 +++++++++++
 src/providers/Requests/index.tsx     | 16 ++++-----
 src/utils/getToken.ts                |  9 +++++
 8 files changed, 114 insertions(+), 30 deletions(-)
 create mode 100644 src/components/UserProfile/index.tsx
 create mode 100644 src/components/UserProfile/style.ts
 create mode 100644 src/utils/getToken.ts

diff --git a/package-lock.json b/package-lock.json
index 9238635..0a8831b 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -16,6 +16,7 @@
         "clientjs": "^0.2.1",
         "dayjs": "^1.11.9",
         "i18next": "^19.8.3",
+        "jwt-decode": "^4.0.0",
         "lscache": "^1.3.0",
         "react": ">= 16.8.0",
         "react-dom": "^17.0.1",
@@ -3598,6 +3599,15 @@
         "node": ">=6"
       }
     },
+    "node_modules/jwt-decode": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/jwt-decode/-/jwt-decode-4.0.0.tgz",
+      "integrity": "sha512-+KJGIyHgkGuIq3IEBNftfhW/LfWhXUIY6OmyVWjliu5KH1y0fw7VQ8YndE2O4qZdMSd9SqbnC8GOcZEy0Om7sA==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=18"
+      }
+    },
     "node_modules/lightningcss": {
       "version": "1.24.0",
       "resolved": "https://registry.npmjs.org/lightningcss/-/lightningcss-1.24.0.tgz",
diff --git a/package.json b/package.json
index 9a19f33..0390390 100644
--- a/package.json
+++ b/package.json
@@ -10,6 +10,7 @@
     "clientjs": "^0.2.1",
     "dayjs": "^1.11.9",
     "i18next": "^19.8.3",
+    "jwt-decode": "^4.0.0",
     "lscache": "^1.3.0",
     "react": ">= 16.8.0",
     "react-dom": "^17.0.1",
diff --git a/src/components/Comment/style.ts b/src/components/Comment/style.ts
index 7ab44c0..4d23a2d 100644
--- a/src/components/Comment/style.ts
+++ b/src/components/Comment/style.ts
@@ -56,6 +56,7 @@ export const Body = styled.div`
   font-size: 14px;
   font-weight: 400;
   line-height: 1.5;
+  word-wrap: anywhere;
   letter-spacing: 0.3px;
   white-space: break-spaces;
   color: ${props => props.theme.textColor};
diff --git a/src/components/Editor/index.tsx b/src/components/Editor/index.tsx
index ec16e6a..b98e282 100644
--- a/src/components/Editor/index.tsx
+++ b/src/components/Editor/index.tsx
@@ -2,7 +2,9 @@ import React, { useState, useLayoutEffect, useEffect, useRef } from 'react';
 import lscache from 'lscache';
 import { useCommentsDispatch, IComment } from 'providers/Comments';
 import { Container, Textarea, Button, Footer, Input, Form } from './style';
+import UserProfile from 'components/UserProfile';
 import { useTranslation } from 'react-i18next';
+import { getToken } from 'utils/getToken';
 
 type Props = {
   replyTo?: IComment;
@@ -13,6 +15,7 @@ export default function Editor(props: Props) {
   const [loading, setLoading] = useState(false);
   const [name, setName] = useState(lscache.get('name') || '');
   const [email, setEmail] = useState(lscache.get('email') || '');
+  const token = getToken();
 
   const form: React.RefObject<HTMLFormElement> = useRef(null);
   const submit: React.RefObject<HTMLButtonElement> = useRef(null);
@@ -75,28 +78,35 @@ export default function Editor(props: Props) {
           required
         />
         <Footer>
-          <Input
-            onChange={e => {
-              setName(e.target.value);
-              lscache.set('name', e.target.value);
-            }}
-            placeholder={t('USERNAME')}
-            disabled={loading}
-            value={name}
-            type="text"
-            required
-          />
-          <Input
-            onChange={e => {
-              setEmail(e.target.value);
-              lscache.set('email', e.target.value);
-            }}
-            placeholder={t('EMAIL')}
-            disabled={loading}
-            value={email}
-            type="email"
-            required
-          />
+          {token ? (
+            <UserProfile />
+          ) : (
+            <>
+              <Input
+                onChange={e => {
+                  setName(e.target.value);
+                  lscache.set('name', e.target.value);
+                }}
+                placeholder={t('USERNAME')}
+                disabled={loading}
+                value={name}
+                type="text"
+                required
+              />
+              <Input
+                onChange={e => {
+                  setEmail(e.target.value);
+                  lscache.set('email', e.target.value);
+                }}
+                placeholder={t('EMAIL')}
+                disabled={loading}
+                value={email}
+                type="email"
+                required
+              />
+            </>
+          )}
+
           <Button ref={submit} type="submit" disabled={loading}>
             {t('POST')}
           </Button>
diff --git a/src/components/UserProfile/index.tsx b/src/components/UserProfile/index.tsx
new file mode 100644
index 0000000..415b628
--- /dev/null
+++ b/src/components/UserProfile/index.tsx
@@ -0,0 +1,32 @@
+import React, { useCallback } from 'react';
+import { setCookie } from 'react-use-cookie';
+import { jwtDecode } from 'jwt-decode';
+import { Profile, Logout } from './style';
+import { getToken } from 'utils/getToken';
+
+function UserProfile() {
+  const token = getToken();
+  const payload = jwtDecode(token);
+
+  const onLogout = useCallback(() => {
+    setCookie('zoommentToken', '', { days: -1 });
+
+    const url = new URL(window.location.href);
+
+    if (url.searchParams.has('zoommentToken')) {
+      url.searchParams.delete('zoommentToken');
+    }
+
+    window.location.href = url.toString();
+  }, []);
+
+  return (
+    payload && (
+      <Profile>
+        {payload.email} (<Logout onClick={onLogout}>logout</Logout>)
+      </Profile>
+    )
+  );
+}
+
+export default UserProfile;
diff --git a/src/components/UserProfile/style.ts b/src/components/UserProfile/style.ts
new file mode 100644
index 0000000..bade6a6
--- /dev/null
+++ b/src/components/UserProfile/style.ts
@@ -0,0 +1,21 @@
+import styled from 'styled-components';
+
+export const Profile = styled.div`
+  width: 100%;
+  line-height: 1;
+  font-size: 11px;
+  padding: 10px 10px;
+  font-weight: 700;
+  color: ${props => props.theme.textColor};
+  display: flex;
+  align-items: center;
+`;
+
+export const Logout = styled.span`
+  line-height: 1;
+  font-size: 11px;
+  font-weight: 700;
+  color: #e33725;
+  text-decoration: underline;
+  cursor: pointer;
+`;
diff --git a/src/providers/Requests/index.tsx b/src/providers/Requests/index.tsx
index 66ac0fc..25c698a 100644
--- a/src/providers/Requests/index.tsx
+++ b/src/providers/Requests/index.tsx
@@ -1,13 +1,15 @@
 import React, { useState, useMemo, useEffect } from 'react';
 import axios, { AxiosInstance } from 'axios';
 import { ClientJS } from 'clientjs';
-import { getCookie, setCookie } from 'react-use-cookie';
+import { setCookie } from 'react-use-cookie';
 import { ErrorMessage, Close } from '../Comments/style';
+import { getToken } from 'utils/getToken';
 import { FadeIn } from './style';
 
 const RequestContext = React.createContext<
   | {
       instance: AxiosInstance;
+      token: string;
     }
   | undefined
 >(undefined);
@@ -27,15 +29,13 @@ type Props = {
 export default function RequestProvider(props: Props) {
   const [error, setError] = useState('');
 
-  const searchParams = new URL(window.location.href).searchParams;
-  const zoommentToken = searchParams.get('zoommentToken');
-  const token = zoommentToken || getCookie('zoommentToken');
+  const token = getToken();
 
   useEffect(() => {
-    if (zoommentToken) {
-      setCookie('zoommentToken', zoommentToken);
+    if (token) {
+      setCookie('zoommentToken', token);
     }
-  }, [zoommentToken]);
+  }, [token]);
 
   const instance = useMemo(() => {
     const pageId = `${window.location.hostname}${window.location.pathname}`;
@@ -70,7 +70,7 @@ export default function RequestProvider(props: Props) {
   }, [axios]);
 
   return (
-    <RequestContext.Provider value={{ instance }}>
+    <RequestContext.Provider value={{ instance, token }}>
       {error && (
         <ErrorMessage>
           {error} <Close onClick={() => setError('')} />
diff --git a/src/utils/getToken.ts b/src/utils/getToken.ts
new file mode 100644
index 0000000..f8b1572
--- /dev/null
+++ b/src/utils/getToken.ts
@@ -0,0 +1,9 @@
+import { getCookie } from 'react-use-cookie';
+
+export const getToken = () => {
+  const searchParams = new URL(window.location.href).searchParams;
+  const zoommentToken = searchParams.get('zoommentToken');
+  const token = zoommentToken || getCookie('zoommentToken');
+
+  return token;
+};