added user profile and logout

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

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

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>

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;

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;
+`;

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

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