Merge pull request #320 from JeevaRamanathan/emoji_picker_current

Emoji picker current

react/src/helpers/challenges.ts

@@ -423,4 +423,15 @@ export const challenges = new Map<string, Challenge>([
       tags: [],
     },
   ],
+  [
+    'emoji-picker',
+    {
+      title: 'Emoji Picker',
+      link: 'emoji-picker',
+      difficulty: 'medium',
+      developer: 'jeevaramanathan',
+      tags: [],
+      isNew:true
+    },
+  ],
 ]);

react/src/helpers/contributors.ts

@@ -28,5 +28,6 @@ export const contributors = new Map<string, Contributor>([
   ['viditagrawal56', { name: 'Vidit Agrawal', pic: 'https://avatars.githubusercontent.com/u/52532308' }],
   ['Bhushan1019', { name: 'Bhushan Patil', pic: 'https://avatars.githubusercontent.com/u/121352274' }],
   ['Sumitwarrior7', { name: 'Cool Dude 69', pic: 'https://avatars.githubusercontent.com/u/108853577' }],
-  ['rishabhm05', {name:'Rishabh Mehta', pic:'https://avatars.githubusercontent.com/u/67910259'}]
+  ['rishabhm05', {name:'Rishabh Mehta', pic:'https://avatars.githubusercontent.com/u/67910259'}],
+  ['jeevaramanathan', {name:'Jeeva Ramanathan', pic:'https://avatars.githubusercontent.com/u/64531160'}]
 ]);

react/src/machine-coding/emoji-picker/App.jsx

@@ -0,0 +1,12 @@
+import styles from "./app.module.css"
+import Emoji from './Emoji';
+import Code from './Code'
+export default function App() {
+
+    return (
+    <div className={styles.main}>
+     <Emoji/>
+     <Code/>
+    </div>
+  );
+}

react/src/machine-coding/emoji-picker/Code.jsx

@@ -0,0 +1,62 @@
+import React from 'react';
+import styles from './app.module.css';
+
+const obj = `
+                    **Main Functionalities**
+
+
+        **Copy Block level(div) elements to clipboard**
+function copyToClipboard(element) {
+    // Create a range object that selects the element \n
+    // to be copied.
+    const range = document.createRange();
+    range.selectNode(element);
+  
+    // clear current selection
+    window.getSelection().removeAllRanges(); 
+    
+    // Selects the given range.
+    window.getSelection().addRange(range);
+  
+    // Copy the selection to the clipboard.
+    document.execCommand('copy');
+  
+    // Remove the range from the selection.
+    selection.removeAllRanges();
+}
+
+
+        **Filter emojis based on search value**
+emojis.filter((icon) => {
+    icon.toLowerCase().includes(searchValue.toLowerCase())
+})
+
+
+        **axios to call API**
+axios.get(__url__)
+    .then(response => {
+        // Handle response
+    });
+`;
+
+const Code = () => {
+  return (
+    <div className={styles.container}>
+    <pre>
+      <code>
+        {obj.split('\n').map((line, index) => {
+          if (line.trim().startsWith('//')) {
+            return <span key={index} className={styles.comments}>{line}</span>;
+          }
+          else if(line.trim().startsWith('**')){
+            return <b key={index}>{line}</b>;  
+          }
+          return <div key={index}>{line}</div>;
+        })}
+      </code>
+    </pre>
+    </div>
+  );
+};
+
+export default Code;

react/src/machine-coding/emoji-picker/Emoji.jsx

@@ -0,0 +1,125 @@
+import { useEffect, useState } from 'react';
+import styles from './app.module.css';
+import axios from 'axios';
+
+const access_key = 'eb3aa13df1b14cc7bc614fc2d7f894f41b09d68a';
+const Emoji = () => {
+  const [emojis, setEmojis] = useState([]);
+  const [filteredEmojis, setFilteredEmojis] = useState([]);
+  const [search, setSearch] = useState('');
+  const [toastMessage, setToastMessage] = useState('');
+  const [category, setCategory] = useState([]);
+
+  useEffect(() => {
+    loadAllEmojis();
+    loadCategories();
+    window.scrollTo(0,0);
+  }, []);
+
+  const loadAllEmojis = () => {
+    axios.get(`https://emoji-api.com/emojis?access_key=${access_key}`).then((res) => {
+      setEmojis(res.data);
+      setFilteredEmojis(res.data);
+    });
+  };
+
+  const loadCategories = () => {
+    axios.get(`https://emoji-api.com/categories?access_key=${access_key}`).then((res) => {
+      setCategory(res.data);
+    });
+  };
+
+  const getIconTitle = (title) => {
+    const [_, ...value] = title.split(' ');
+    return value.join(' ');
+  };
+
+  const onChange = (e) => {
+    let searchValue = e.target.value;
+    setSearch(searchValue);
+    let filteredIcons = emojis.filter((icon) =>
+      icon.unicodeName.toLowerCase().includes(searchValue.trim().toLowerCase())
+    );
+    setFilteredEmojis(filteredIcons);
+  };
+
+  const categoryChange = (e) => {
+    setSearch('');
+    setFilteredEmojis([]);
+    setEmojis([]);
+    if (e.target.value == 'all') {
+      loadAllEmojis();
+    } else {
+      axios.get(`https://emoji-api.com/categories/${e.target.value}?access_key=${access_key}`).then((res) => {
+        setEmojis(res.data);
+        setFilteredEmojis(res.data);
+      });
+    }
+  };
+
+  const copyToClipBoard = (id) => {
+    let range = document.createRange();
+    range.selectNode(document.getElementById(id));
+    window.getSelection().removeAllRanges(); // clear current selection
+    window.getSelection().addRange(range); // to select text
+    document.execCommand('copy');
+    window.getSelection().removeAllRanges(); // to deselect
+    setToastMessage('Copied Successfully!');
+    setTimeout(() => {
+      setToastMessage('');
+    }, 1500);
+  };
+
+  return (
+    <>
+      <div className={styles.topSection}>
+        <div>
+          <select className={styles.select} onChange={categoryChange}>
+            <option>all</option>
+            {category.map((item) => {
+              return <option value={item.slug}>{item.slug.replace('-', ' ')}</option>;
+            })}
+          </select>
+        </div>
+        <div>
+          <input
+            type="text"
+            placeholder="Search"
+            onChange={onChange}
+            value={search}
+            className={styles.inputField}
+          ></input>
+        </div>
+        <div
+          className={`${styles.copyText} ${
+            filteredEmojis == null || filteredEmojis?.length === 0 ? styles.hidden : ''
+          }`}
+        >
+          Click on an Emoji to Copy
+        </div>
+      </div>
+      <div className={styles.container}>
+        {filteredEmojis?.length == 0 && search.trim() == '' && (
+          <div className={styles.loaderContainer}>
+            <div className={styles.loader}></div>
+          </div>
+        )}
+        {filteredEmojis?.map((icon, index) => (
+          <span
+            className={styles.iconContainer}
+            key={index}
+            onClick={() => copyToClipBoard(icon.unicodeName + '_' + index)}
+          >
+            <span className={styles.icon} title={getIconTitle(icon.unicodeName)} id={icon.unicodeName + '_' + index}>
+              {icon.character}
+            </span>
+          </span>
+        ))}
+      </div>
+
+      {toastMessage && <div className={styles.toast}>{toastMessage}</div>}
+    </>
+  );
+};
+
+export default Emoji;