From 9abe630c77fac7a34440183abd034186f186b860 Mon Sep 17 00:00:00 2001
From: Killua Zoldyck <killua@DESKTOP-UM5BUOK.localdomain>
Date: Mon, 17 Oct 2022 13:23:34 +0100
Subject: [PATCH 1/4] FEAT: lang are stackable now.

---
 pages/index.js | 22 +++++++++++++++-------
 1 file changed, 15 insertions(+), 7 deletions(-)

diff --git a/pages/index.js b/pages/index.js
index 0d0fe72..249828a 100644
--- a/pages/index.js
+++ b/pages/index.js
@@ -1,7 +1,7 @@
 import Head from 'next/head'
 import Image from 'next/image'
 import styles from '../styles/Home.module.css'
-import { useState, useEffect } from 'react';
+import {useRef, useState, useEffect } from 'react';
 import SKILLS from '../utils/skills';
 import { ProfileCard } from '../components/ProfileCard';
 import profiles from '../utils/profiles';
@@ -13,7 +13,8 @@ import Typewriter from 'typewriter-effect';
 
 export default function Home() {
   const [display, setDisplay] = useState("absolute");
-  const [lang, setLang] = useState();
+  const [tags , setTags] = useState([]);
+  const [lang, setLang] = useState([]);
   // let languages=new Set();
   // let langs=Array.from(languages)
 
@@ -84,8 +85,12 @@ export default function Home() {
                   <div className="flex flex-auto flex-wrap">
 
 
-                    <div className="flex justify-center items-center m-1 font-medium py-1 px-2 bg-white rounded-full text-teal-700  border border-teal-300 ">
-                      <div className="text-xs font-normal leading-none max-w-full flex-initial">{lang}</div>
+             
+                      {lang.map((item)=>{return ( <>
+                        <div className="flex justify-center items-center m-1 font-medium py-1 px-2 bg-white rounded-full text-teal-700  border border-teal-300 ">
+                      <div  className="text-xs font-normal leading-none max-w-full flex-initial">{item}</div>
+
+
                       <div className="flex flex-auto flex-row-reverse">
                         <div onClick={()=>{setLang()}}>
                           <svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" className="feather feather-x cursor-pointer hover:text-teal-400 rounded-full w-4 h-4 ml-2">
@@ -94,7 +99,10 @@ export default function Home() {
                           </svg>
                         </div>
                       </div>
-                    </div>
+                      </div>
+
+                      </> )})}
+                
 
                     <div className="flex-1">
                       <input placeholder="" className="bg-transparent p-1 px-2 appearance-none outline-none h-full w-full text-gray-800" />
@@ -110,13 +118,13 @@ export default function Home() {
                   </div>
                 </div>
               </div>
-              <div className={`${display === "hidden" ? "absolute" : "hidden"} shadow top-100 bg-white z-40 w-full lef-0 rounded max-h-select overflow-y-auto svelte-5uyqqj`}>
+              <div  className={`${display === "hidden" ? "absolute" : "hidden"} shadow top-100 bg-white z-40 w-full lef-0 rounded max-h-select overflow-y-auto svelte-5uyqqj`}>
                 <div className="flex flex-col w-full">
 
                   {
                     SKILLS && SKILLS.map((skill, index) => {
                       return (
-                        <div className="cursor-pointer w-full border-gray-100 rounded-t border-b hover:" onClick={() => { setLang(skill.name) }} key={index}>
+                        <div className="cursor-pointer w-full border-gray-100 rounded-t border-b hover:" onClick={() => { setLang([...lang,skill.name]) }} key={index}>
                           <div className="flex w-full items-center p-2 pl-2 border-transparent border-l-2 relative hover:border-teal-100">
                             <div className="w-full items-center flex">
                               <div className="mx-2 leading-6" data-skill={skill.name}>{skill.name}</div>

From f71ad6e7c757e9096fab5feca3a03f98ebf4deee Mon Sep 17 00:00:00 2001
From: Killua Zoldyck <killua@DESKTOP-UM5BUOK.localdomain>
Date: Tue, 18 Oct 2022 10:32:27 +0100
Subject: [PATCH 2/4] dont mind this

---
 pages/index.js | 6 ++++--
 1 file changed, 4 insertions(+), 2 deletions(-)

diff --git a/pages/index.js b/pages/index.js
index 249828a..4c19208 100644
--- a/pages/index.js
+++ b/pages/index.js
@@ -86,13 +86,15 @@ export default function Home() {
 
 
              
-                      {lang.map((item)=>{return ( <>
+                      {lang.map((item,index)=>{return ( <>
                         <div className="flex justify-center items-center m-1 font-medium py-1 px-2 bg-white rounded-full text-teal-700  border border-teal-300 ">
                       <div  className="text-xs font-normal leading-none max-w-full flex-initial">{item}</div>
 
 
                       <div className="flex flex-auto flex-row-reverse">
-                        <div onClick={()=>{setLang()}}>
+                        <div  onClick={()=>{
+                            lang.splice(index, 1); // 2nd parameter means remove one item only
+                          setLang(lang)}}>
                           <svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" className="feather feather-x cursor-pointer hover:text-teal-400 rounded-full w-4 h-4 ml-2">
                             <line x1="18" y1="6" x2="6" y2="18"></line>
                             <line x1="6" y1="6" x2="18" y2="18"></line>

From 9b7eb561c5c0c50e8039932e405a369e5f861933 Mon Sep 17 00:00:00 2001
From: Killua Zoldyck <killua@DESKTOP-UM5BUOK.localdomain>
Date: Tue, 18 Oct 2022 11:23:05 +0100
Subject: [PATCH 3/4] FIX: fixed delete the lang

---
 pages/index.js | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/pages/index.js b/pages/index.js
index 4c19208..feb55ec 100644
--- a/pages/index.js
+++ b/pages/index.js
@@ -86,15 +86,15 @@ export default function Home() {
 
 
              
-                      {lang.map((item,index)=>{return ( <>
+                      {lang.map((item)=>{return ( <>
                         <div className="flex justify-center items-center m-1 font-medium py-1 px-2 bg-white rounded-full text-teal-700  border border-teal-300 ">
                       <div  className="text-xs font-normal leading-none max-w-full flex-initial">{item}</div>
 
 
                       <div className="flex flex-auto flex-row-reverse">
                         <div  onClick={()=>{
-                            lang.splice(index, 1); // 2nd parameter means remove one item only
-                          setLang(lang)}}>
+                          setLang(lang.filter(temp=>temp!=item));
+                          }}>
                           <svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" className="feather feather-x cursor-pointer hover:text-teal-400 rounded-full w-4 h-4 ml-2">
                             <line x1="18" y1="6" x2="6" y2="18"></line>
                             <line x1="6" y1="6" x2="18" y2="18"></line>

From 230a4e612e439b5685c818792e9dd455fccf905c Mon Sep 17 00:00:00 2001
From: AmineArif1 <elarifamine1@gmail.com>
Date: Tue, 18 Oct 2022 20:53:46 +0100
Subject: [PATCH 4/4] FIX: Fixed the error (not loading)

---
 pages/index.js | 40 +++++++++++++++++++++++++++-------------
 1 file changed, 27 insertions(+), 13 deletions(-)

diff --git a/pages/index.js b/pages/index.js
index b76e814..2d73eba 100644
--- a/pages/index.js
+++ b/pages/index.js
@@ -14,35 +14,48 @@ export default function Home() {
   const [display, setDisplay] = useState("absolute");
 
   const [tags , setTags] = useState([]);
-  const [lang, setLang] = useState([]);
   const [profilesList, setProfiles] = useState();
-  let languages=new Set();
+
 
 
   //Used to make sure that the inputs in profile.js are consitent for example html is equal to HTML 
-  function checkLang(skill){
-    return skill.toUpperCase() == lang.toUpperCase();
-  }
 
   useEffect(() => {
-    setLang(lang)
-    languages.add(lang)
     let tmpList=[];
-    if(typeof(lang) != "undefined")
+    console.log(tags)
+    if(tags.length!=0)
     {
+      console.log("1");
+
       profiles.map((data, index) => {
-        if(data.skills.find(checkLang))
+        
+        let tempBool = true;
+        tags.forEach(element => {
+          if(!data.skills.includes(element)){
+            tempBool= false;
+          }
+        });
+        if(tempBool)
         {
           tmpList.push(data);
         }
+       
       })
+      if(tmpList.length == 0){
+        setProfiles([]);
+
+      }
+      else{
       setProfiles(tmpList);
+      }
     }
     else
     {
+      console.log("starting");
+
       setProfiles(profiles);
     }
-  })
+  },[tags])
 
   useEffect(() => {
     AOS.init()
@@ -103,14 +116,15 @@ export default function Home() {
 
 
              
-                      {lang.map((item)=>{return ( <>
+                      {tags.map((item)=>{return ( <>
                         <div className="flex justify-center items-center m-1 font-medium py-1 px-2 bg-white rounded-full text-teal-700  border border-teal-300 ">
                       <div  className="text-xs font-normal leading-none max-w-full flex-initial">{item}</div>
 
 
                       <div className="flex flex-auto flex-row-reverse">
                         <div  onClick={()=>{
-                          setLang(lang.filter(temp=>temp!=item));
+                          console.log("repeat me 1")
+                          setTags(tags.filter(temp=>temp!=item));
                           }}>
                           <svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" className="feather feather-x cursor-pointer hover:text-teal-400 rounded-full w-4 h-4 ml-2">
                             <line x1="18" y1="6" x2="6" y2="18"></line>
@@ -143,7 +157,7 @@ export default function Home() {
                   {
                     SKILLS && SKILLS.map((skill, index) => {
                       return (
-                        <div className="cursor-pointer w-full border-gray-100 rounded-t border-b hover:" onClick={() => { setLang([...lang,skill.name]) }} key={index}>
+                        <div className="cursor-pointer w-full border-gray-100 rounded-t border-b hover:" onClick={() => {console.log("repeat me two"); setTags([...tags,skill.name]) }} key={index}>
                           <div className="flex w-full items-center p-2 pl-2 border-transparent border-l-2 relative hover:border-teal-100">
                             <div className="w-full items-center flex">
                               <div className="mx-2 leading-6" data-skill={skill.name}>{skill.name}</div>