cohorts fixed

frontend/src/components/Cohorts/Cohorts.css

@@ -217,3 +217,59 @@ h12 {
   align-items: center;
   justify-content: center;
 }
+
+.middle {
+  top: 30%;
+  transform: translate(-50%, -50%);
+  position: absolute;
+}
+.bar {
+  width: 12px;
+  height: 90px;
+  background: #fff;
+  display: inline-block;
+  transform-origin: bottom center;
+  border-top-right-radius: 20px;
+  border-top-left-radius: 20px;
+  /*   box-shadow:5px 10px 20px inset rgba(255,23,25.2); */
+  animation: loader 1.2s linear infinite;
+}
+.bar1 {
+  animation-delay: 0.1s;
+}
+.bar2 {
+  animation-delay: 0.2s;
+}
+.bar3 {
+  animation-delay: 0.3s;
+}
+.bar4 {
+  animation-delay: 0.4s;
+}
+.bar5 {
+  animation-delay: 0.5s;
+}
+.bar6 {
+  animation-delay: 0.6s;
+}
+.bar7 {
+  animation-delay: 0.7s;
+}
+.bar8 {
+  animation-delay: 0.8s;
+}
+
+@keyframes loader {
+  0% {
+    transform: scaleY(0.1);
+    background: #34495e ;
+  }
+  50% {
+    transform: scaleY(1);
+    background:#6ad513;
+  }
+  100% {
+    transform: scaleY(0.1);
+    background: transparent;
+  }
+}

frontend/src/components/Cohorts/Cohorts.js

@@ -4,15 +4,16 @@ import axios from 'axios'
 import { useState, useEffect } from 'react'
 import Layout from '../Layout/Layout'
 import { NavLink, useNavigate } from 'react-router-dom'
