Add twemoji

2020-12-14 22:26:15 +01:00 · 2020-12-14 22:26:15 +01:00 · 49cb4ba8f2
commit 49cb4ba8f2
parent f501bdc2be
5 changed files with 94 additions and 12 deletions
--- a/package-lock.json
+++ b/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",
--- a/package.json
+++ b/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",
--- a/src/Components/MemberCard.js
+++ b/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>
-            { 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>
+        <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>
                {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>
--- a/src/Components/System.js
+++ b/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> 
-                  { 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>
+                  <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>
                {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>
-                { privacyMode ? "" : privacyView ? "" : <BS.Button variant="light" onClick={() => setEditMode(true)}>Edit</BS.Button>}</> }
+                { 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></>}</> }
                </BS.Card.Body>
           </BS.Card>
        )
--- a/src/Custom.scss
+++ b/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;
 }