Add twemoji

package-lock.json

@@ -9380,6 +9380,11 @@
       "resolved": "https://registry.npmjs.org/lodash._reinterpolate/-/lodash._reinterpolate-3.0.0.tgz",
       "integrity": "sha1-DM8tiRZq8Ds2Y8eWU4t1rG4RTZ0="
     },
+    "lodash.isequal": {
+      "version": "4.5.0",
+      "resolved": "https://registry.npmjs.org/lodash.isequal/-/lodash.isequal-4.5.0.tgz",
+      "integrity": "sha1-QVxEePK8wwEgwizhDtMib30+GOA="
+    },
     "lodash.memoize": {
       "version": "4.1.2",
       "resolved": "https://registry.npmjs.org/lodash.memoize/-/lodash.memoize-4.1.2.tgz",
@@ -12627,6 +12632,16 @@
         "prop-types": "^15.6.2"
       }
     },
+    "react-twemoji": {
+      "version": "0.3.0",
+      "resolved": "https://registry.npmjs.org/react-twemoji/-/react-twemoji-0.3.0.tgz",
+      "integrity": "sha512-y2ZQD3KvpZklETxz9c1NycRdUVF5nKsJ0bPNW3SaRJT+ReK36sMcneYwRPfv9EK2p3s9ph/NczDglnB8wbMJ0g==",
+      "requires": {
+        "lodash.isequal": "^4.5.0",
+        "prop-types": "^15.7.2",
+        "twemoji": "^13.0.1"
+      }
+    },
     "reactjs-popup": {
       "version": "2.0.4",
       "resolved": "https://registry.npmjs.org/reactjs-popup/-/reactjs-popup-2.0.4.tgz",
@@ -15078,6 +15093,53 @@
       "resolved": "https://registry.npmjs.org/tweetnacl/-/tweetnacl-0.14.5.tgz",
       "integrity": "sha1-WuaBd/GS1EViadEIr6k/+HQ/T2Q="
     },
