Merge remote-tracking branch 'origin/paginaVagas'

Co-authored-by: hryds <[email protected]>
Co-authored-by: JoaoVictorValadao <[email protected]>

stag.io/src/App.js

@@ -2,6 +2,10 @@ import "./App.css";
 import { Routes, Route, Navigate } from "react-router-dom";
 import { Children, useContext } from "react";
 
+import DescricaoVaga from "./pages/DescricaoVaga/DescricaoVaga";
+import SituacaoVaga from "./pages/SituacaoVaga/SituacaoVaga";
+import MinhasVagas from "./pages/MinhasVagas/MinhasVagas";
+import Vagas from "./pages/Vagas/Vagas";
 import Inicio from "./pages/Inicio/Inicio";
 import CadastroCandidato from "./pages/Cadastro/cadastroCandidato";
 import CadastroEmpresa from "./pages/Cadastro/cadastroEmpresa";
@@ -56,7 +60,11 @@ function App() {
             <VagaEmpresa/>
           //</Private>
         }></Route>
-
+
+        <Route path="/DescricaoVaga" element={<DescricaoVaga />}></Route>
+        <Route path="/SituacaoVaga" element={<SituacaoVaga />}></Route>
+        <Route path="/MinhasVagas" element={<MinhasVagas />}></Route>
+        <Route path="/Vagas" element={<Vagas />}></Route>
         </Routes>
       </AuthProvider>
     </div>

stag.io/src/components/Card.css

@@ -0,0 +1,59 @@
+.card-container {
+    width: 825px;
+    height: 114px;
+    padding: 10px;
+    border: 1px solid black;
+    border-radius: 20px;
+    margin: 2rem;
+    background: white;
+    color: black;
+    box-sizing: border-box;
+}
+
+.card-container:hover {
+    background-color: lightgray;
+    cursor: pointer;
+}
+
+.left-container {
+    width: 500px;
+    float: left;
+}
+
+.right-container {
+    text-align: right;
+    margin-top: 20px;
+    width: 300px;
+    height: 100px;
+    float: right;
+}
+
+.card-container .title {
+    font-family: Poppins;
+    font-size: 35px;
+    font-weight: 700;
+    line-height: 53px;
+    text-align: left;
+}
+
+.card-container .company {
+    font-family: Poppins;
+    font-size: 14px;
+    font-weight: 400;
+    letter-spacing: 0.05em;
+    text-align: justified;
+    padding-top: 2px;
+    padding-left: 9px;
+}
+
+.tag {
+    font-family: Poppins;
+    font-size: 15px;
+    font-weight: 400;
+    text-align: center;
+    padding: 5px;
+    margin: 5px;
+    border: 1px solid black;
+    border-radius: 18px;
+    background: rgba(249, 234, 234, 1);
+}

stag.io/src/components/Card.jsx

@@ -0,0 +1,43 @@
+import React, { Component } from 'react';
+
+import './Card.css';
+
+class Card extends Component {
+    renderTag() {
+        let myTags = [];
+        myTags = this.props.tag;
+
+        if(myTags.length >= 3) {
+            return(
+                <div className="right-container">
+                    <span className="tag">{myTags[0]}</span>
+                    <span className="tag">{myTags[1]}</span>
+                    <span className="tag">{myTags[2]}</span>
+                </div>
+            )
+        }
+        if(myTags.length == 2) {
+            return(
+                <div>
+                    <span className="tag">{myTags[0]}</span>
+                    <span className="tag">{myTags[1]}</span>
+                </div>
+            )
+        }
+        return <span className="tag">{myTags[0]}</span>
+    }
+
+    render() {
+        return (
+            <div className="card-container">
+                <div className="left-container">
+                    <div className="title">{this.props.title}</div>
+                    <div className="company">{this.props.company}</div>
+                </div>
+                {this.renderTag()}
+            </div>
+        );
+    }
+}
+
+export default Card;

stag.io/src/components/filtro.jsx

