React: Emoji - refactor

react/src/helpers/challenges.ts

@@ -315,6 +315,17 @@ export const challenges = new Map<string, Challenge>([
       tags: [],
     },
   ],
+  [
+    'emoji-picker',
+    {
+      title: 'Emoji Picker',
+      link: 'emoji-picker',
+      difficulty: 'medium',
+      developer: 'jeevaramanathan',
+      tags: [],
+      isNew: true,
+    },
+  ],
   [
     'investment-calculator',
     {
@@ -423,15 +434,4 @@ 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/machine-coding/emoji-picker/App.jsx

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

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

@@ -1,8 +1,10 @@
 import { useEffect, useState } from 'react';
-import styles from './app.module.css';
+
 import axios from 'axios';
+import styles from './app.module.css';
 
 const access_key = 'eb3aa13df1b14cc7bc614fc2d7f894f41b09d68a';
+
 const Emoji = () => {
   const [emojis, setEmojis] = useState([]);
   const [filteredEmojis, setFilteredEmojis] = useState([]);
@@ -13,7 +15,7 @@ const Emoji = () => {
   useEffect(() => {
     loadAllEmojis();
     loadCategories();
-    window.scrollTo(0,0);
+    window.scrollTo(0, 0);
   }, []);
 
   const loadAllEmojis = () => {
@@ -77,7 +79,11 @@ const Emoji = () => {
           <select className={styles.select} onChange={categoryChange}>
             <option>all</option>
             {category.map((item) => {
-              return <option value={item.slug}>{item.slug.replace('-', ' ')}</option>;
+              return (
+                <option value={item.slug} key={item.slug}>
+                  {item.slug.replace('-', ' ')}
+                </option>
+              );
             })}
           </select>
         </div>
@@ -98,6 +104,7 @@ const Emoji = () => {
           Click on an Emoji to Copy
         </div>
       </div>
+
       <div className={styles.container}>
         {filteredEmojis?.length == 0 && search.trim() == '' && (
           <div className={styles.loaderContainer}>

react/src/machine-coding/emoji-picker/app.module.css

@@ -1,50 +1,50 @@
 /* app */
 .main {
   display: flex;
+  flex-direction: column;
   align-items: center;
   justify-content: center;
-  flex-direction: column;
 }
 
 /* emoji component */
 .container {
-  height: 400px;
   width: 100%;
-  background-color: rgb(249, 249, 249);
-  border-radius: 3px;
-  box-shadow: 0 0 3px 2px rgba(201, 201, 201, 0.933);
-  overflow-x: hidden;
-  overflow-y: scroll;
+  height: 400px;
   padding: 10px;
   margin: 26px;
+  overflow-x: hidden;
+  overflow-y: scroll;
+  background-color: rgb(249, 249, 249);
+  border-radius: 3px;
+  box-shadow: 0 0 3px 2px rgba(201, 201, 201, 93.3%);
 }
 
 .container::-webkit-scrollbar,
 .container::-webkit-scrollbar-thumb {
-  border-radius: 13px;
-  width: 13px;
+  width: 6px;
   height: 40px;
+  border-radius: 12px;
 }
 
 .container::-webkit-scrollbar-thumb {
   box-shadow: inset 10px 10px 10px 5px rgb(184, 184, 184);
 }
 
 .iconContainer {
-  height: 30%;
   width: 30%;
+  height: 30%;
 }
 
 .icon {
   display: inline-block;
   width: calc(100% / 3);
   padding: 1px;
-  text-align: center;
   font-size: 30px;
+  text-align: center;
+  cursor: pointer;
   border: 3px solid transparent;
   border-radius: 10px;
   transition: border-color 0.3s;
-  cursor: pointer;
 }
 
 .icon:hover {
@@ -54,36 +54,38 @@
 .inputField {
   padding: 10px;
   margin-bottom: 10px;
-  font-size: 16px;
+  font-size: 1rem;
   border: 1px solid #ccc;
-  border-radius: 5px;
   border: 2px solid rgb(80, 66, 0);
+  border-radius: 4px;
 }
+
 .inputField:hover {
   cursor: auto;
   border: 2px solid rgb(80, 66, 0);
 }
+
 .toast {
   position: fixed;
   top: 20px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
   width: 300px;
   height: 30px;
-  background-color: rgb(128, 238, 128);
-  border-radius: 20px;
-  box-shadow: 0 0 3px 2px rgba(201, 201, 201, 0.933);
   color: darkslategray;
   text-align: center;
-  display: flex;
-  align-items: center;
-  justify-content: center;
+  background-color: rgb(128, 238, 128);
+  border-radius: 20px;
+  box-shadow: 0 0 3px 2px rgba(201, 201, 201, 93.3%);
 }
 
 .loader {
+  width: 60px;
+  height: 60px;
   border: 6px solid #f3f3f3;
   border-top: 6px solid #3498db;
   border-radius: 50%;
-  width: 60px;
-  height: 60px;
   animation: spin 2s linear infinite;
 }
 
@@ -94,26 +96,23 @@
 
 .topSection {
   display: flex;
-  justify-content: center;
   flex-direction: column;
+  justify-content: center;
 }
 
 .select {
-  padding: 10px;
-  margin-left: 20px;
   width: 180px;
+  padding: 10px;
   margin-bottom: 10px;
-  font-size: 16px;
-  border: 1px solid #ccc;
-  border-radius: 5px;
+  font-size: 1rem;
   border: 2px solid rgb(80, 66, 0);
-  font-size: 14px;
+  border-radius: 5px;
 }
 
 .copyText {
   font-size: small;
-  text-align: center;
   color: #bababa;
+  text-align: center;
   opacity: 1;
 }
 
@@ -125,54 +124,34 @@
   0% {
     transform: rotate(0deg);
   }
+
   100% {
     transform: rotate(360deg);
   }
 }
 
-@media (max-width: 576px) {
+@media (width <= 576px) {
   .icon {
     width: calc(100% / 6);
   }
 }
 
-@media (min-width: 768px) {
+@media (width >= 768px) {
   .icon {
     width: calc(100% / 8);
   }
+
   .container {
     width: 500px;
   }
 }
 
-@media (min-width: 992px) {
+@media (width >= 992px) {
   .icon {
     width: calc(100% / 10);
   }
+
   .container {
     width: 500px;
   }
 }
-
-
-/* code component */
-pre {
-  background: #eee;
-  padding: 1rem;
-  overflow: auto;
-  border-radius: 3px;
-  max-width: 80ch;
-}
-
-pre code {
-  text-align: left;
-  white-space: pre;
-  word-spacing: normal;
-  word-break: normal;
-  word-wrap: normal;
-  line-height: 1.5;
-}
-
-.comments {
-  color: green;
-}