clean up the system component

src/Components/Private/Edit/EditSystem.js

@@ -0,0 +1,135 @@
+import React, { useState } from "react";
+
+import { useForm } from "react-hook-form";
+import * as BS from "react-bootstrap";
+import moment from "moment";
+import "moment-timezone";
+
+import API_URL from "../../../Constants/constants.js";
+
+const EditSystem = ({
+  name,
+  tag,
+  timezone,
+  avatar,
+  editDesc,
+  setEditMode,
+  setErrorAlert,
+  setUser,
+  user,
+}) => {
+  const [invalidTimezone, setInvalidTimezone] = useState(false);
+
+  const { register: registerEdit, handleSubmit: handleSubmitEdit } = useForm();
+
+  const submitEdit = (data) => {
+    if (data.tz) {
+      if (!moment.tz.zone(data.tz)) {
+        setInvalidTimezone(true);
+        return;
+      }
+    }
+    fetch(`${API_URL}s`, {
+      method: "PATCH",
+      body: JSON.stringify(data),
+      headers: {
+        "Content-Type": "application/json",
+        Authorization: JSON.stringify(localStorage.getItem("token")).slice(
+          1,
+          -1
+        ),
+      },
+    })
+      .then((res) => res.json())
+      .then(() => {
+        setUser((prevState) => {
+          return { ...prevState, ...data };
+        });
+        localStorage.setItem("user", JSON.stringify(user));
+        setEditMode(false);
+      })
+      .catch((error) => {
+        console.error(error);
+        setErrorAlert(true);
+      });
+  };
+
+  return (
+    <BS.Form onSubmit={handleSubmitEdit(submitEdit)}>
+      <BS.Form.Text className="mb-4">
+        <b>Note:</b> if you refresh the page, the old data might show up again,
+        this is due to the bot caching data.
+        <br />
+        Try editing a member to clear the cache, or wait a few minutes before
+        refreshing.
+      </BS.Form.Text>
+      <BS.Form.Row>
+        <BS.Col className="mb-lg-2" xs={12} lg={3}>
+          <BS.Form.Label>Name:</BS.Form.Label>
+          <BS.Form.Control
+            name="name"
+            {...registerEdit("name")}
+            defaultValue={name}
+          />
+        </BS.Col>
+        <BS.Col className="mb-lg-2" xs={12} lg={3}>
+          <BS.Form.Label>Tag:</BS.Form.Label>
+          <BS.Form.Control
+            name="tag"
+            {...registerEdit("tag")}
+            defaultValue={tag}
+          />
+        </BS.Col>
+        <BS.Col className="mb-lg-2" xs={12} lg={3}>
+          <BS.Form.Label>Timezone:</BS.Form.Label>
+          <BS.Form.Control
+            name="tz"
+            {...registerEdit("tz")}
+            defaultValue={timezone}
+            required
+          />
+          {invalidTimezone ? (
+            <BS.Form.Text>
+              Please enter a valid
+              <a
+                href="https://xske.github.io/tz/"
+                rel="noreferrer"
+                target="_blank"
+              >
+                timezone
+              </a>
+            </BS.Form.Text>
+          ) : (
+            ""
+          )}
+        </BS.Col>
+        <BS.Col className="mb-lg-2" xs={12} lg={3}>
+          <BS.Form.Label>Avatar url:</BS.Form.Label>
+          <BS.Form.Control
+            name="avatar_url"
+            {...registerEdit("avatar_url")}
+            defaultValue={avatar}
+          />
+        </BS.Col>
+      </BS.Form.Row>
+      <BS.Form.Group className="mt-3">
+        <BS.Form.Label>Description:</BS.Form.Label>
+        <BS.Form.Control
+          maxLength="1000"
+          as="textarea"
+          name="description"
+          {...registerEdit("description")}
+          defaultValue={editDesc}
+        />
+      </BS.Form.Group>
+      <BS.Button variant="light" onClick={() => setEditMode(false)}>
+        Cancel
+      </BS.Button>{" "}
+      <BS.Button variant="primary" type="submit">
+        Submit
+      </BS.Button>
+    </BS.Form>
+  );
+};
+
+export default EditSystem;

src/Components/Private/Edit/EditSystemPrivacy.js