@@ -0,0 +1,91 @@
+import React, { Component } from "react";
+import '../pages/Vagas/Vagas.css';
+import Card from "./Card";
+
+class Filtro extends Component {
+
+    constructor(props) {
+        super(props);
+        this.state = {
+            vagas: [],
+            vaga: ""
+        };
+    }
+
+    handleChange = event => {
+        this.setState({ value: event.target.value });
+    };
+
+    handleChangeVaga = event => {
+        this.setState({ vaga: event.target.value });
+    };
+
+    getUnique(arr, comp) {
+        const unique = arr
+            //store the comparison values in array
+            .map(e => e[comp])
+
+            // store the keys of the unique objects
+            .map((e, i, final) => final.indexOf(e) === i && i)
+
+            // eliminate the dead keys & store unique objects
+            .filter(e => arr[e])
+
+            .map(e => arr[e]);
+
+        return unique;
+    }
+
+    componentDidMount() {
+        const vagas = require("../data/vagas.json");
+        this.setState({ vagas: vagas });
+    }
+
+    render() {
+
+        const uniqueVaga = this.getUnique(this.state.vagas, "tag");
+
+        const vagas = this.state.vagas;
+        const vaga = this.state.vaga;
+
+        const filterDropdown = vagas.filter(function (result) {
+            return result.tag === vaga;
+        });
+
+        return (
+            <div>
+                <form onSubmit={this.handleSubmitVaga}>
+                    <br />
+                    <br />
+
+                    <div className="content-column3">
+                        <label>
+                            Escolaridade <br />
+                            <select
+                                value={this.state.vaga}
+                                onChange={this.handleChangeVaga}
+                            >
+                                {uniqueVaga.map(vaga => (
+                                    <option key={vaga.id} value={vaga.tag}>
+                                        {vaga.tag}
+                                    </option>
+                                ))}
+                            </select>
+                        </label>
+                    </div>
+
+                    <div className="content-column1">
+                        {filterDropdown.map(vaga => (
+                            <div>
+                                <Card tag={vaga.tags} title={vaga.vaga} company={vaga.empresa}></Card>
+                            </div>
+                        ))}
+                    </div>
+
+                </form>
+            </div>
+        );
+    }
+}
+
+export default Filtro;

stag.io/src/components/navBar/NavBar.css

@@ -0,0 +1,45 @@
+.header {
+    width: 100%;
+    height: 70px;
+    margin: 50px;
+    display: flex;
+    align-items: center;
+}
+
+.logo {
+    display: flex;
+    align-items: center;
+
+    text-decoration: none;
+    color: white;    
+    font-family: 'Poppins';
+    font-style: normal;
+    font-weight: 400;
+    font-size: 32px;
+    margin: 1px;
+}
+
+.logo h1 {
+    margin: 0;
+}
+
+.logo img {
+    width: 60px;
+    height: 60px;
+    margin-right: 20px;
+}
+
+button {
+    font-family: 'Poppins';
+    font-style: normal;
+    font-weight: 400;
+    font-size: 24px;
+    color: white;
+    min-width: 200px;
+    min-height: 50px;
+    border: 1px;
+    border-radius: 50px;
+    background: rgba(34, 190, 146, 1);
+    cursor: pointer;
+    margin-left: 50px;
+}

stag.io/src/components/navBar/NavBar.jsx

@@ -0,0 +1,24 @@
+import React, { Component } from 'react';
+
+import './NavBar.css';
+import logo from "../../logo/logo-white.png";
+
+
+class Navbar extends Component {
+    render() {
+        return (
+            <div className="header">
+                <a className='logo' href='/'>
+                    <img src={logo} alt="Logo"></img>
+                    <h1>Stag.io</h1>
+                </a>
+                <button>Minhas vagas</button>
+                <button>Vagas</button>
+            </div>
+        );
+    }
+}
+
+export default Navbar;
+
+

stag.io/src/data/countries.json

@@ -0,0 +1,44 @@
+{
+    "world": [
+        {
+            "id": "1",
+            "country": "Cambodia"
+        },
+        {
+            "id": "2",
+            "country": "Australia"
+        },
+        {
+            "id": "3",
+            "country": "US"
+        },
+        {
+            "id": "4",
+            "country": "China"
+        },
+        {
+            "id": "5",
+            "country": "China"
+        },
+        {
+            "id": "6",
+            "country": "Cambodia"
+        },
+        {
+            "id": "7",
+            "country": "China"
+        },
+        {
+            "id": "8",
+            "country": "Australia"
+        },
+        {
+            "id": "9",
+            "country": "US"
+        },
+        {
+            "id": "10",
+            "country": "New Zealand"
+        }
+    ]
+}

stag.io/src/data/vagas.json

@@ -0,0 +1,50 @@
+[
+    {
+        "id": 1,
+        "empresa": "Empresa DadosNature",
+        "vaga": "Engenheiro de Dados",
+        "tag": "Ensino Superior",
+        "regime": "Remoto",
+        "tags": [
+            "#python",
+            "#data",
+            "#bi"
+        ]
+    },
+    {
+        "id": 2,
+        "empresa": "Empresa DadosNature",
+        "vaga": "Cientista de Dados",
+        "tag": "Ensino Médio",
+        "regime": "Remoto",
+        "tags": [
+            "#python",
+            "#data",
+            "#bi"
+        ]
+    },
+    {
+        "id": 3,
+        "empresa": "Empresa DadosNature",
+        "vaga": "Desenvolvedor Python",
+        "tag": "Ensino Superior",
+        "regime": "Remoto",
+        "tags": [
+            "#python",
+            "#flask",
+            "#django"
+        ]
+    },
+    {
+        "id": 4,
+        "empresa": "Empresa DadosNature",
+        "vaga": "Desenvolvedor mobile",
+        "tag": "Ensino Médio",
+        "regime": "Presencial",
+        "tags": [
+            "#kotlin",
+            "#react",
+            "#js"
+        ]
+    }
+]