SHARE
TWEET

Untitled

a guest Jan 24th, 2020 105 Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
  1. import React, { useState, Fragment } from 'react';
  2. import { Link } from 'react-router-dom';
  3. import Tile from './Tile';
  4. import ResetTile from './ResetTile';
  5. import Button from './Button';
  6. import ResetButton from './ResetButton';
  7. import InputRange from 'react-input-range';
  8. import 'react-input-range/lib/css/index.css';
  9.  
  10. import './UserPreferences.css';
  11.  
  12. const UserPreferences = () => {
  13.   const [jobStatus, setJobStatus] = useState('green');
  14.   const [showStatus, setShowStatus] = useState(false);
  15.   const [name, setName] = useState('TestUser');
  16.   const [showCities, setShowCities] = useState(false);
  17.   const [showTechnologies, setShowTechnologies] = useState(false);
  18.   const [showSkills, setShowSkills] = useState(false);
  19.   const [city, setCity] = useState('');
  20.   const [technology, setTechnology] = useState('');
  21.  
  22.   const [remoteJob, setRemoteJob] = useState('');
  23.   const [company, setCompany] = useState('');
  24.   let [value, setValue] = useState({
  25.     min: 0,
  26.     max: 50
  27.   });
  28.  
  29.   let [cityHolder, setCityHolder] = useState(false);
  30.   let [techHolder, setTechHolder] = useState(false);
  31.  
  32.   const [companyStage, setCompanyStage] = useState(0);
  33.   const [companyStageStatus, setCompanyStageStatus] = useState(false);
  34.  
  35.   const [companyKind, setCompanyKind] = useState(0);
  36.   const [companyKindStatus, setCompanyKindStatus] = useState(false);
  37.  
  38.   const [industry, setIndustry] = useState(0);
  39.   const [industryStatus, setIndustryStatus] = useState(false);
  40.  
  41.   const [experiance, setExperiance] = useState(0);
  42.   const [experianceStatus, setExperianceStatus] = useState(false);
  43.  
  44.   const [employment, setEmployment] = useState(0);
  45.   const [employmentStatus, setEmploymentStatus] = useState(false);
  46.  
  47.   let toggleJobStatusGreen = () => {
  48.     setJobStatus('green');
  49.     setShowStatus(!showStatus);
  50.   };
  51.  
  52.   let toggleJobStatusBlue = () => {
  53.     setJobStatus('blue');
  54.     setShowStatus(!showStatus);
  55.   };
  56.  
  57.   let toggleJobStatusRed = () => {
  58.     setJobStatus('red');
  59.     setShowStatus(!showStatus);
  60.   };
  61.  
  62.   //CITIES
  63.   let retryCity = event => {
  64.     event.target.parentElement.parentElement.remove();
  65.     for (
  66.       let i = 0;
  67.       i < document.querySelector('.city-ul').children.length;
  68.       i++
  69.     ) {
  70.       if (
  71.         event.target.parentElement.parentElement.innerText ===
  72.         document.querySelector('.city-ul').children[i].innerText
  73.       ) {
  74.         document.querySelector('.city-ul').children[i].className = '';
  75.       }
  76.       setCityHolder(document.querySelector('.city-ul').children[i].innerText);
  77.     }
  78.   };
  79.  
  80.   let hideCity = event => {
  81.     if (document.querySelector('#tech').children.length < 2) {
  82.       if (event.target.className === '') {
  83.         event.target.className += ' display-none';
  84.       } else {
  85.         event.target.parentElement.className += 'display-none';
  86.       }
  87.     }
  88.   };
  89.  
  90.   let toggleSetCity = event => {
  91.     setShowCities(false);
  92.  
  93.     let my_city = document.createElement('div');
  94.     let chosen_city = event.target.innerHTML;
  95.     let icon =
  96.       '<div class="icon-box"><i class="fas fa-times-circle"></i></div>';
  97.     my_city.className = 'input-chosen';
  98.     my_city.innerHTML = chosen_city;
  99.     my_city.innerHTML += icon;
  100.     my_city.children[0].addEventListener('click', retryCity);
  101.  
  102.     document.querySelector('#city').appendChild(my_city);
  103.   };
  104.  
  105.   let searchCities = event => {
  106.     event.preventDefault();
  107.     setCity(event.target.value);
  108.  
  109.     for (
  110.       let i = 0;
  111.       i < document.querySelector('.city-ul').children.length;
  112.       i++
  113.     ) {
  114.       if (
  115.         !document
  116.           .querySelector('.city-ul')
  117.           .children[i].innerText.includes(event.target.value)
  118.       ) {
  119.         document.querySelector('.city-ul').children[i].className =
  120.           'display-none';
  121.       }
  122.       for (
  123.         let i = 0;
  124.         i < document.querySelector('.city-ul').children.length;
  125.         i++
  126.       ) {
  127.         if (
  128.           document
  129.             .querySelector('.city-ul')
  130.             .children[i].innerText.includes(event.target.value) &&
  131.           document.querySelector('.city-ul').children[i].className ===
  132.             'display-none'
  133.         ) {
  134.           if (document.querySelector('#city').children.length < 1) {
  135.             document.querySelector('.city-ul').children[i].className = '';
  136.           } else {
  137.             for (
  138.               let j = 0;
  139.               j < document.querySelector('#city').children.length;
  140.               j++
  141.             ) {
  142.               if (
  143.                 document.querySelector('#city').children[j].innerText ===
  144.                 document.querySelector('.city-ul').children[i].innerText
  145.               ) {
  146.                 document.querySelector('.city-ul').children[i].className =
  147.                   'display-none';
  148.               } else {
  149.                 document.querySelector('.city-ul').children[i].className = '';
  150.               }
  151.             }
  152.  
  153.             for (
  154.               let k = 0;
  155.               k < document.querySelector('#city').children.length;
  156.               k++
  157.             ) {
  158.               if (
  159.                 document.querySelector('#city').children[k].innerText ===
  160.                 document.querySelector('.city-ul').children[i].innerText
  161.               ) {
  162.                 document.querySelector('.city-ul').children[i].className =
  163.                   'display-none';
  164.               }
  165.             }
  166.           }
  167.         }
  168.       }
  169.     }
  170.   };
  171.  
  172.   let focusInput = () => {
  173.     document.querySelector('.city-input').focus();
  174.  
  175.     setShowCities(true);
  176.   };
  177.  
  178.   let focusTechInput = () => {
  179.     document.querySelector('.tech-input').focus();
  180.  
  181.     setShowTechnologies(true);
  182.   };
  183.  
  184.   let focusSkillInput = () => {
  185.     document.querySelector('.skill-input').focus();
  186.  
  187.     setShowSkills(true);
  188.   };
  189.  
  190.   let [cities, setCities] = useState([
  191.     <Fragment>
  192.       <li onMouseDown={hideCity}>warszawa</li>
  193.       <li onMouseDown={hideCity}>kraków</li>
  194.       <li onMouseDown={hideCity}>wrocław</li>
  195.       <li onMouseDown={hideCity}>poznań</li>
  196.       <li onMouseDown={hideCity}>trójmiasto</li>
  197.       <li onMouseDown={hideCity}>białystok</li>
  198.       <li onMouseDown={hideCity}>bielsko-biała</li>
  199.       <li onMouseDown={hideCity}>bydgoszcz</li>
  200.       <li onMouseDown={hideCity}>częstochowa</li>
  201.       <li onMouseDown={hideCity}>gliwice</li>
  202.       <li onMouseDown={hideCity}>katowice</li>
  203.       <li onMouseDown={hideCity}>kielce</li>
  204.       <li onMouseDown={hideCity}>lublin</li>
  205.       <li onMouseDown={hideCity}>łódź</li>
  206.       <li onMouseDown={hideCity}>olsztyn</li>
  207.       <li onMouseDown={hideCity}>opole</li>
  208.       <li onMouseDown={hideCity}>toruń</li>
  209.       <li onMouseDown={hideCity}>rzeszów</li>
  210.       <li onMouseDown={hideCity}>szczecin</li>
  211.     </Fragment>
  212.   ]);
  213.   //TECHNOLOGIES
  214.   let toggleSetTechnologies = event => {
  215.     if (document.querySelector('#tech').children.length > 1) {
  216.       setShowTechnologies(false);
  217.     } else {
  218.       setShowTechnologies(false);
  219.  
  220.       let my_tech = document.createElement('div');
  221.       let chosen_tech = event.target.innerHTML;
  222.       let icon =
  223.         '<div class="icon-box"><i class="fas fa-times-circle"></i></div>';
  224.       my_tech.className = 'input-chosen';
  225.       my_tech.innerHTML = chosen_tech;
  226.       my_tech.innerHTML += icon;
  227.       my_tech.children[1].addEventListener('click', retryTech);
  228.  
  229.       document.querySelector('#tech').appendChild(my_tech);
  230.     }
  231.   };
  232.  
  233.   let retryTech = event => {
  234.     event.target.parentElement.parentElement.remove();
  235.     for (
  236.       let i = 0;
  237.       i < document.querySelector('.tech-ul').children.length;
  238.       i++
  239.     ) {
  240.       if (
  241.         event.target.parentElement.parentElement.innerText ===
  242.         document.querySelector('.tech-ul').children[i].innerText
  243.       ) {
  244.         document.querySelector('.tech-ul').children[i].className = '';
  245.       }
  246.     }
  247.   };
  248.  
  249.   let searchTechnologies = event => {
  250.     event.preventDefault();
  251.     setTechnology(event.target.value);
  252.  
  253.     for (
  254.       let i = 0;
  255.       i < document.querySelector('.tech-ul').children.length;
  256.       i++
  257.     ) {
  258.       if (
  259.         !document
  260.           .querySelector('.tech-ul')
  261.           .children[i].innerText.includes(event.target.value)
  262.       ) {
  263.         document.querySelector('.tech-ul').children[i].className =
  264.           'display-none';
  265.       }
  266.       for (
  267.         let i = 0;
  268.         i < document.querySelector('.tech-ul').children.length;
  269.         i++
  270.       ) {
  271.         if (
  272.           document
  273.             .querySelector('.tech-ul')
  274.             .children[i].innerText.includes(event.target.value) &&
  275.           document.querySelector('.tech-ul').children[i].className ===
  276.             'display-none'
  277.         ) {
  278.           if (document.querySelector('#tech').children.length < 1) {
  279.             document.querySelector('.tech-ul').children[i].className = '';
  280.           } else {
  281.             for (
  282.               let j = 0;
  283.               j < document.querySelector('#tech').children.length;
  284.               j++
  285.             ) {
  286.               if (
  287.                 document.querySelector('#tech').children[j].innerText ===
  288.                 document.querySelector('.tech-ul').children[i].innerText
  289.               ) {
  290.                 document.querySelector('.tech-ul').children[i].className =
  291.                   'display-none';
  292.               } else {
  293.                 document.querySelector('.tech-ul').children[i].className = '';
  294.               }
  295.             }
  296.  
  297.             for (
  298.               let k = 0;
  299.               k < document.querySelector('#tech').children.length;
  300.               k++
  301.             ) {
  302.               if (
  303.                 document.querySelector('#tech').children[k].innerText ===
  304.                 document.querySelector('.tech-ul').children[i].innerText
  305.               ) {
  306.                 document.querySelector('.tech-ul').children[i].className =
  307.                   'display-none';
  308.               }
  309.             }
  310.           }
  311.         }
  312.       }
  313.     }
  314.   };
  315.  
  316.   const [technologies, setTechnologies] = useState([
  317.     <Fragment>
  318.       <li onMouseDown={hideCity}>
  319.         <i className="fab fa-js"></i>javascript
  320.       </li>
  321.       <li onMouseDown={hideCity}>
  322.         <i className="fab fa-html5"></i>html
  323.       </li>
  324.       <li onMouseDown={hideCity}>
  325.         <i className="fab fa-php"></i>php
  326.       </li>
  327.       <li onMouseDown={hideCity}>
  328.         <i className="fas fa-gem"></i>ruby
  329.       </li>
  330.       <li onMouseDown={hideCity}>
  331.         <i className="fab fa-python"></i>python
  332.       </li>
  333.       <li onMouseDown={hideCity}>
  334.         <i className="fab fa-java"></i>java
  335.       </li>
  336.       <li onMouseDown={hideCity}>
  337.         <i className="fas fa-bacon"></i>net
  338.       </li>
  339.       <li onMouseDown={hideCity}>
  340.         <i className="fab fa-stripe-s"></i>scala
  341.       </li>
  342.       <li onMouseDown={hideCity}>
  343.         <i className="fab fa-cuttlefish"></i>c
  344.       </li>
  345.       <li onMouseDown={hideCity}>
  346.         <i className="fas fa-mobile-alt"></i>mobile
  347.       </li>
  348.       <li onMouseDown={hideCity}>
  349.         <i className="fas fa-search"></i>testing
  350.       </li>
  351.       <li onMouseDown={hideCity}>
  352.         <i className="fab fa-dev"></i>devops
  353.       </li>
  354.       <li onMouseDown={hideCity}>
  355.         <i className="fas fa-magic"></i>ux/ui
  356.       </li>
  357.       <li onMouseDown={hideCity}>
  358.         <i className="fas fa-user"></i>pm
  359.       </li>
  360.       <li onMouseDown={hideCity}>
  361.         <i className="fas fa-gamepad"></i>game
  362.       </li>
  363.       <li onMouseDown={hideCity}>
  364.         <i className="fab fa-bitcoin"></i>blockchain
  365.       </li>
  366.       <li onMouseDown={hideCity}>
  367.         <i className="fas fa-shield-alt"></i>security
  368.       </li>
  369.       <li onMouseDown={hideCity}>
  370.         <i className="fas fa-database"></i>data
  371.       </li>
  372.       <li onMouseDown={hideCity}>
  373.         <i className="fas fa-hippo"></i>go
  374.       </li>
  375.       <li onMouseDown={hideCity}>
  376.         <i className="fab fa-stackpath"></i>sap
  377.       </li>
  378.       <li onMouseDown={hideCity}>
  379.         <i className="fab fa-korvue"></i>kotlin
  380.       </li>
  381.       <li onMouseDown={hideCity}>
  382.         <i className="fas fa-tint"></i>elixir
  383.       </li>
  384.       <li onMouseDown={hideCity}>
  385.         <i className="fas fa-apple-alt"></i>perl
  386.       </li>
  387.     </Fragment>
  388.   ]);
  389.  
  390.   //SKILLS
  391.   let toggleSetSkills = event => {
  392.     setShowSkills(false);
  393.  
  394.     let my_skill = document.createElement('div');
  395.     let chosen_skill = event.target.innerHTML;
  396.     let icon =
  397.       '<div class="icon-box"><i class="fas fa-times-circle"></i></div>';
  398.     my_skill.className = 'input-chosen';
  399.     my_skill.innerHTML = chosen_skill;
  400.     my_skill.innerHTML += icon;
  401.     my_skill.children[0].addEventListener('click', retrySkill);
  402.  
  403.     document.querySelector('#skill').appendChild(my_skill);
  404.   };
  405.  
  406.   let retrySkill = event => {
  407.     event.target.parentElement.parentElement.remove();
  408.     for (
  409.       let i = 0;
  410.       i < document.querySelector('.skill-ul').children.length;
  411.       i++
  412.     ) {
  413.       if (
  414.         event.target.parentElement.parentElement.innerText ===
  415.         document.querySelector('.skill-ul').children[i].innerText
  416.       ) {
  417.         document.querySelector('.skill-ul').children[i].className = '';
  418.       }
  419.     }
  420.   };
  421.  
  422.   let searchSkills = event => {
  423.     event.preventDefault();
  424.     setTechnology(event.target.value);
  425.  
  426.     for (
  427.       let i = 0;
  428.       i < document.querySelector('.skill-ul').children.length;
  429.       i++
  430.     ) {
  431.       if (
  432.         !document
  433.           .querySelector('.skill-ul')
  434.           .children[i].innerText.includes(event.target.value)
  435.       ) {
  436.         document.querySelector('.skill-ul').children[i].className =
  437.           'display-none';
  438.       }
  439.       for (
  440.         let i = 0;
  441.         i < document.querySelector('.skill-ul').children.length;
  442.         i++
  443.       ) {
  444.         if (
  445.           document
  446.             .querySelector('.skill-ul')
  447.             .children[i].innerText.includes(event.target.value) &&
  448.           document.querySelector('.skill-ul').children[i].className ===
  449.             'display-none'
  450.         ) {
  451.           if (document.querySelector('#skill').children.length < 1) {
  452.             document.querySelector('.skill-ul').children[i].className = '';
  453.           } else {
  454.             for (
  455.               let j = 0;
  456.               j < document.querySelector('#skill').children.length;
  457.               j++
  458.             ) {
  459.               if (
  460.                 document.querySelector('#skill').children[j].innerText ===
  461.                 document.querySelector('.skill-ul').children[i].innerText
  462.               ) {
  463.                 document.querySelector('.skill-ul').children[i].className =
  464.                   'display-none';
  465.               } else {
  466.                 document.querySelector('.skill-ul').children[i].className = '';
  467.               }
  468.             }
  469.  
  470.             for (
  471.               let k = 0;
  472.               k < document.querySelector('#skill').children.length;
  473.               k++
  474.             ) {
  475.               if (
  476.                 document.querySelector('#skill').children[k].innerText ===
  477.                 document.querySelector('.skill-ul').children[i].innerText
  478.               ) {
  479.                 document.querySelector('.skill-ul').children[i].className =
  480.                   'display-none';
  481.               }
  482.             }
  483.           }
  484.         }
  485.       }
  486.     }
  487.   };
  488.  
  489.   const [skills, setSkills] = [
  490.     <Fragment>
  491.       <li onMouseDown={hideCity}>JavaScript</li>
  492.       <li onMouseDown={hideCity}>React</li>
  493.       <li onMouseDown={hideCity}>Angular</li>
  494.       <li onMouseDown={hideCity}>Java</li>
  495.       <li onMouseDown={hideCity}>PHP</li>
  496.       <li onMouseDown={hideCity}>Python</li>
  497.       <li onMouseDown={hideCity}>.NET</li>
  498.       <li onMouseDown={hideCity}>Node.js</li>
  499.       <li onMouseDown={hideCity}>Docker</li>
  500.       <li onMouseDown={hideCity}>HTML5</li>
  501.       <li onMouseDown={hideCity}>Androin</li>
  502.       <li onMouseDown={hideCity}>AWS</li>
  503.       <li onMouseDown={hideCity}>IOS</li>
  504.       <li onMouseDown={hideCity}>CSS3</li>
  505.       <li onMouseDown={hideCity}>C#</li>
  506.       <li onMouseDown={hideCity}>Jira</li>
  507.       <li onMouseDown={hideCity}>Git</li>
  508.       <li onMouseDown={hideCity}>MySQL</li>
  509.       <li onMouseDown={hideCity}>Typescript</li>
  510.       <li onMouseDown={hideCity}>C++</li>
  511.       <li onMouseDown={hideCity}>Big Data</li>
  512.       <li onMouseDown={hideCity}>Linux</li>
  513.       <li onMouseDown={hideCity}>React Native</li>
  514.       <li onMouseDown={hideCity}>Ruby</li>
  515.       <li onMouseDown={hideCity}>Symfony</li>
  516.       <li onMouseDown={hideCity}>DevOps</li>
  517.       <li onMouseDown={hideCity}>Swift</li>
  518.       <li onMouseDown={hideCity}>MicrosoftSQL</li>
  519.       <li onMouseDown={hideCity}>Vue.js</li>
  520.       <li onMouseDown={hideCity}>Kotlin</li>
  521.       <li onMouseDown={hideCity}>Kubernetes</li>
  522.       <li onMouseDown={hideCity}>MongoDB</li>
  523.       <li onMouseDown={hideCity}>Microsoft Azure</li>
  524.       <li onMouseDown={hideCity}>QA</li>
  525.       <li onMouseDown={hideCity}>java EE</li>
  526.       <li onMouseDown={hideCity}>Spring</li>
  527.       <li onMouseDown={hideCity}>PostgreSQL</li>
  528.       <li onMouseDown={hideCity}>Blockchain</li>
  529.       <li onMouseDown={hideCity}>Slack</li>
  530.       <li onMouseDown={hideCity}>Hibernate</li>
  531.       <li onMouseDown={hideCity}>Rails</li>
  532.       <li onMouseDown={hideCity}>Jenkins</li>
  533.       <li onMouseDown={hideCity}>testing</li>
  534.       <li onMouseDown={hideCity}>sql</li>
  535.       <li onMouseDown={hideCity}>Scala</li>
  536.       <li onMouseDown={hideCity}>ElasticSearch</li>
  537.       <li onMouseDown={hideCity}>jQuery</li>
  538.       <li onMouseDown={hideCity}>Google Cloud Platform</li>
  539.       <li onMouseDown={hideCity}>Github</li>
  540.       <li onMouseDown={hideCity}>Selenium</li>
  541.       <li onMouseDown={hideCity}>Scrum</li>
  542.       <li onMouseDown={hideCity}>Magento</li>
  543.       <li onMouseDown={hideCity}>Laravel</li>
  544.       <li onMouseDown={hideCity}>Redux</li>
  545.       <li onMouseDown={hideCity}>Golang</li>
  546.       <li onMouseDown={hideCity}>Wordpress</li>
  547.       <li onMouseDown={hideCity}>Ansible</li>
  548.       <li onMouseDown={hideCity}>OracleDB</li>
  549.       <li onMouseDown={hideCity}>Mobile</li>
  550.       <li onMouseDown={hideCity}>Objective C</li>
  551.       <li onMouseDown={hideCity}>Redis</li>
  552.       <li onMouseDown={hideCity}>Terraform</li>
  553.       <li onMouseDown={hideCity}>Django</li>
  554.       <li onMouseDown={hideCity}>Amazon Web Service</li>
  555.       <li onMouseDown={hideCity}>RebbitMQ</li>
  556.       <li onMouseDown={hideCity}>Nginx</li>
  557.       <li onMouseDown={hideCity}>Bootstrap</li>
  558.       <li onMouseDown={hideCity}>.NET Core</li>
  559.       <li onMouseDown={hideCity}>JS</li>
  560.       <li onMouseDown={hideCity}>Flutter</li>
  561.       <li onMouseDown={hideCity}>PWA</li>
  562.       <li onMouseDown={hideCity}>Azure</li>
  563.       <li onMouseDown={hideCity}>Kafka</li>
  564.       <li onMouseDown={hideCity}>xamarin</li>
  565.       <li onMouseDown={hideCity}>Sass</li>
  566.       <li onMouseDown={hideCity}>Spring Boot</li>
  567.       <li onMouseDown={hideCity}>Elixir</li>
  568.       <li onMouseDown={hideCity}>Flask</li>
  569.       <li onMouseDown={hideCity}>Cassandra</li>
  570.       <li onMouseDown={hideCity}>Windows</li>
  571.       <li onMouseDown={hideCity}>Circle CI</li>
  572.       <li onMouseDown={hideCity}>html</li>
  573.       <li onMouseDown={hideCity}>Apache Spark</li>
  574.       <li onMouseDown={hideCity}>Ember</li>
  575.       <li onMouseDown={hideCity}>Bash</li>
  576.       <li onMouseDown={hideCity}>Vue</li>
  577.       <li onMouseDown={hideCity}>Unity</li>
  578.       <li onMouseDown={hideCity}>SAP</li>
  579.       <li onMouseDown={hideCity}>BI</li>
  580.       <li onMouseDown={hideCity}>Zend Framework</li>
  581.       <li onMouseDown={hideCity}>Akka</li>
  582.       <li onMouseDown={hideCity}>Power BI</li>
  583.       <li onMouseDown={hideCity}>Dart</li>
  584.       <li onMouseDown={hideCity}>Go</li>
  585.       <li onMouseDown={hideCity}>handoop</li>
  586.       <li onMouseDown={hideCity}>Erlang</li>
  587.       <li onMouseDown={hideCity}>CSS</li>
  588.       <li onMouseDown={hideCity}>Solr</li>
  589.       <li onMouseDown={hideCity}>Photoshop</li>
  590.       <li onMouseDown={hideCity}>GraphQL</li>
  591.       <li onMouseDown={hideCity}>JSP</li>
  592.       <li onMouseDown={hideCity}>Tensorflow</li>
  593.       <li onMouseDown={hideCity}>ETL</li>
  594.       <li onMouseDown={hideCity}>React.js</li>
  595.       <li onMouseDown={hideCity}>IoT</li>
  596.       <li onMouseDown={hideCity}>Rust</li>
  597.       <li onMouseDown={hideCity}>Puppet</li>
  598.       <li onMouseDown={hideCity}>R</li>
  599.       <li onMouseDown={hideCity}>abap</li>
  600.       <li onMouseDown={hideCity}>Microsoft BI Stack</li>
  601.       <li onMouseDown={hideCity}>HAProxy</li>
  602.       <li onMouseDown={hideCity}>Hbase</li>
  603.       <li onMouseDown={hideCity}>Sinon.js</li>
  604.       <li onMouseDown={hideCity}>Bower</li>
  605.       <li onMouseDown={hideCity}>Hotjar</li>
  606.       <li onMouseDown={hideCity}>Less</li>
  607.       <li onMouseDown={hideCity}>ZeroMQ</li>
  608.       <li onMouseDown={hideCity}>Swagger</li>
  609.       <li onMouseDown={hideCity}>Visual Basic</li>
  610.       <li onMouseDown={hideCity}>RWD</li>
  611.       <li onMouseDown={hideCity}>Vagrant</li>
  612.       <li onMouseDown={hideCity}>Babel</li>
  613.       <li onMouseDown={hideCity}>SD-WAN</li>
  614.       <li onMouseDown={hideCity}>Sinatra</li>
  615.       <li onMouseDown={hideCity}>Axon Framework</li>
  616.       <li onMouseDown={hideCity}>Haskell</li>
  617.       <li onMouseDown={hideCity}>Mocha</li>
  618.       <li onMouseDown={hideCity}>GNU R</li>
  619.       <li onMouseDown={hideCity}>Perl</li>
  620.       <li onMouseDown={hideCity}>Groovy</li>
  621.       <li onMouseDown={hideCity}>BGP Optimization</li>
  622.       <li onMouseDown={hideCity}>MapR</li>
  623.       <li onMouseDown={hideCity}>DynamoDB</li>
  624.       <li onMouseDown={hideCity}>Gulp</li>
  625.       <li onMouseDown={hideCity}>Consul</li>
  626.       <li onMouseDown={hideCity}>iVPN</li>
  627.       <li onMouseDown={hideCity}>Aurelia</li>
  628.       <li onMouseDown={hideCity}>Memcached</li>
  629.       <li onMouseDown={hideCity}>Hystrix</li>
  630.       <li onMouseDown={hideCity}>Twig</li>
  631.       <li onMouseDown={hideCity}>Codeigniter</li>
  632.       <li onMouseDown={hideCity}>Grunt</li>
  633.       <li onMouseDown={hideCity}>Logstash</li>
  634.       <li onMouseDown={hideCity}>Trello</li>
  635.       <li onMouseDown={hideCity}>Chef</li>
  636.       <li onMouseDown={hideCity}>Fuse</li>
  637.       <li onMouseDown={hideCity}>Zabbix</li>
  638.       <li onMouseDown={hideCity}>Network Security</li>
  639.       <li onMouseDown={hideCity}>Kibana</li>
  640.       <li onMouseDown={hideCity}>ArangoDB</li>
  641.       <li onMouseDown={hideCity}>KnockOutJS</li>
  642.       <li onMouseDown={hideCity}>Cypress.io</li>
  643.       <li onMouseDown={hideCity}>Cloud Access</li>
  644.       <li onMouseDown={hideCity}>C</li>
  645.       <li onMouseDown={hideCity}>Tibco</li>
  646.       <li onMouseDown={hideCity}>DataSecurity</li>
  647.       <li onMouseDown={hideCity}>Fundation</li>
  648.       <li onMouseDown={hideCity}>Flux</li>
  649.       <li onMouseDown={hideCity}>PyTest</li>
  650.       <li onMouseDown={hideCity}>Clojure</li>
  651.       <li onMouseDown={hideCity}>Cloudformation</li>
  652.       <li onMouseDown={hideCity}>ECMAScript</li>
  653.       <li onMouseDown={hideCity}>Gradle</li>
  654.       <li onMouseDown={hideCity}>F#</li>
  655.       <li onMouseDown={hideCity}>Packer</li>
  656.       <li onMouseDown={hideCity}>Maven</li>
  657.       <li onMouseDown={hideCity}>Mesos</li>
  658.       <li onMouseDown={hideCity}>Hive</li>
  659.       <li onMouseDown={hideCity}>JEE</li>
  660.       <li onMouseDown={hideCity}>Couchbase</li>
  661.       <li onMouseDown={hideCity}>Pimcore</li>
  662.       <li onMouseDown={hideCity}>Backbone</li>
  663.       <li onMouseDown={hideCity}>Chai</li>
  664.     </Fragment>
  665.   ];
  666.  
  667.   //Stage
  668.   let clearStageTiles = () => {
  669.     setCompanyStageStatus(false);
  670.     setCompanyStage(0);
  671.   };
  672.  
  673.   let toggleStageTiles = event => {
  674.     setCompanyStageStatus(true);
  675.  
  676.     if (
  677.       event.target.parentElement.children[0].className ===
  678.         'jobStatus-change company border-pink' ||
  679.       event.target.parentElement.className ===
  680.         'jobStatus-change company border-pink'
  681.     ) {
  682.       setCompanyStage(companyStage - 1);
  683.       if (companyStage === 1) {
  684.         setCompanyStageStatus(false);
  685.       }
  686.     } else if (
  687.       event.target.parentElement.children[0].className ===
  688.         'jobStatus-change company' ||
  689.       event.target.parentElement.className === 'jobStatus-change company'
  690.     ) {
  691.       setCompanyStage(companyStage + 1);
  692.     }
  693.   };
  694.  
  695.   //Kind
  696.   let clearKindTiles = () => {
  697.     setCompanyKindStatus(false);
  698.     setCompanyKind(0);
  699.   };
  700.  
  701.   let toggleKindTiles = event => {
  702.     setCompanyKindStatus(true);
  703.  
  704.     if (
  705.       event.target.parentElement.children[0].className ===
  706.         'jobStatus-change company border-pink' ||
  707.       event.target.parentElement.className ===
  708.         'jobStatus-change company border-pink'
  709.     ) {
  710.       setCompanyKind(companyKind - 1);
  711.       if (companyKind === 1) {
  712.         setCompanyKindStatus(false);
  713.       }
  714.     } else if (
  715.       event.target.parentElement.children[0].className ===
  716.         'jobStatus-change company' ||
  717.       event.target.parentElement.className === 'jobStatus-change company'
  718.     ) {
  719.       setCompanyKind(companyKind + 1);
  720.     }
  721.   };
  722.  
  723.   //industry
  724.   let clearIndustryTiles = () => {
  725.     setIndustryStatus(false);
  726.     setIndustry(0);
  727.   };
  728.  
  729.   let toggleIndustryTiles = event => {
  730.     setIndustryStatus(true);
  731.  
  732.     if (
  733.       event.target.parentElement.children[0].className ===
  734.         'jobStatus-button border-pink' ||
  735.       event.target.parentElement.className === 'jobStatus-button border-pink'
  736.     ) {
  737.       setIndustry(industry - 1);
  738.       if (industry === 1) {
  739.         setIndustryStatus(false);
  740.       }
  741.     } else if (
  742.       event.target.parentElement.children[0].className === 'jobStatus-button' ||
  743.       event.target.parentElement.className === 'jobStatus-button'
  744.     ) {
  745.       setIndustry(industry + 1);
  746.     }
  747.   };
  748.   //experiance
  749.   let clearExperianceTiles = () => {
  750.     setExperianceStatus(false);
  751.     setExperiance(0);
  752.   };
  753.  
  754.   let toggleExperianceTiles = event => {
  755.     setExperianceStatus(true);
  756.  
  757.     if (
  758.       event.target.parentElement.children[0].className ===
  759.         'jobStatus-button border-pink' ||
  760.       event.target.parentElement.className === 'jobStatus-button border-pink'
  761.     ) {
  762.       setExperiance(experiance - 1);
  763.       if (experiance === 1) {
  764.         setExperianceStatus(false);
  765.       }
  766.     } else if (
  767.       event.target.parentElement.children[0].className === 'jobStatus-button' ||
  768.       event.target.parentElement.className === 'jobStatus-button'
  769.     ) {
  770.       setExperiance(experiance + 1);
  771.     }
  772.   };
  773.   //Employment
  774.   let clearEmploymentTiles = () => {
  775.     setEmploymentStatus(false);
  776.     setEmployment(0);
  777.   };
  778.  
  779.   let toggleEmploymentTiles = event => {
  780.     setEmploymentStatus(true);
  781.  
  782.     if (
  783.       event.target.parentElement.children[0].className ===
  784.         'jobStatus-button border-pink' ||
  785.       event.target.parentElement.className === 'jobStatus-button border-pink'
  786.     ) {
  787.       setEmployment(employment - 1);
  788.       if (employment === 1) {
  789.         setEmploymentStatus(false);
  790.       }
  791.     } else if (
  792.       event.target.parentElement.children[0].className === 'jobStatus-button' ||
  793.       event.target.parentElement.className === 'jobStatus-button'
  794.     ) {
  795.       setEmployment(employment + 1);
  796.     }
  797.   };
  798.  
  799.   return (
  800.     <div className="userLogin-content">
  801.       <div className="userLogin-sidebar">
  802.         <div className="userLogin-sidebarContent">
  803.           <div className="userLogin-img"></div>
  804.           <div className="userLogin-welcome">
  805.             <p>Welcome</p>
  806.             <span>{name}</span>
  807.           </div>
  808.           <div
  809.             className={
  810.               jobStatus === 'green'
  811.                 ? 'userLogin-jobStatus green bg-green'
  812.                 : jobStatus === 'blue'
  813.                 ? 'userLogin-jobStatus blue bg-blue'
  814.                 : jobStatus === 'red'
  815.                 ? 'userLogin-jobStatus red bg-red'
  816.                 : null
  817.             }
  818.             onClick={() => {
  819.               setShowStatus(!showStatus);
  820.             }}
  821.           >
  822.             {jobStatus === 'green' ? (
  823.               <i className="far fa-check-circle big-circle green"></i>
  824.             ) : jobStatus === 'blue' ? (
  825.               <i className="far fa-envelope big-circle"></i>
  826.             ) : jobStatus === 'red' ? (
  827.               <i className="fas fa-times-circle big-circle"></i>
  828.             ) : null}
  829.  
  830.             <p>
  831.               {jobStatus === 'green'
  832.                 ? 'I’m actively looking for a job'
  833.                 : jobStatus === 'blue'
  834.                 ? 'Open for proposals'
  835.                 : jobStatus === 'red'
  836.                 ? 'Not open for proposals'
  837.                 : null}
  838.             </p>
  839.             <i
  840.               className={
  841.                 jobStatus === 'green'
  842.                   ? 'fas fa-chevron-down small-chew green'
  843.                   : jobStatus === 'blue'
  844.                   ? 'fas fa-chevron-down small-chew blue'
  845.                   : jobStatus === 'red'
  846.                   ? 'fas fa-chevron-down small-chew red'
  847.                   : null
  848.               }
  849.             ></i>
  850.           </div>
  851.           <div
  852.             className={
  853.               showStatus
  854.                 ? 'userLogin-jobStatusChanger'
  855.                 : 'userLogin-jobStatusChanger display-none'
  856.             }
  857.           >
  858.             <ul>
  859.               <li onClick={toggleJobStatusGreen}>
  860.                 I’m actively looking for a job
  861.               </li>
  862.               <li onClick={toggleJobStatusBlue}>Open for proposals</li>
  863.               <li onClick={toggleJobStatusRed}>Not open for proposals</li>
  864.             </ul>
  865.           </div>
  866.           <div className="userLogin-Options">
  867.             <Link to="/devs/panel/profile">
  868.               <div className="userLogin-Optionslist ">
  869.                 <i className="far fa-user"></i>
  870.                 <p>My profile</p>
  871.               </div>
  872.             </Link>
  873.             <Link to="/devs/panel/matchmaking">
  874.               <div className="userLogin-Optionslist">
  875.                 <i className="fas fa-inbox"></i>
  876.                 <p>Matchmaking</p>
  877.               </div>
  878.             </Link>
  879.             <Link to="/devs/panel/preferences">
  880.               <div className="userLogin-Optionslist userLogin-active">
  881.                 <i className="fas fa-pen"></i>
  882.                 <p>Preferences</p>
  883.               </div>
  884.             </Link>
  885.             <Link to="/devs/panel/settings">
  886.               <div className="userLogin-Optionslist ">
  887.                 <i className="fas fa-cog"></i>
  888.                 <p>Settings</p>
  889.               </div>
  890.             </Link>
  891.             <Link to="/devs/">
  892.               <div className="userLogin-Optionslist">
  893.                 <i className="fas fa-power-off"></i>
  894.                 <p>Log out</p>
  895.               </div>
  896.             </Link>
  897.           </div>
  898.         </div>
  899.       </div>
  900.  
  901.       <div className="preferences">
  902.         <div className="preferences-content">
  903.           <h1>Preferences</h1>
  904.           <form>
  905.             <div className="preferences-box">
  906.               <header className="preferences-header">
  907.                 <div className="preferences-heading">
  908.                   <i className="far fa-eye"></i>
  909.                   <h2>Ok, let's start! What is your status in job search?</h2>
  910.                 </div>
  911.                 <p>
  912.                   Let us know if we should look for the best job on the market
  913.                   for you.
  914.                 </p>
  915.               </header>
  916.               <div className="preferences-jobStatus">
  917.                 <div className="jobStatus-box">
  918.                   <div
  919.                     className={
  920.                       jobStatus === 'green'
  921.                         ? 'jobStatus-change border-pink mr-20'
  922.                         : 'jobStatus-change mr-20'
  923.                     }
  924.                     onClick={() => setJobStatus('green')}
  925.                   >
  926.                     <i className="far fa-file-alt"></i>
  927.                     <span>
  928.                       Actively looking<br></br> for a job
  929.                     </span>
  930.                   </div>
  931.                   <div
  932.                     className={
  933.                       jobStatus === 'blue'
  934.                         ? 'jobStatus-change border-pink mr-20'
  935.                         : 'jobStatus-change mr-20'
  936.                     }
  937.                     onClick={() => setJobStatus('blue')}
  938.                   >
  939.                     <i className="fas fa-envelope-open-text"></i>
  940.                     <span>
  941.                       Open<br></br> for proposals
  942.                     </span>
  943.                   </div>
  944.                   <div
  945.                     className={
  946.                       jobStatus === 'red'
  947.                         ? 'jobStatus-change border-pink mr-20'
  948.                         : 'jobStatus-change mr-20'
  949.                     }
  950.                     onClick={() => setJobStatus('red')}
  951.                   >
  952.                     <i className="fas fa-unlock-alt"></i>
  953.                     <span>
  954.                       Not open<br></br> for proposals
  955.                     </span>
  956.                   </div>
  957.                 </div>
  958.               </div>
  959.             </div>
  960.           </form>
  961.  
  962.           <form>
  963.             <div className="preferences-box">
  964.               <header className="preferences-header">
  965.                 <div className="preferences-heading blue">
  966.                   <i className="fas fa-map-marker-alt"></i>
  967.                   <h2>Where would you like to work?</h2>
  968.                 </div>
  969.                 <p>Choose as many as you like.</p>
  970.               </header>
  971.  
  972.               <div className="preferences-jobStatus">
  973.                 <div
  974.                   className="inputStatus-box"
  975.                   onClick={focusInput}
  976.                   onBlur={() => {
  977.                     setShowCities(false);
  978.                   }}
  979.                 >
  980.                   <div className="inputStatus" id="city"></div>
  981.                   <input
  982.                     name="city"
  983.                     value={city}
  984.                     placeholder="Select your city"
  985.                     autoComplete="off"
  986.                     onChange={searchCities}
  987.                     className="city-input"
  988.                   />
  989.                 </div>
  990.               </div>
  991.             </div>
  992.  
  993.             <div className="cities-box">
  994.               <div className={showCities ? 'cities' : 'cities display-none'}>
  995.                 <ul onMouseDown={toggleSetCity} className="city-ul">
  996.                   {cities}
  997.                 </ul>
  998.               </div>
  999.             </div>
  1000.           </form>
  1001.  
  1002.           <form>
  1003.             <div className="preferences-box">
  1004.               <header className="preferences-header">
  1005.                 <div className="preferences-heading light-blue">
  1006.                   <i className="fas fa-umbrella-beach"></i>
  1007.                   <h2>Are you willing to work remotely?</h2>
  1008.                 </div>
  1009.                 <p>We will try to find you an attractive remote job.</p>
  1010.               </header>
  1011.               <div className="preferences-jobStatus">
  1012.                 <div
  1013.                   className={
  1014.                     remoteJob === 'yes'
  1015.                       ? 'jobStatus-button border-pink'
  1016.                       : 'jobStatus-button'
  1017.                   }
  1018.                   onClick={() => setRemoteJob('yes')}
  1019.                 >
  1020.                   Yes
  1021.                 </div>
  1022.                 <div
  1023.                   className={
  1024.                     remoteJob === 'no'
  1025.                       ? 'jobStatus-button border-pink'
  1026.                       : 'jobStatus-button '
  1027.                   }
  1028.                   onClick={() => setRemoteJob('no')}
  1029.                 >
  1030.                   No
  1031.                 </div>
  1032.               </div>
  1033.             </div>
  1034.           </form>
  1035.  
  1036.           <form>
  1037.             <div className="preferences-box">
  1038.               <header className="preferences-header">
  1039.                 <div className="preferences-heading orange">
  1040.                   <i className="fas fa-user-friends"></i>
  1041.                   <h2>What stage should the company be in?</h2>
  1042.                 </div>
  1043.                 <p>Choose as many as you like.</p>
  1044.               </header>
  1045.               <div className="preferences-jobStatus">
  1046.                 <div className="jobStatus-box">
  1047.                   <div className="z-index100" onClick={clearStageTiles}>
  1048.                     <ResetTile
  1049.                       CompanyIcon={'far fa-check-square'}
  1050.                       CompanySpan={"Doesn't matter"}
  1051.                       CompanyActive={companyStageStatus}
  1052.                     />
  1053.                   </div>
  1054.  
  1055.                   <div className="z-index100" onClick={toggleStageTiles}>
  1056.                     <Tile
  1057.                       CompanyIcon={'fas fa-home'}
  1058.                       CompanySpan={'Early stage(0-30)'}
  1059.                       CompanyActive={companyStageStatus}
  1060.                     />
  1061.                   </div>
  1062.  
  1063.                   <div className="z-index100" onClick={toggleStageTiles}>
  1064.                     <Tile
  1065.                       CompanyIcon={'far fa-building'}
  1066.                       CompanySpan={'Growth stage (30-100)'}
  1067.                       CompanyActive={companyStageStatus}
  1068.                     />
  1069.                   </div>
  1070.  
  1071.                   <div className="z-index100" onClick={toggleStageTiles}>
  1072.                     <Tile
  1073.                       CompanyIcon={'fas fa-city'}
  1074.                       CompanySpan={'Estabilished(100-250)'}
  1075.                       CompanyActive={companyStageStatus}
  1076.                     />
  1077.                   </div>
  1078.  
  1079.                   <div className="z-index100" onClick={toggleStageTiles}>
  1080.                     <Tile
  1081.                       CompanyIcon={'fas fa-university'}
  1082.                       CompanySpan={'Corporation(250+)'}
  1083.                       CompanyActive={companyStageStatus}
  1084.                     />
  1085.                   </div>
  1086.                 </div>
  1087.               </div>
  1088.             </div>
  1089.           </form>
  1090.  
  1091.           <form>
  1092.             <div className="preferences-box">
  1093.               <header className="preferences-header">
  1094.                 <div className="preferences-heading red">
  1095.                   <i className="fas fa-city"></i>
  1096.                   <h2>For what kind of company would you like to work for</h2>
  1097.                 </div>
  1098.                 <p>We want to find a company that trully fits you</p>
  1099.               </header>
  1100.               <div className="preferences-jobStatus">
  1101.                 <div className="jobStatus-box">
  1102.                   <div className="z-index100" onClick={clearKindTiles}>
  1103.                     <ResetTile
  1104.                       CompanyIcon={'far fa-check-square'}
  1105.                       CompanySpan={"Doesn't matter"}
  1106.                       CompanyActive={companyKindStatus}
  1107.                     />
  1108.                   </div>
  1109.  
  1110.                   <div className="z-index100" onClick={toggleKindTiles}>
  1111.                     <Tile
  1112.                       CompanyIcon={'fas fa-rocket'}
  1113.                       CompanySpan={'Startup'}
  1114.                       CompanyActive={companyKindStatus}
  1115.                     />
  1116.                   </div>
  1117.  
  1118.                   <div className="z-index100" onClick={toggleKindTiles}>
  1119.                     <Tile
  1120.                       CompanyIcon={'fas fa-flask'}
  1121.                       CompanySpan={'Software house'}
  1122.                       CompanyActive={companyKindStatus}
  1123.                     />
  1124.                   </div>
  1125.  
  1126.                   <div className="z-index100" onClick={toggleKindTiles}>
  1127.                     <Tile
  1128.                       CompanyIcon={'fas fa-shopping-cart'}
  1129.                       CompanySpan={'E-commerce'}
  1130.                       CompanyActive={companyKindStatus}
  1131.                     />
  1132.                   </div>
  1133.  
  1134.                   <div className="z-index100" onClick={toggleKindTiles}>
  1135.                     <Tile
  1136.                       CompanyIcon={'fas fa-hotel'}
  1137.                       CompanySpan={'Corporation'}
  1138.                       CompanyActive={companyKindStatus}
  1139.                     />
  1140.                   </div>
  1141.                 </div>
  1142.               </div>
  1143.             </div>
  1144.           </form>
  1145.  
  1146.           <form>
  1147.             <div className="preferences-box">
  1148.               <header className="preferences-header">
  1149.                 <div className="preferences-heading grey">
  1150.                   <i className="far fa-building"></i>
  1151.                   <h2>Projects in which industry would you like to develop?</h2>
  1152.                 </div>
  1153.                 <p>
  1154.                   We really intend to match the project to you Choose as many as
  1155.                   you like.
  1156.                 </p>
  1157.               </header>
  1158.               <div className="preferences-jobStatus">
  1159.                 <div className="jobStatus-box">
  1160.                   <div className="btn-icon" onClick={clearIndustryTiles}>
  1161.                     <ResetButton
  1162.                       CompanySpan={"Doesn't matter"}
  1163.                       CompanyActive={industryStatus}
  1164.                     />
  1165.                   </div>
  1166.  
  1167.                   <div className="btn-icon grey" onClick={toggleIndustryTiles}>
  1168.                     <Button
  1169.                       CompanyIcon={'fas fa-dollar-sign'}
  1170.                       CompanySpan={'Fintech'}
  1171.                       CompanyActive={industryStatus}
  1172.                     />
  1173.                   </div>
  1174.  
  1175.                   <div className="btn-icon grey" onClick={toggleIndustryTiles}>
  1176.                     <Button
  1177.                       CompanyIcon={'fas fa-cube'}
  1178.                       CompanySpan={'Bloackchain'}
  1179.                       CompanyActive={industryStatus}
  1180.                     />
  1181.                   </div>
  1182.  
  1183.                   <div className="btn-icon grey" onClick={toggleIndustryTiles}>
  1184.                     <Button
  1185.                       CompanyIcon={'fas fa-shopping-cart'}
  1186.                       CompanySpan={'E-commerce'}
  1187.                       CompanyActive={industryStatus}
  1188.                     />
  1189.                   </div>
  1190.  
  1191.                   <div className="btn-icon grey" onClick={toggleIndustryTiles}>
  1192.                     <Button
  1193.                       CompanyIcon={'far fa-heart'}
  1194.                       CompanySpan={'Medicine'}
  1195.                       CompanyActive={industryStatus}
  1196.                     />
  1197.                   </div>
  1198.  
  1199.                   <div className="btn-icon grey" onClick={toggleIndustryTiles}>
  1200.                     <Button
  1201.                       CompanyIcon={'fas fa-medal'}
  1202.                       CompanySpan={'Military'}
  1203.                       CompanyActive={industryStatus}
  1204.                     />
  1205.                   </div>
  1206.  
  1207.                   <div className="btn-icon grey" onClick={toggleIndustryTiles}>
  1208.                     <Button
  1209.                       CompanyIcon={'fas fa-plane-departure'}
  1210.                       CompanySpan={'Travel'}
  1211.                       CompanyActive={industryStatus}
  1212.                     />
  1213.                   </div>
  1214.  
  1215.                   <div className="btn-icon grey" onClick={toggleIndustryTiles}>
  1216.                     <Button
  1217.                       CompanyIcon={'fas fa-cart-arrow-down'}
  1218.                       CompanySpan={'Martech'}
  1219.                       CompanyActive={industryStatus}
  1220.                     />
  1221.                   </div>
  1222.  
  1223.                   <div className="btn-icon grey" onClick={toggleIndustryTiles}>
  1224.                     <Button
  1225.                       CompanyIcon={'fas fa-user-md'}
  1226.                       CompanySpan={'IoT'}
  1227.                       CompanyActive={industryStatus}
  1228.                     />
  1229.                   </div>
  1230.  
  1231.                   <div className="btn-icon grey" onClick={toggleIndustryTiles}>
  1232.                     <Button
  1233.                       CompanyIcon={'fas fa-truck'}
  1234.                       CompanySpan={'Logistic'}
  1235.                       CompanyActive={industryStatus}
  1236.                     />
  1237.                   </div>
  1238.  
  1239.                   <div className="btn-icon grey" onClick={toggleIndustryTiles}>
  1240.                     <Button
  1241.                       CompanyIcon={'fas fa-seedling'}
  1242.                       CompanySpan={'Beauty'}
  1243.                       CompanyActive={industryStatus}
  1244.                     />
  1245.                   </div>
  1246.  
  1247.                   <div className="btn-icon grey" onClick={toggleIndustryTiles}>
  1248.                     <Button
  1249.                       CompanyIcon={'fas fa-laptop'}
  1250.                       CompanySpan={'Other'}
  1251.                       CompanyActive={industryStatus}
  1252.                     />
  1253.                   </div>
  1254.                 </div>
  1255.               </div>
  1256.             </div>
  1257.           </form>
  1258.  
  1259.           <form>
  1260.             <div className="preferences-box">
  1261.               <header className="preferences-header">
  1262.                 <div className="preferences-heading green">
  1263.                   <i className="fas fa-chart-line"></i>
  1264.                   <h2>Seniority</h2>
  1265.                 </div>
  1266.                 <p>We would like to know how experienced you are.</p>
  1267.               </header>
  1268.               <div className="preferences-jobStatus">
  1269.                 <div className="jobStatus-box">
  1270.                   <div className="btn-icon" onClick={clearExperianceTiles}>
  1271.                     <ResetButton
  1272.                       CompanySpan={"Doesn't matter"}
  1273.                       CompanyActive={experianceStatus}
  1274.                     />
  1275.                   </div>
  1276.  
  1277.                   <div className="btn-icon" onClick={toggleExperianceTiles}>
  1278.                     <Button
  1279.                       CompanySpan={'Junior'}
  1280.                       CompanyActive={experianceStatus}
  1281.                     />
  1282.                   </div>
  1283.  
  1284.                   <div className="btn-icon" onClick={toggleExperianceTiles}>
  1285.                     <Button
  1286.                       CompanySpan={'Mid'}
  1287.                       CompanyActive={experianceStatus}
  1288.                     />
  1289.                   </div>
  1290.  
  1291.                   <div className="btn-icon" onClick={toggleExperianceTiles}>
  1292.                     <Button
  1293.                       CompanySpan={'Senior'}
  1294.                       CompanyActive={experianceStatus}
  1295.                     />
  1296.                   </div>
  1297.                 </div>
  1298.               </div>
  1299.             </div>
  1300.           </form>
  1301.  
  1302.           <form>
  1303.             <div className="preferences-box">
  1304.               <header className="preferences-header">
  1305.                 <div className="preferences-heading purple">
  1306.                   <i className="far fa-file"></i>
  1307.                   <h2>Employment type</h2>
  1308.                 </div>
  1309.                 <p>
  1310.                   Maybe you have some preferences about your future contract?
  1311.                 </p>
  1312.               </header>
  1313.               <div className="preferences-jobStatus">
  1314.                 <div className="jobStatus-box">
  1315.                   <div className="btn-icon" onClick={clearEmploymentTiles}>
  1316.                     <ResetButton
  1317.                       CompanySpan={"Doesn't matter"}
  1318.                       CompanyActive={employmentStatus}
  1319.                     />
  1320.                   </div>
  1321.  
  1322.                   <div className="btn-icon" onClick={toggleEmploymentTiles}>
  1323.                     <Button
  1324.                       CompanySpan={'B2B'}
  1325.                       CompanyActive={employmentStatus}
  1326.                     />
  1327.                   </div>
  1328.  
  1329.                   <div className="btn-icon" onClick={toggleEmploymentTiles}>
  1330.                     <Button
  1331.                       CompanySpan={'Permanent'}
  1332.                       CompanyActive={employmentStatus}
  1333.                     />
  1334.                   </div>
  1335.  
  1336.                   <div className="btn-icon" onClick={toggleEmploymentTiles}>
  1337.                     <Button
  1338.                       CompanySpan={'Mandate contact'}
  1339.                       CompanyActive={employmentStatus}
  1340.                     />
  1341.                   </div>
  1342.                 </div>
  1343.               </div>
  1344.             </div>
  1345.           </form>
  1346.  
  1347.           <form>
  1348.             <div className="preferences-box input-Box">
  1349.               <header className="preferences-header">
  1350.                 <div className="preferences-heading blue">
  1351.                   <i className="fas fa-dollar-sign"></i>
  1352.                   <h2>
  1353.                     Let's talk about money. How about your monthly salary
  1354.                     expectations?
  1355.                   </h2>
  1356.                 </div>
  1357.                 <p>Be realistic with that</p>
  1358.               </header>
  1359.               <div className="input-values">
  1360.                 <span className="input-span">
  1361.                   {value.min * 1000} - {value.max * 1000} (PLN)
  1362.                 </span>
  1363.  
  1364.                 <div className="input-value">
  1365.                   Average earnings: {((value.max + value.min) / 2) * 1000} PLN
  1366.                 </div>
  1367.               </div>
  1368.               <div className="preferences-jobStatus">
  1369.                 <div className="jobStatus-box input-range">
  1370.                   <InputRange
  1371.                     maxValue={50}
  1372.                     minValue={0}
  1373.                     value={value}
  1374.                     onChange={value => setValue(value)}
  1375.                     formatLabel={value => `${value * 1000} PLN`}
  1376.                     allowSameValues={true}
  1377.                   />
  1378.                 </div>
  1379.               </div>
  1380.             </div>
  1381.           </form>
  1382.  
  1383.           <form>
  1384.             <div className="preferences-box">
  1385.               <header className="preferences-header">
  1386.                 <div className="preferences-heading pink">
  1387.                   <i className="fas fa-microchip"></i>
  1388.                   <h2>
  1389.                     Choose your main technology <b>(max 2)</b>
  1390.                   </h2>
  1391.                 </div>
  1392.                 <p>What is your speciality?</p>
  1393.               </header>
  1394.  
  1395.               <div className="preferences-jobStatus">
  1396.                 <div
  1397.                   className="inputStatus-box"
  1398.                   onClick={focusTechInput}
  1399.                   onBlur={() => {
  1400.                     setShowTechnologies(false);
  1401.                   }}
  1402.                 >
  1403.                   <div className="inputStatus" id="tech"></div>
  1404.                   <input
  1405.                     value={technology}
  1406.                     name="city"
  1407.                     placeholder="For example Javascript,html..."
  1408.                     onChange={searchTechnologies}
  1409.                     autoComplete="off"
  1410.                     className="tech-input"
  1411.                   />
  1412.                 </div>
  1413.               </div>
  1414.             </div>
  1415.  
  1416.             <div className="cities-box">
  1417.               <div
  1418.                 className={showTechnologies ? 'cities' : 'cities display-none'}
  1419.               >
  1420.                 <ul onMouseDown={toggleSetTechnologies} className="tech-ul">
  1421.                   {technologies}
  1422.                 </ul>
  1423.               </div>
  1424.             </div>
  1425.           </form>
  1426.  
  1427.           <form>
  1428.             <div className="preferences-box">
  1429.               <header className="preferences-header">
  1430.                 <div className="preferences-heading orange-dark">
  1431.                   <i className="fab fa-react"></i>
  1432.                   <h2>Share with us your skills and more tech stack</h2>
  1433.                 </div>
  1434.                 <p>
  1435.                   It will be easier for us to understand you even better.
  1436.                   Please, arrange in the hierarchy.
  1437.                 </p>
  1438.               </header>
  1439.  
  1440.               <div className="preferences-jobStatus">
  1441.                 <div
  1442.                   className="inputStatus-box"
  1443.                   onClick={focusSkillInput}
  1444.                   onBlur={() => {
  1445.                     setShowSkills(false);
  1446.                   }}
  1447.                 >
  1448.                   <div className="inputStatus" id="skill">
  1449.                     {' '}
  1450.                   </div>
  1451.                   <input
  1452.                     name="city"
  1453.                     placeholder="Select skills"
  1454.                     className="skill-input"
  1455.                     autoComplete="off"
  1456.                     onChange={searchSkills}
  1457.                   />
  1458.                 </div>
  1459.               </div>
  1460.             </div>
  1461.  
  1462.             <div className="cities-box">
  1463.               <div
  1464.                 className={
  1465.                   showSkills ? 'cities skills' : 'cities skill display-none'
  1466.                 }
  1467.               >
  1468.                 <ul onMouseDown={toggleSetSkills} className="skill-ul">
  1469.                   {skills}
  1470.                 </ul>
  1471.               </div>
  1472.             </div>
  1473.           </form>
  1474.           <div>
  1475.             <input type="submit" value="Update" className="pink-button" />
  1476.           </div>
  1477.         </div>
  1478.       </div>
  1479.     </div>
  1480.   );
  1481. };
  1482.  
  1483. export default UserPreferences;
RAW Paste Data
We use cookies for various purposes including analytics. By continuing to use Pastebin, you agree to our use of cookies as described in the Cookies Policy. OK, I Understand
Top