@@ -0,0 +1,109 @@
+import React from "react";
+
+import { useForm } from "react-hook-form";
+import * as BS from "react-bootstrap";
+
+import API_URL from "../../../Constants/constants.js";
+
+const EditSystemPrivacy = ({
+  setErrorAlert,
+  setUser,
+  user,
+  setPrivacyEdit,
+}) => {
+  const { register: registerPrivacy, handleSubmit: handleSubmitPrivacy } =
+    useForm();
+
+  // submit privacy stuffs
+  const submitPrivacy = (data) => {
+    fetch(`${API_URL}s`, {
+      method: "PATCH",
+      body: JSON.stringify(data),
+      headers: {
+        "Content-Type": "application/json",
+        Authorization: JSON.stringify(localStorage.getItem("token")).slice(
+          1,
+          -1
+        ),
+      },
+    })
+      .then((res) => res.json())
+      .then((data) => {
+        setUser((prevState) => {
+          return { ...prevState, ...data };
+        });
+        localStorage.setItem("user", JSON.stringify(user));
+        setPrivacyEdit(false);
+      })
+      .catch((error) => {
+        console.error(error);
+        setErrorAlert(true);
+      });
+  };
+
+  return (
+    <BS.Form onSubmit={handleSubmitPrivacy(submitPrivacy)}>
+      <hr />
+      <h5>Editing privacy settings</h5>
+      <BS.Form.Row className="mb-3 mb-lg-0">
+        <BS.Col className="mb-lg-2" xs={12} lg={3}>
+          <BS.Form.Label>Description:</BS.Form.Label>
+          <BS.Form.Control
+            name="description_privacy"
+            defaultValue={user.description_privacy}
+            as="select"
+            {...registerPrivacy("description_privacy")}
+          >
+            <option>public</option>
+            <option>private</option>
+          </BS.Form.Control>
+        </BS.Col>
+        <BS.Col className="mb-lg-2" xs={12} lg={3}>
+          <BS.Form.Label>Member list:</BS.Form.Label>
+          <BS.Form.Control
+            name="member_list_privacy"
+            defaultValue={user.member_list_privacy}
+            as="select"
+            {...registerPrivacy("member_list_privacy")}
+          >
+            <option>public</option>
+            <option>private</option>
+          </BS.Form.Control>
+        </BS.Col>
+        <BS.Col className="mb-lg-2" xs={12} lg={3}>
+          <BS.Form.Label>Front:</BS.Form.Label>
+          <BS.Form.Control
+            name="front_privacy"
+            as="select"
+            defaultValue={user.front_privacy}
+            {...registerPrivacy("front_privacy")}
+          >
+            <option>public</option>
+            <option>private</option>
+          </BS.Form.Control>
+        </BS.Col>
+        <BS.Col className="mb-lg-2" xs={12} lg={3}>
+          <BS.Form.Label>Front history:</BS.Form.Label>
+          <BS.Form.Control
+            name="front_history_privacy"
+            defaultValue={user.front_history_privacy}
+            as="select"
+            {...registerPrivacy("front_history_privacy")}
+          >
+            <option>public</option>
+            <option>private</option>
+          </BS.Form.Control>
+        </BS.Col>
+      </BS.Form.Row>
+      <BS.Button variant="light" onClick={() => setPrivacyEdit(false)}>
+        Cancel
+      </BS.Button>{" "}
+      <BS.Button variant="primary" type="submit">
+        Submit
+      </BS.Button>
+      <hr />
+    </BS.Form>
+  );
+};
+
+export default EditSystemPrivacy;

src/Components/Private/System.js

@@ -1,225 +1,244 @@
-import React, { useState, useEffect } from 'react';
+import React, { useState, useEffect } from "react";
-import  * as BS from 'react-bootstrap'
+import * as BS from "react-bootstrap";
 import { useRouteMatch } from "react-router-dom";
-import { useForm } from "react-hook-form";
+import autosize from "autosize";
-import autosize from 'autosize';
+import "moment-timezone";
-import moment from 'moment';
+import Popup from "reactjs-popup";
-import 'moment-timezone';
+import Twemoji from "react-twemoji";
-import Popup from 'reactjs-popup';
-import Twemoji from 'react-twemoji';
-
-import API_URL from "../../Constants/constants.js";
 
 import history from "../../History.js";
-import defaultAvatar from '../../default_discord_avatar.png'
+import defaultAvatar from "../../default_discord_avatar.png";
 import { FaAddressCard } from "react-icons/fa";