-import configData from "../../config.json";
+import configData from '../../config.json'
+import CohortsModule from './CohortsModule'
 
 function Cohorts (props) {
-  const API_ENDPOINT = configData.API_URL + "/cohorts"
+  const API_ENDPOINT = configData.API_URL + '/cohorts'
 
   const [error, setError] = useState(false)
   const navigate = useNavigate()
 
-  const [options, setOptions] = useState([])
+  const [optionsCohorts, setOptionsCohorts] = useState([])
 
   const [selectedCohorts, setSelectedCohorts] = useState([])
 
@@ -42,6 +43,8 @@ function Cohorts (props) {
 
   const [dataAvailable, setDataAvailable] = useState(false)
 
+  const [triggerLayout, setTriggerLayout] = useState(false)
+
   const handleSelectedFilter = e => {
     setSelectedFilter(e.target.value)
   }
@@ -51,6 +54,37 @@ function Cohorts (props) {
     console.log(e.target.value)
   }
 
+  useEffect(() => {
+    const fetchDataCohorts = async () => {
+      try {
+        let res = await axios.get(configData.API_URL + '/cohorts')
+        console.log(res)
+        res.data.response.collections.forEach(element => {
+          if (element.name === undefined && element.cohortName !== undefined) {
+            let obj = {
+              value: element.cohortName,
+              label: element.cohortName
+            }
+            optionsCohorts.push(obj)
+          } else if (element.name !== undefined) {
+            let obj = {
+              value: element.name,
+              label: element.name
+            }
+            optionsCohorts.push(obj)
+          }
+          const timer = setTimeout(() => {
+            setTriggerLayout(true)
+          }, 2000)
+          return () => clearTimeout(timer)
+        })
+      } catch (error) {
+        console.log(error)
+      }
+    }
+    fetchDataCohorts().catch(console.error)
+  }, [])
+
   useEffect(() => {
     let values = []
     let labels = []
@@ -505,46 +539,27 @@ function Cohorts (props) {
     }
   }, [showGraphs])
 
-  useEffect(() => {
-    const fetchDataCohorts = async () => {
-      try {
-        let res = await axios.get(
-         configData.API_URL + "/cohorts"
-        )
-
-        res.data.response.collections.forEach(element => {
-          if (element.name === undefined && element.cohortName !== undefined) {
-            let obj = {
-              value: element.cohortName,
-              label: element.cohortName
-            }
-            options.push(obj)
-          } else if (element.name !== undefined) {
-            let obj = {
-              value: element.name,
-              label: element.name
-            }
-            options.push(obj)
-          }
-
-          console.log(options)
-        })
-      } catch (error) {
-        console.log(error)
-      }
-    }
-    fetchDataCohorts().catch(console.error)
-  }, [])
-
   return (
     <div className='graphsDiv'>
-      {showGraphs === false && (
+      {triggerLayout === false && (
+        <div class='middle'>
+          <div class='bar bar1'></div>
+          <div class='bar bar2'></div>
+          <div class='bar bar3'></div>
+          <div class='bar bar4'></div>
+          <div class='bar bar5'></div>
+          <div class='bar bar6'></div>
+          <div class='bar bar7'></div>
+          <div class='bar bar8'></div>
+        </div>
+      )}
+      {showGraphs === false && triggerLayout && (
         <Layout
           collection={'Cohorts'}
           setShowGraphs={setShowGraphs}
           selectedCohorts={selectedCohorts}
           setSelectedCohorts={setSelectedCohorts}
-          options={options}
+          optionsCohorts={optionsCohorts}
         />
       )}
 

frontend/src/components/Cohorts/CohortsModule.js

@@ -0,0 +1,50 @@
+import '../../App.css'
+import './Cohorts.css'
+import React, { useState, useEffect } from 'react'
+import Select from 'react-select'
+import makeAnimated from 'react-select/animated'
+
+function CohortsModule (props) {
+  const [results, setResults] = useState(null)
+  const [selectedCohortsAux, setSelectedCohortsAux] = useState([])
+  const animatedComponents = makeAnimated()
+  const onSubmitCohorts = () => {
+    setResults('Cohorts')
+
+    props.setShowGraphs(true)
+  }
+  const handleChangeCohorts = selectedOption => {
+    setSelectedCohortsAux([])
+    selectedCohortsAux.push(selectedOption)
+    props.setSelectedCohorts(selectedCohortsAux)
+  }
+
+  return (
+    <div className='cohortsModule'>
+      <Select
+        closeMenuOnSelect={false}
+        components={animatedComponents}
+        defaultValue={[]}
+        isMulti
+        options={props.optionsCohorts}
+        onChange={handleChangeCohorts}
+        autoFocus={true}
+        //onToggleCallback={onToggle3}
+      />
+
+      <form className='d-flex2' onSubmit={onSubmitCohorts}>
+        {results !== 'Cohorts' && (
+          <button className='searchButton2' type='submit'>
+            <img
+              className='forwardIcon'
+              src='./adelante.png'
+              alt='searchIcon'
+            ></img>
+          </button>
+        )}
+      </form>
+    </div>
+  )
+}
+
+export default CohortsModule

frontend/src/components/Individuals/IndividualsResults.js

@@ -42,7 +42,8 @@ function IndividualsResults (props) {
 
   const auth = useAuth()
   const isAuthenticated = auth.userData?.id_token ? true : false
-  console.log(isAuthenticated)
+
+ // const isAuthenticated = true
 
   useEffect(() => {
     console.log(props.query)
@@ -177,7 +178,7 @@ function IndividualsResults (props) {
 
           //res = await axios.post("https://beacons.bsc.es/beacon-network/v2.0.0/individuals/", jsonData1, { headers: headers })
           res = await axios.post(
-            configData.API_URL + '/individuals/?skip=0&limit=0',
+            configData.API_URL + '/individuals',
             jsonData1
           )
 
@@ -232,7 +233,7 @@ function IndividualsResults (props) {
 
           //res = await axios.post("https://beacons.bsc.es/beacon-network/v2.0.0/individuals/", jsonData2, { headers: headers })
           res = await axios.post(
-            configData.API_URL + '/individuals/?skip=0&limit=0',
+            configData.API_URL + '/individuals',
             jsonData2
           )