From 8e607ee21f29cf30f3f1d21394d92f472a1a12b0 Mon Sep 17 00:00:00 2001
From: Hope87 <vitaliy0187@gmail.com>
Date: Mon, 28 Jun 2021 17:57:28 +0300
Subject: [PATCH] add fetch inquiry

---
 src/components/Home/Home.js                   |  11 +-
 .../InputsComponent.module.css                | 116 ++++++++++--------
 .../ReportForm/ReportForm.module.css          |   4 +
 src/server/server.js                          |   6 +
 4 files changed, 84 insertions(+), 53 deletions(-)
 create mode 100644 src/server/server.js

diff --git a/src/components/Home/Home.js b/src/components/Home/Home.js
index 40bec508..992d4e14 100644
--- a/src/components/Home/Home.js
+++ b/src/components/Home/Home.js
@@ -4,6 +4,7 @@ import Description from '../Description/Description';
 import front from '../../images/front_end.png';
 import back from '../../images/back_end.png';
 import design from '../../images/design.png';
+// import { fetchProfile } from '../../server/server';
 
 export const candidatesList = [
   {
@@ -58,6 +59,15 @@ const Home = () => {
 
   const [selectedTab, setSelectedTab] = useState('');
 
+  // useEffect(() => {
+  //   setTabs(tabsList);
+  //   setCandidates(candidatesList);
+
+  //   fetchProfile('https://guild.craft-group.xyz/api/profile')
+  //     .then((profileArr) => setProfiles(profileArr))
+  //     .catch((e) => console.log(e));
+  // }, []);
+
   useEffect(() => {
     setTabs(tabsList);
     setCandidates(candidatesList);
@@ -65,7 +75,6 @@ const Home = () => {
     fetch('https://guild.craft-group.xyz/api/skills/skills-on-main-page')
       .then((response) => response.json())
       .then((res) => {
-        console.log('RES', res);
         const keys = Object.keys(res);
 
         const values = Object.values(res);
diff --git a/src/components/InputsComponent/InputsComponent.module.css b/src/components/InputsComponent/InputsComponent.module.css
index 30632b9b..a73e7b3a 100644
--- a/src/components/InputsComponent/InputsComponent.module.css
+++ b/src/components/InputsComponent/InputsComponent.module.css
@@ -1,57 +1,69 @@
 .reportForm__form {
-    position: relative;
-    display: flex;
-    justify-content: space-between;
-    margin-left: 14px;
-    margin-bottom: 28px;
-  }
-  
-  .reportForm__form > span {
-    font-family: 'GT Eesti Pro Display';
-    font-size: 2em;
-    font-weight: 700;
-    font-style: normal;
-    letter-spacing: normal;
-    text-align: left;
-    position: absolute;
-    left: 0;
-    bottom: 7px;
-  }
-  
-  .input__text,
-  .input__number {
-    display: flex;
-    flex-direction: column;
-    margin-left: 20px;
-  }
-  
+  position: relative;
+  display: flex;
+  justify-content: space-between;
+  margin-left: 14px;
+  margin-bottom: 28px;
+}
+
+.reportForm__form > span {
+  font-family: 'GT Eesti Pro Display';
+  font-size: 2em;
+  font-weight: 700;
+  font-style: normal;
+  letter-spacing: normal;
+  text-align: left;
+  position: absolute;
+  left: 0;
+  bottom: 7px;
+}
+
+.input__text,
+.input__number {
+  display: flex;
+  flex-direction: column;
+  margin-left: 20px;
+}
+
+.input__text > input {
+  width: 460px;
+  height: 42px;
+  box-shadow: 0 0 59px rgba(44, 44, 44, 0.05);
+  border-radius: 5px;
+  border: 1px solid #c4c4c4;
+  background-color: #ffffff;
+  outline: none;
+  font-size: 1.8em;
+  padding-left: 20px;
+  padding-right: 20px;
+}
+
+@media (max-width: 575.98px) {
   .input__text > input {
-    width: 460px;
-    height: 42px;
-    box-shadow: 0 0 59px rgba(44, 44, 44, 0.05);
-    border-radius: 5px;
-    border: 1px solid #c4c4c4;
-    background-color: #ffffff;
-    outline: none;
-    font-size: 1.8em;
-    padding-left: 20px;
-    padding-right: 20px;
+    max-width: 460px;
   }
-  
+}
+
+.input__number > input {
+  width: 141px;
+  height: 42px;
+  box-shadow: 0 0 59px rgba(44, 44, 44, 0.05);
+  border-radius: 5px;
+  border: 1px solid #c4c4c4;
+  background-color: #ffffff;
+  outline: none;
+  font-size: 1.8em;
+  text-align: center;
+}
+
+@media (max-width: 575.98px) {
   .input__number > input {
-    width: 141px;
-    height: 42px;
-    box-shadow: 0 0 59px rgba(44, 44, 44, 0.05);
-    border-radius: 5px;
-    border: 1px solid #c4c4c4;
-    background-color: #ffffff;
-    outline: none;
-    font-size: 1.8em;
-    text-align: center;
+    max-width: 141px;
   }
-  
-  .reportForm__form > img {
-    margin-top: 5px;
-    width: 23px;
-    height: 23px;
-  }
\ No newline at end of file
+}
+
+.reportForm__form > img {
+  margin-top: 5px;
+  width: 23px;
+  height: 23px;
+}
diff --git a/src/components/ReportForm/ReportForm.module.css b/src/components/ReportForm/ReportForm.module.css
index 5a79f092..90f86ede 100644
--- a/src/components/ReportForm/ReportForm.module.css
+++ b/src/components/ReportForm/ReportForm.module.css
@@ -122,6 +122,10 @@
   border-radius: 5px;
   border: 1px solid #c4c4c4;
   background-color: #ffffff;
+  font-size: 1.8em;
+  padding-left: 20px;
+  padding-right: 20px;
+  outline: none;
 }
 
 .reportForm__footer {
diff --git a/src/server/server.js b/src/server/server.js
new file mode 100644
index 00000000..cc4b9d10
--- /dev/null
+++ b/src/server/server.js
@@ -0,0 +1,6 @@
+export const fetchProfile = async (link, index = '') => {
+  const response = await fetch(`${link}/${index}`);
+  let data = await response.json();
+
+  return data;
+};