+import EditSystem from "./Edit/EditSystem.js";
+import EditSystemPrivacy from "./Edit/EditSystemPrivacy.js";
 
 export default function System(props) {
-
+  // match the url, if there's a member ID there, don't render this component at all
   const match = useRouteMatch("/pk-webs/dash/:memberID");
 
-    const {
+  // get the user from the localstorage
-        register: registerEdit,
+  const [user, setUser] = useState(JSON.parse(localStorage.getItem("user")));
-        handleSubmit: handleSubmitEdit
-      } = useForm();
 
+  // bunch of useState stuff, used in the useEffect() hook below
+  const [name, setName] = useState("");
+  const [tag, setTag] = useState("");
+  const [timezone, setTimezone] = useState("");
+  const [avatar, setAvatar] = useState("");
+  const [desc, setDesc] = useState("");
+  const [editDesc, setEditDesc] = useState("");
 
-    const {
+  // more useState, this time to actually handle state
-        register: registerPrivacy,
+  // TODO: name them something more intuitive maybe?
-        handleSubmit: handleSubmitPrivacy
+  const [editMode, setEditMode] = useState(false);
-      } = useForm();
+  const [privacyEdit, setPrivacyEdit] = useState(false);
-
+  const [privacyView, setPrivacyView] = useState(false);
-    const [ user, setUser ] = useState(JSON.parse(localStorage.getItem('user')));
-
-    const [ name, setName ] = useState("");
-    const [ tag, setTag ] = useState("");
-    const [ timezone, setTimezone ] = useState("");
-    const [ avatar, setAvatar ] = useState("");
-    const [ desc, setDesc ] = useState("");
-    const [ editDesc, setEditDesc ] = useState("");
-
-    const [ editMode, setEditMode ] = useState(false);
-    const [ privacyMode, setPrivacyMode ] = useState(false);
-    const [ privacyView, setPrivacyView ] = useState(false);
-
-    const [ invalidTimezone, setInvalidTimezone ] = useState(false);
-    const [ errorAlert, setErrorAlert ] = useState(false);
 
+  const [errorAlert, setErrorAlert] = useState(false);
 
+  // this useEffect does a couple of things after the user is gotten from localstorage
   useEffect(() => {
-    const { toHTML } = require('../../Functions/discord-parser.js');
+    // first require the discord markdown parser
+    const { toHTML } = require("../../Functions/discord-parser.js");
 
+    // check if there's a name object in user, if it's null, set name to a blank string, otherwise set name to user.name
     if (user.name) {
       setName(user.name);
-    } else setName('');
+    } else setName("");
 
+    // same as above, but with the user tag instead
     if (user.tag) {
       setTag(user.tag);
-    } else setTag('');
+    } else setTag("");
 
+    // same as above but with timezone
     if (user.tz) {
       setTimezone(user.tz);
-    } else setTimezone('');
+    } else setTimezone("");
 
+    // also trims the avatar url so that 1. pngs won't be converted to jpegs and 2. won't be resized to 256x256
     if (user.avatar_url) {
-        var avatarsmall = user.avatar_url.replace('&format=jpeg', '');
+      var avatarsmall = user.avatar_url.replace("&format=jpeg", "");
-        setAvatar(avatarsmall.replace('?width=256&height=256', ''))
+      setAvatar(avatarsmall.replace("?width=256&height=256", ""));
-    } else setAvatar('')
+    } else setAvatar("");
 
+    // same as above, but with descriptions
+    // two description variables! one is just the plain description, the other is parsed and converted to html
     if (user.description) {
       setDesc(toHTML(user.description));
       setEditDesc(user.description);
-    } else { setDesc("(no description)");
+    } else {
+      setDesc("(no description)");
       setEditDesc("");
-}}, [user.description, user.tag, user.avatar_url, user.tz, user.name]);
-
-useEffect(() => {
-    autosize(document.querySelector('textarea'));
-})
-
-const submitEdit = data => {
-    if (data.tz) {
-        if (!moment.tz.zone(data.tz)) {
-        setInvalidTimezone(true);
-        return;
-        }
     }
+  }, [user.description, user.tag, user.avatar_url, user.tz, user.name]);
 