+    "twemoji": {
+      "version": "13.0.1",
+      "resolved": "https://registry.npmjs.org/twemoji/-/twemoji-13.0.1.tgz",
+      "integrity": "sha512-mrTBq+XpCLM4zm76NJOjLHoQNV9mHdBt3Cba/T5lS1rxn8ArwpqE47mqTocupNlkvcLxoeZJjYSUW0DU5ZwqZg==",
+      "requires": {
+        "fs-extra": "^8.0.1",
+        "jsonfile": "^5.0.0",
+        "twemoji-parser": "13.0.0",
+        "universalify": "^0.1.2"
+      },
+      "dependencies": {
+        "fs-extra": {
+          "version": "8.1.0",
+          "resolved": "https://registry.npmjs.org/fs-extra/-/fs-extra-8.1.0.tgz",
+          "integrity": "sha512-yhlQgA6mnOJUKOsRUFsgJdQCvkKhcz8tlZG5HBQfReYZy46OwLcY+Zia0mtdHsOo9y/hP+CxMN0TU9QxoOtG4g==",
+          "requires": {
+            "graceful-fs": "^4.2.0",
+            "jsonfile": "^4.0.0",
+            "universalify": "^0.1.0"
+          },
+          "dependencies": {
+            "jsonfile": {
+              "version": "4.0.0",
+              "resolved": "https://registry.npmjs.org/jsonfile/-/jsonfile-4.0.0.tgz",
+              "integrity": "sha1-h3Gq4HmbZAdrdmQPygWPnBDjPss=",
+              "requires": {
+                "graceful-fs": "^4.1.6"
+              }
+            }
+          }
+        },
+        "jsonfile": {
+          "version": "5.0.0",
+          "resolved": "https://registry.npmjs.org/jsonfile/-/jsonfile-5.0.0.tgz",
+          "integrity": "sha512-NQRZ5CRo74MhMMC3/3r5g2k4fjodJ/wh8MxjFbCViWKFjxrnudWSY5vomh+23ZaXzAS7J3fBZIR2dV6WbmfM0w==",
+          "requires": {
+            "graceful-fs": "^4.1.6",
+            "universalify": "^0.1.2"
+          }
+        }
+      }
+    },
+    "twemoji-parser": {
+      "version": "13.0.0",
+      "resolved": "https://registry.npmjs.org/twemoji-parser/-/twemoji-parser-13.0.0.tgz",
+      "integrity": "sha512-zMaGdskpH8yKjT2RSE/HwE340R4Fm+fbie4AaqjDa4H/l07YUmAvxkSfNl6awVWNRRQ0zdzLQ8SAJZuY5MgstQ=="
+    },
     "type": {
       "version": "1.2.0",
       "resolved": "https://registry.npmjs.org/type/-/type-1.2.0.tgz",

package.json

@@ -26,6 +26,7 @@
     "react-router-dom": "^5.2.0",
     "react-scripts": "4.0.1",
     "react-toggle": "^4.1.1",
+    "react-twemoji": "^0.3.0",
     "reactjs-popup": "^2.0.4",
     "use-dark-mode": "^2.3.1",
     "web-vitals": "^0.2.4",

src/Components/MemberCard.js

@@ -6,6 +6,7 @@ import Popup from 'reactjs-popup';
 import 'reactjs-popup/dist/index.css';
 import autosize from 'autosize';
 import LazyLoad from 'react-lazyload';
+import Twemoji from 'react-twemoji';
 
 import API_URL from "../Constants/constants.js";
 
@@ -197,15 +198,15 @@ export default function MemberCard(props) {
        memberDeleted ? <BS.Card.Header className="d-flex align-items-center justify-content-between"><BS.Button variant="link" className="float-left"><FaTrashAlt className="mr-4"/>Member Deleted</BS.Button></BS.Card.Header> :
        <LazyLoad offset={100}>
            <BS.Card.Header className="d-flex align-items-center justify-content-between">
-        <BS.Accordion.Toggle  as={BS.Button} variant="link" eventKey={member.id} className="float-left"><FaUser className="mr-4" /> <b>{member.name}</b> ({member.id})</BS.Accordion.Toggle>
+        <BS.Accordion.Toggle  as={BS.Button} variant="link" eventKey={member.id} className="float-left"><FaUser className="mr-4 float-left" /> <b>{member.name}</b> ({member.id})</BS.Accordion.Toggle>
-            { member.avatar_url ?   <Popup trigger={<BS.Image src={`${member.avatar_url}`} style={{width: 50, height: 50}} tabindex="0" className="float-right" roundedCircle />} className="avatar" modal>
+            { member.avatar_url ?   <Popup trigger={<BS.Image src={`${member.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={`${member.avatar_url}`} style={{width: 500, height: 'auto'}} thumbnail />
                     </div>
                 )}
             </Popup> : 
-        <BS.Image src={defaultAvatar} style={{width: 50, height: 50}} tabindex="0" className="float-right" roundedCircle />}
+        <BS.Image src={defaultAvatar} style={{width: 50, height: 50}} tabIndex="0" className="float-right" roundedCircle />}
         </BS.Card.Header>
         <BS.Accordion.Collapse eventKey={member.id}>
             <BS.Card.Body style={{borderLeft: `5px solid #${color}` }}>
@@ -365,7 +366,7 @@ export default function MemberCard(props) {
          <BS.Button variant="light" onClick={() => setProxyView(false)}>Exit</BS.Button>  <BS.Button variant="primary" onClick={() => setProxyMode(true)}>Edit</BS.Button>
             <hr/></> : "" }
             <p><b>Description:</b></p>
-            <p dangerouslySetInnerHTML={{__html: desc}}></p>
+            { localStorage.getItem('twemoji') ? <Twemoji options={{ className: 'twemoji' }}><p dangerouslySetInnerHTML={{__html: desc}}></p></Twemoji> : <p dangerouslySetInnerHTML={{__html: desc}}></p>}
                 { proxyView ? "" : privacyMode ? "" : privacyView ? "" : <BS.Button variant="light" onClick={() => setEditMode(true)}>Edit</BS.Button>}
             </> } </BS.Card.Body>
         </BS.Accordion.Collapse>

src/Components/System.js

@@ -5,9 +5,11 @@ import autosize from 'autosize';
 import moment from 'moment';
 import 'moment-timezone';
 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 { FaAddressCard } from "react-icons/fa";
 
@@ -26,6 +28,7 @@ export default function System(props) {
 
     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("");
@@ -43,6 +46,10 @@ export default function System(props) {
     useEffect(() => {
     const { toHTML } = require('../Functions/discord-parser.js');
     
+    if (user.name) {
+        setName(user.name);
+    } else setName('');
+
     if (user.tag) {
         setTag(user.tag);
     } else setTag('');
@@ -60,7 +67,7 @@ export default function System(props) {
         setEditDesc(user.description);
     } else { setDesc("(no description)");
     setEditDesc("");
-}}, [user.description, user.tag, user.avatar_url, user.tz]);
+}}, [user.description, user.tag, user.avatar_url, user.tz, user.name]);
 
 useEffect(() => {
     autosize(document.querySelector('textarea'));
@@ -107,8 +114,8 @@ const submitPrivacy = data => {
         return (
            <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-3" /> {user.name}</BS.Card.Title> 
+                  <BS.Card.Title className="float-left"><FaAddressCard className="mr-4 float-left" /> {name} ({user.id})</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>
+                  { 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={`${user.avatar_url}`} style={{width: 500, height: 'auto'}} thumbnail />
@@ -126,7 +133,7 @@ const submitPrivacy = data => {
                 <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" ref={registerEdit}  defaultValue={user.name}/>
+               <BS.Form.Control name="name" ref={registerEdit}  defaultValue={name}/>
                 </BS.Col>
                 <BS.Col className="mb-lg-2" xs={12} lg={3}>
                     <BS.Form.Label>Tag:</BS.Form.Label>
@@ -200,8 +207,8 @@ const submitPrivacy = data => {
             <BS.Button variant="light" onClick={() => setPrivacyView(false)}>Exit</BS.Button>  <BS.Button variant="primary" onClick={() => setPrivacyMode(true)}>Edit</BS.Button>
             <hr/></> : "" }
                 <p><b>Description:</b></p>
-                <p dangerouslySetInnerHTML={{__html: desc}}></p>
+                { 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>}</> }
+                { 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></>}</> }
                 </BS.Card.Body>
            </BS.Card>
         )

src/Custom.scss

@@ -129,6 +129,13 @@ body {
   transition: background-color 0.3s ease;
 }
 
+.dark-mode .alert-primary {
+  color: $white;
+  background-color: $primary;
+  border: $gray-900;
+  transition: background-color 0.3s ease;
+}
+
 .dark-mode .alert-light {
   color: $white;
   background-color: $gray-900;
@@ -249,9 +256,13 @@ blockquote {
 }
 
 .d-emoji {
-  height: 25px;
+  height: 22px;
+  width: auto;
+}
+
+.twemoji {
+  height: 22px;
   width: auto;
-  image-rendering: crisp-edges;
 }