-    fetch(`${API_URL}s`,{
+  // this just resizes the textarea when filled with larger amounts of text
-        method: 'PATCH',
+  useEffect(() => {
-        body: JSON.stringify(data),
+    autosize(document.querySelector("textarea"));
-        headers: {
+  });
-            'Content-Type': 'application/json',
-            'Authorization': JSON.stringify(localStorage.getItem("token")).slice(1, -1)
-        }}).then (res => res.json()
-        ).then ( () => { setUser(prevState => {return {...prevState, ...data}}); localStorage.setItem('user', JSON.stringify(user)); setEditMode(false)}
-        ).catch (error => {
-            console.error(error);
-            setErrorAlert(true);
-        })
-
-    }
-
-const submitPrivacy = data => {
-    fetch(`${API_URL}s`,{
-        method: 'PATCH',
-        body: JSON.stringify(data),
-        headers: {
-          'Content-Type': 'application/json',
-          'Authorization': JSON.stringify(localStorage.getItem("token")).slice(1, -1)
-        }}).then (res => res.json()
-        ).then (data => { setUser(prevState => {return {...prevState, ...data}}); localStorage.setItem('user', JSON.stringify(user)); setPrivacyMode(false)}
-        ).catch (error => {
-            console.error(error);
-            setErrorAlert(true);
-        })
-}
 
   if (match) return null;
 
   return (
-           <BS.Card className="mb-3 mt-3 w-100" >
+    <BS.Card className="mb-3 mt-3 w-100">
       <BS.Card.Header className="d-flex align-items-center justify-content-between">
-                  <BS.Card.Title className="float-left"><FaAddressCard className="mr-4 float-left" /> {name} ({user.id})</BS.Card.Title> 
+        <BS.Card.Title className="float-left">
-                  { user.avatar_url ? <Popup trigger={<BS.Image src={`${user.avatar_url}`} style={{width: 50, height: 50}} tabIndex="0" className="float-right" roundedCircle />} className="avatar" modal>
+          <FaAddressCard className="mr-4 float-left" /> {name} ({user.id})
-                {close => (
+        </BS.Card.Title>
+        {user.avatar_url ? (
+          <Popup
+            trigger={
+              <BS.Image
+                src={`${user.avatar_url}`}
+                style={{ width: 50, height: 50 }}
+                tabIndex="0"
+                className="float-right"
+                roundedCircle
+              />
+            }
+            className="avatar"
+            modal
+          >
+            {(close) => (
               <div className="text-center w-100 m-0" onClick={() => close()}>
-                    <BS.Image src={`${avatar}`} style={{'max-width': 640, height: 'auto'}} thumbnail />
+                <BS.Image
+                  src={`${avatar}`}
+                  style={{ "max-width": 640, height: "auto" }}
+                  thumbnail
+                />
               </div>
             )}
-            </Popup> : 
+          </Popup>
-               <BS.Image src={defaultAvatar} style={{width: 50, height: 50}} className="float-right" roundedCircle />}
+        ) : (
+          <BS.Image
+            src={defaultAvatar}
+            style={{ width: 50, height: 50 }}
+            className="float-right"
+            roundedCircle
+          />
+        )}
       </BS.Card.Header>
       <BS.Card.Body>
-               { errorAlert ? <BS.Alert variant="danger">Something went wrong, please try logging in and out again.</BS.Alert> : "" }
+        {errorAlert ? (
-               { editMode ?  
+          <BS.Alert variant="danger">
-               <BS.Form onSubmit={handleSubmitEdit(submitEdit)}>
+            Something went wrong, please try logging in and out again.
-                <BS.Form.Text className='mb-4'><b>Note:</b> if you refresh the page, the old data might show up again, this is due to the bot caching data.<br/>
+          </BS.Alert>
-                Try editing a member to clear the cache, or wait a few minutes before refreshing.</BS.Form.Text>
+        ) : (
-                <BS.Form.Row>
+          ""
-                <BS.Col className="mb-lg-2" xs={12} lg={3}>
+        )}
-                    <BS.Form.Label>Name:</BS.Form.Label>
+        {editMode ? (
-               <BS.Form.Control name="name" {...registerEdit("name")}  defaultValue={name}/>
+          <EditSystem
+            editDesc={editDesc}
+            name={name}
+            tag={tag}
+            timezone={timezone}
+            avatar={avatar}
+            setErrorAlert={setErrorAlert}
+            user={user}
+            setUser={setUser}
+            setEditMode={setEditMode}
+          />
+        ) : (
+          <>
+            <BS.Row>
+              <BS.Col className="mb-lg-3" xs={12} lg={3}>
+                <b>ID:</b> {user.id}
               </BS.Col>
-                <BS.Col className="mb-lg-2" xs={12} lg={3}>
+              <BS.Col className="mb-lg-3" xs={12} lg={3}>
-                    <BS.Form.Label>Tag:</BS.Form.Label>
+                <b>Tag:</b> {tag}
-                    <BS.Form.Control name="tag" {...registerEdit("tag")}  defaultValue={tag}/>
               </BS.Col>
-                <BS.Col className="mb-lg-2" xs={12} lg={3}>
+              <BS.Col className="mb-lg-3" xs={12} lg={3}>
-                    <BS.Form.Label>Timezone:</BS.Form.Label>
+                <b>Timezone:</b> {timezone}
-                    <BS.Form.Control name="tz" {...registerEdit("tz")}  defaultValue={timezone} required/>
-                    { invalidTimezone ? <BS.Form.Text>Please enter a valid <a href='https://xske.github.io/tz/' rel="noreferrer" target="_blank">timezone</a></BS.Form.Text> : "" }
               </BS.Col>
-                <BS.Col className="mb-lg-2" xs={12} lg={3}>
+              {privacyView ? (
-                    <BS.Form.Label>Avatar url:</BS.Form.Label> 
+                ""
-                    <BS.Form.Control name="avatar_url" {...registerEdit("avatar_url")} defaultValue={avatar}/>
+              ) : (
+                <BS.Col className="mb-lg-3" xs={12} lg={3}>
+                  <b>Privacy:</b>{" "}
+                  <BS.Button
+                    variant="light"
+                    size="sm"
+                    onClick={() => setPrivacyView(true)}
+                  >
+                    View
+                  </BS.Button>
                 </BS.Col>
-                </BS.Form.Row>
+              )}
-                <BS.Form.Group className="mt-3">
-                <BS.Form.Label>Description:</BS.Form.Label>
-                <BS.Form.Control maxLength="1000" as="textarea" name="description" {...registerEdit("description")} defaultValue={editDesc}/>
-            </BS.Form.Group>
-                <BS.Button variant="light" onClick={() => setEditMode(false)}>Cancel</BS.Button>  <BS.Button variant="primary" type="submit">Submit</BS.Button>
-                </BS.Form> :
-               <><BS.Row>
-                    <BS.Col className="mb-lg-3" xs={12} lg={3}><b>ID:</b> {user.id}</BS.Col>
-                    <BS.Col className="mb-lg-3" xs={12} lg={3}><b>Tag:</b> {tag}</BS.Col>
-                    <BS.Col className="mb-lg-3" xs={12} lg={3}><b>Timezone:</b> {timezone}</BS.Col>
-                    { privacyView ? "" : <BS.Col className="mb-lg-3" xs={12} lg={3}><b>Privacy:</b> <BS.Button variant="light" size="sm" onClick={() => setPrivacyView(true)}>View</BS.Button></BS.Col> }
             </BS.Row>
-                { privacyMode ? <BS.Form onSubmit={handleSubmitPrivacy(submitPrivacy)}>
+            {privacyEdit ? (
-                <hr/>
+              <EditSystemPrivacy
-                <h5>Editing privacy settings</h5>
+                setErrorAlert={setErrorAlert}
-                    <BS.Form.Row>
+                setUser={setUser}
-                    <BS.Col className="mb-lg-2" xs={12} lg={3}>
+                user={user}
-                        <BS.Form.Label>Description:</BS.Form.Label>
+                setPrivacyEdit={setPrivacyEdit}
-                        <BS.Form.Control name="description_privacy" defaultValue={user.description_privacy} as="select" {...registerPrivacy("description_privacy")}>
+              />
-                            <option>public</option>
+            ) : privacyView ? (
-                            <option>private</option>
+              <>
-                        </BS.Form.Control>
+                <hr />
-                    </BS.Col>
-                    <BS.Col className="mb-lg-2" xs={12} lg={3}>
-                    <BS.Form.Label>Member list:</BS.Form.Label>
-                        <BS.Form.Control name="member_list_privacy" defaultValue={user.member_list_privacy} as="select" {...registerPrivacy("member_list_privacy")}>
-                            <option>public</option>
-                            <option>private</option>
-                        </BS.Form.Control>
-                    </BS.Col>
-                    <BS.Col className="mb-lg-2" xs={12} lg={3}>
-                    <BS.Form.Label>Front:</BS.Form.Label>
-                        <BS.Form.Control name="front_privacy" as="select" defaultValue={user.front_privacy} {...registerPrivacy("front_privacy")}>
-                            <option>public</option>
-                            <option>private</option>
-                        </BS.Form.Control>
-                    </BS.Col>
-                    <BS.Col className="mb-lg-2" xs={12} lg={3}>
-                    <BS.Form.Label>Front history:</BS.Form.Label>
-                        <BS.Form.Control name="front_history_privacy" defaultValue={user.front_history_privacy} as="select" {...registerPrivacy("front_history_privacy")}>
-                            <option>public</option>
-                            <option>private</option>
-                        </BS.Form.Control>
-                    </BS.Col>
-                </BS.Form.Row>
-                <BS.Button variant="light" onClick={() => setPrivacyMode(false)}>Cancel</BS.Button> <BS.Button variant="primary" type="submit">Submit</BS.Button>                
-                <hr/>
-            </BS.Form> : privacyView ? <><hr/>
                 <h5>Viewing privacy settings</h5>
                 <BS.Row>
-                <BS.Col className="mb-lg-3" xs={12} lg={3}><b>Description:</b> {user.description_privacy}</BS.Col>
+                  <BS.Col className="mb-lg-3" xs={12} lg={3}>
-                <BS.Col className="mb-lg-3" xs={12} lg={3}><b>Member list: </b>{user.member_list_privacy}</BS.Col>
+                    <b>Description:</b> {user.description_privacy}
-                <BS.Col className="mb-lg-3" xs={12} lg={3}><b>Front:</b> {user.front_privacy}</BS.Col> 
+                  </BS.Col>
-                <BS.Col className="mb-lg-3" xs={12} lg={3}><b>Front history:</b> {user.front_history_privacy}</BS.Col>
+                  <BS.Col className="mb-lg-3" xs={12} lg={3}>
+                    <b>Member list: </b>
+                    {user.member_list_privacy}
+                  </BS.Col>
+                  <BS.Col className="mb-lg-3" xs={12} lg={3}>
+                    <b>Front:</b> {user.front_privacy}
+                  </BS.Col>
+                  <BS.Col className="mb-lg-3" xs={12} lg={3}>
+                    <b>Front history:</b> {user.front_history_privacy}
+                  </BS.Col>
                 </BS.Row>
-            <BS.Button variant="light" onClick={() => setPrivacyView(false)}>Exit</BS.Button>  <BS.Button variant="primary" onClick={() => setPrivacyMode(true)}>Edit</BS.Button>
+                <BS.Button
-            <hr/></> : "" }
+                  variant="light"
-                <p><b>Description:</b></p>
+                  onClick={() => setPrivacyView(false)}
-                { localStorage.getItem('twemoji') ? <Twemoji options={{ className: 'twemoji' }}><p dangerouslySetInnerHTML={{__html: desc}}></p></Twemoji> : <p dangerouslySetInnerHTML={{__html: desc}}></p>}
+                >
-                { privacyMode ? "" : privacyView ? "" : <><BS.Button variant="light" onClick={() => setEditMode(true)}>Edit</BS.Button><BS.Button variant="primary" className="float-right" onClick={() => history.push(`/pk-webs/profile/${user.id}`)}>Profile</BS.Button></>}</> }
+                  Exit
+                </BS.Button>{" "}
+                <BS.Button
+                  variant="primary"
+                  onClick={() => setPrivacyEdit(true)}
+                >
+                  Edit
+                </BS.Button>
+                <hr />
+              </>
+            ) : (
+              ""
+            )}
+            <p>
+              <b>Description:</b>
+            </p>
+            {localStorage.getItem("twemoji") ? (
+              <Twemoji options={{ className: "twemoji" }}>
+                <p dangerouslySetInnerHTML={{ __html: desc }}></p>
+              </Twemoji>
+            ) : (
+              <p dangerouslySetInnerHTML={{ __html: desc }}></p>
+            )}
+            {privacyEdit ? (
+              ""
+            ) : privacyView ? (
+              ""
+            ) : (
+              <>
+                <BS.Button variant="light" onClick={() => setEditMode(true)}>
+                  Edit
+                </BS.Button>
+                <BS.Button
+                  variant="primary"
+                  className="float-right"
+                  onClick={() => history.push(`/pk-webs/profile/${user.id}`)}
+                >
+                  Profile
+                </BS.Button>
+              </>
+            )}
+          </>
+        )}
       </BS.Card.Body>
     </BS.Card>
-        )
+  );
 }
-
-   
-
-