<repo_name>SilviaRdgz/Talent-Pool<file_sep>/Client/src/components/CRUD/notes.jsx
import React, { useState, useEffect } from "react";

import { Link } from 'react-router-dom';

import PortfolioService from "../../services/PortfolioService";

const PortfolioDetails = (props) => {
  const [details, setDetails] = useState({});

  const getSinglePortfolio = () => {
    const { id } = props.match.params;
    const service = new PortfolioService();
    service
      .getOnePortfolio(id)
      .then((responseFromApi) => setDetails(responseFromApi))
      .catch((error) => {
        console.error(error);
      });
  };

  useEffect(getSinglePortfolio, [props.match.params]);

  const deletePortfolio = async () => {
    const { id } = props.match.params;
    const service = new PortfolioService();
    const response = await service.removePortfolio(id);
    response.message && props.history.push("/talent-dashboard");
  };

  const ownershipCheck = (portfolio) => {
    console.log(portfolio)
    console.log(props.loggedInUser._id)
    if (props.loggedInUser && portfolio.owner === props.loggedInUser._id) {
      return (
        <div>
        <Link to={{
          pathname: '/edit-portfolio',
          state: {portfolio}
        }}>
          <button className='btn'>Edit Portfolio</button>
        </Link>
        <button className='btn' onClick={() => deletePortfolio()}>Delete</button>
        </div>
      );
    
    } 
  };

  return details.length > 0 && 
      (

    <div>
    <section className="hero is-link is-fullheight is-fullheight-with-navbar">
    <div className="hero-body">
      <div className="container">Hello! I am
        <h1 className="title is-1">
        {details[0].name}
        </h1>
        <h2 className="subtitle is-3">
        {details[0].role}
        </h2>
        {ownershipCheck(details[0])}
      </div>
    </div>
  </section>

  <section className="section" id="about">

    <div className="section-heading">
      <h3 className="title is-2">About Me</h3>
      <div className="container">
        <p>{details[0].about}</p>
      </div>
    </div>
        <br/>
        <br/>
    <div className="columns has-same-height is-gapless">
      <div className="column">
        <div className="card">
          <div className="card-content">
            <h3 className="title is-4">Profile</h3>

            <div className="content">
              <table className="table-profile">
                <tr>
                  <th colspan="1"></th>
                  <th colspan="2"></th>
                </tr>
                <tr>
                  <td>Email:</td>
                  <td>{details[0].email}</td>
                </tr>
              </table>
            </div>
            <br/>
            <div className="buttons has-addons is-centered">
            <span style={{marginRight:'3%'}}>
            <button href="#" className="button is-primary" >Github</button>
            </span>
            <span>
            <button href="#" className="button is-primary">LinkedIn</button>
            </span>
            </div>
          </div>
        </div>
      </div>
      <div className="column">

        <div className="card" style={{marginRight:'2%', marginLeft: '2%'}}>
          <div className="card-image">
            <figure className="image is-4by5">
              <img src={details[0].imageUrl}  alt="Placeholder image"/>
            </figure>
          </div>
        </div>
      </div>
      <div className="column">

        <div className="card">
          <div className="card-content skills-content">
            <h3 className="title is-4">Skills</h3>
            <div className="content">

              <article className="media">
                <div className="media-content">
                  <div className="content">
                    <p>
                      <strong>JavaScript:</strong>
                      <br/>
                      <progress className="progress is-primary" value="90" max="100"></progress>
                    </p>
                  </div>
                  </div>
              </article>

              <article className="media">
                <div className="media-content">
                  <div className="content">
                    <p>
                      <strong>Vue.js:</strong>
                      <br/>
                      <progress className="progress is-primary" value="90" max="100"></progress>
                    </p>
                  </div>
                </div>
              </article>

              <article className="media">
                <div className="media-content">
                  <div className="content">
                    <p>
                      <strong>Node.js:</strong>
                      <br/>
                      <progress className="progress is-primary" value="75" max="100"></progress>
                    </p>
                  </div>
                </div>
              </article>

              <article className="media">
                <div className="media-content">
                  <div className="content">
                    <p>
                      <strong>HTML5/CSS3</strong>
                      <br/>
                      <progress className="progress is-primary" value="95" max="100"></progress>
                    </p>
                  </div>
                </div>
              </article>

              <article className="media">
                <div className="media-content">
                  <div className="content">
                    <p>
                      <strong>Databases</strong>
                      <br/>
                      <progress className="progress is-primary" value="66" max="100"></progress>
                    </p>
                  </div>
                </div>
              </article>
            </div>
          </div>
        </div>
      </div>
    </div>
  </section>

   <br/>
        <div className="tags custom-tags">
          <span className="tag is-light">Node.js</span><span className="tag is-light">Express.js</span><span className="tag is-light">VueJS</span><span
            className="tag is-light">JavaScript</span><span className="tag is-light">HTML5</span><span className="tag is-light">Canvas</span><span
            className="tag is-light">CSS3</span><span className="tag is-light">Bulma</span><span className="tag is-light">Bootstrap</span><span
            className="tag is-light">jQuery</span><span className="tag is-light">Pug</span><span className="tag is-light">Stylus</span><span
            className="tag is-light">SASS/SCSS</span><span className="tag is-light">Webpack</span><span className="tag is-light">Git</span><span
            className="tag is-light">ASP.NET Web Forms</span><span className="tag is-light">MSSQL</span><span className="tag is-light">MongoDB</span><span
            className="tag is-light">Apache Cordova</span><span className="tag is-light">Chrome Extensions</span>
        </div> 

  <section className="section" id="services">
    <div className="section-heading">
      <h3 className="title is-2">Services</h3>
    </div>
    <br/>
    <div className="container">
      <div className="columns">
        <div className="column">
          <div className="box">
            <div className="content">
              <h4 className="title is-5">Front End Web Development</h4>
              Develop Front End using latest standards with HTML5/CSS3 with added funtionality using JavaScript and
              Vue.js.
            </div>
          </div>
        </div>
        <div className="column">
          <div className="box">
            <div className="content">
              <h4 className="title is-5">Back End Web Development</h4>
              Develop Back End application/service using Node.js or ASP .NET and SQL server or Mongo DB databases.
            </div>
          </div>
        </div>
      </div>
      </div>
      </section>

  <section className="section" id="resume">
    <div className="section-heading">
      <h3 className="title is-2">Resume</h3>
      <a href="#">
        <span className="icon">
          <i className="fas fa-file-alt"></i>
        </span>
        <span className="button is-primary is-large">Download PDF</span>
      </a>
    </div>
  </section>

  
  <section className="section" id="contact">
    <div className="container">
      <div className="section-heading">
        <h3 className="title is-2">Get in touch</h3>
      </div>
      <br/>

      <div className="columns">
        <div className="column is-6 is-offset-3">
          <div className="box">
            <div className="field">
              <label className="label">Name</label>
              <div className="control">
                <input className="input" type="text" />
              </div>
            </div>

            <div className="field">
              <label className="label">Email</label>
              <div className="control has-icons-left">
                <input className="input" type="email" value=""/>
                <span className="icon is-small is-left">
                  <i className="fas fa-envelope"></i>
                </span>
              </div>
            </div>

            <div className="field">
              <label className="label">Message</label>
              <div className="control">
                <textarea className="textarea" ></textarea>
              </div>
            </div>

            <div className="field is-grouped has-text-centered">
              <div className="control">
                <button className="button is-primary is-medium">Submit</button>
              </div>
            </div>
          </div>
        </div>
      </div>

    </div>
  </section>
  </div>

  );
};

export default PortfolioDetails;<file_sep>/Server/models/portfolio-model.js
const mongoose = require("mongoose");
const Schema = mongoose.Schema;

const portfolioSchema = new Schema({
  
  imageUrl: String,
  name: String,
  about: String,
  role: String,
  email: String,
  owner: { type: Schema.Types.ObjectId, ref: "User" },
});

const Portfolio = mongoose.model("Portfolio", portfolioSchema);

module.exports = Portfolio;
<file_sep>/Client/src/components/PortfolioList/PortfolioList.jsx
import React, {Component} from 'react';
import axios from 'axios';
import { Link } from 'react-router-dom';

class PortfolioList extends Component {
  state = {
    listOfPortfolios: [],
  };

  getAllPortfolios = () => {
    axios.get('http://localhost:5000/api/portfolios')
    .then((responseFromApi) =>{
      console.log(responseFromApi.data)
      this.setState({
        listOfPortfolios: responseFromApi.data,
      });

    }).catch((err) => console.log(err));
  }

  componentDidMount() {
    this.getAllPortfolios()

  }

  render() {
    
    return <div>
       <h1 className='intro'>Dive into our Talent</h1>
       <div className="container">
      <div className="section">



      

      {this.state.listOfPortfolios.map((portfolioItem) => {
        return (

<Link to={`/recruitment/${portfolioItem._id}`}> 
<div id="app" className="columns">

<div v-for="card in cardData"  className="column is-half" key={portfolioItem._id}>
            <div className="card large" >
              <div className="card-image">
                <figure className="image is-5by4">
                  <img src={portfolioItem.imageUrl} alt="profile-photo"/>
                </figure>

                </div>
              <div className="card-content">
                <div className="media">
                  <div className="media-left">
                  </div>
                  <div className="media-content">
                    <p className="title is-4 no-padding">{portfolioItem.name}</p>
                      
                    <p className="subtitle is-6">{portfolioItem.role}</p>
                  </div>
                </div>
                <div className="content">
                  {portfolioItem.about}
                  <div className="background-icon"><span className="icon-twitter"></span></div>
                </div>
              </div>
            </div>
            </div>
            </div>        
          
</Link>
)

})}
</div>
</div>
</div>


  }
};

export default PortfolioList;


<file_sep>/Client/src/components/CRUD/EditPortfolio.jsx
import React, { Component, useHistory } from "react";
import UploadService from '../../services/UploadService.js'
import PortfolioService from "../../services/PortfolioService";

const initialState = {
  name: "",
  role: '',
  about: "",
  email: '',
  imageUrl: "",
};

class EditPortfolio extends Component {
    state = {
      name: this.props.location.state.portfolio.name,
      about: this.props.location.state.portfolio.about,
      role: this.props.location.state.portfolio.role,
      email: this.props.location.state.portfolio.email,
      imageUrl: '',
      disableSubmitButton: false
  } 

  // HANDLE INPUT CHANGES
  handleInputChanges = (event) => {
    const { name, value } = event.target;
    this.setState({ ...this.state, [name]: value });
  };

  // HANDLE FORM SUBMISSION
  handleFormSubmit = (event) => {
    event.preventDefault();
    const service = new PortfolioService();
    const { name, about, role, email, imageUrl } = this.state;
    const { _id, imageUrl: existingImageUrl } = this.props.location.state.portfolio;

    let data = {name, about, role, email}


    if(imageUrl) {
      data.imageUrl = imageUrl;
    } else {
      data.imageUrl = existingImageUrl;
    }

    service.updatePortfolio(_id, data)
    .then((response) => {
      console.log("response", response)
      this.setState(initialState);
     
    })
    .catch(err => console.error(err))

  };

  // HANDLE FILE UPLOAD

   handleFileUpload = (event) => {
    const file = event.target.files[0]
    
    this.setState({...this.state, disableSubmitButton: true})

    const uploadData = new FormData();
    uploadData.append('imageUrl', event.target.files[0]);
    const service = new UploadService(); 
    service
      .handleUpload(uploadData)
      .then(response => {
        this.setState({...this.state, imageUrl: response.secure_url, disableSubmitButton: false });
      })
      .catch(err => {
        console.log('Error while uploading the file: ', err);
      });
  };



  render() {
    return this.props.location.state && (
      <div>
      <div className="hero-body">
        <div className="container">
          <div className="columns is-centered"></div>

          <form className="box" onSubmit={this.handleFormSubmit}>
      <div className="field">
  <label className="label">Full Name</label>
  <div className="control">
    <input 
    className="input" 
    type="text" 
    placeholder="Text input"
    name="name"
    value={this.state.name}
    onChange={(e) => this.handleInputChanges(e)}
    />
  </div>
</div>

<div className="field">
  <label className="label">Role</label>
  <div className="control">
    <input 
    className="input" 
    type="text" 
    placeholder="Text input"
    name="role"
    value={this.state.role}
    onChange={(e) => this.handleInputChanges(e)}
    />
  </div>
</div>

<div className="field">
  <label className="label">Email</label>
  <div className="control has-icons-left has-icons-right">
    <input 
    className="input is-info" 
    type="email" 
    placeholder="@"
    name="email"
    value={this.state.email}
    onChange={(e) => this.handleInputChanges(e)}
     />
    <span className="icon is-small is-left">
      <i className="fas fa-envelope"></i>
    </span>
    <span className="icon is-small is-right">
      <i className="fas fa-exclamation-triangle"></i>
    </span>
  </div>
</div>

<div className="field">
  <label className="label">About me</label>
  <div className="control">
    <textarea 
    className="textarea" 
    placeholder="Textarea"
    name="about"
    value={this.state.about}
    onChange={(e) => this.handleInputChanges(e)}
    ></textarea>
  </div>
</div>
<br/>
<div className="file">
  <label className="file-label">
    <input 
    className="file-input"
    type="file" 
    name="imageUrl"
    onChange={(e) => this.handleFileUpload(e)}
      
     />
    <span className="file-cta">
      <span className="file-icon">
        <i className="fas fa-upload"></i>
      </span>
      <span className="file-label">
        Choose a profile photo…
      </span>
    </span>
  </label>
</div>
<br/>
<div className="field is-grouped">
  <div className="control">
  {this.state.disableSubmitButton ? (
    <button className="button is-link" title="Disabled button" disabled>Submit</button>
  ) : (
    <button className="button is-link">Submit</button>
  )
  }
  </div>
  <div className="control">
    <button className="button is-link is-light">Cancel</button>
  </div>
</div>
</form>
      </div>
      </div>
      </div>
    );
  }
}

export default EditPortfolio;<file_sep>/Client/src/components/TalentDashboard/TalentDashboard.jsx
import React, { useState, useEffect } from "react";
import { Link } from "react-router-dom";
import AuthService from "../../services/AuthService";



const TalentDashboard = ({ loggedInUser}) => {

    const [onlineUser, setOnlineUser] = useState(null);

    const service = new AuthService();
    useEffect(() => {
      setOnlineUser(loggedInUser);
    }, [loggedInUser]);

    return !onlineUser ? (
        <div>

<div className="hero-body">
                <div className="container has-text-centered">
                    <div className="column is-6 is-offset-3">
                        <h1 className="intro">
                        Welcome !
                        </h1>
                        <br/>
                        <h2 className="content">
                        and congratulations on completing your training! 🥳 Now, let's help you finding a job. To connect with talent scouters, please upload your resume. We will make sure you get the spotlight.
                        </h2>
                        <br/>
                        <Link to='/login'><button className='button is-primary'>Login to add resume</button></Link>
                    </div>
                </div>
            </div>
        </div>
    ) : (

<div className="hero-body">
    <div className="container has-text-centered">
    <div className="column is-6 is-offset-3">
     <h1 className="intro"> My dashboard
</h1>
        <br/>
<div>
<Link to='/add' className='content' style={{textDecoration: 'underline'}}>Add Resume</Link>
</div>
<br/>
<div>
<Link to='/my-portfolio' className='content' style={{textDecoration: 'underline'}}>View my resume</Link>
</div>
<br/>
<div>
<Link to='/portfolios' className='content' style={{textDecoration: 'underline'}}>View Talent Pool</Link>
</div>
<br/>
</div>
</div>
</div>

    )
}

export default TalentDashboard;


<file_sep>/Client/src/components/Home/Home.jsx

import React, { Component } from 'react';
import { Link } from 'react-router-dom';
import LogoMotion from '../../images/TMU-logo-V02.png'
import AuthService from '../../services/AuthService.js';


class Home extends Component {
  state = { loggedInUser: null };
 
  service = new AuthService();
 
  componentWillReceiveProps(nextProps) {
    this.setState({ ...this.state, loggedInUser: nextProps['userInSession'] });
  }
 

  render() {

    if (this.state.loggedInUser) {

      return (

<div>
<div className="hero-body">
            <div className="container has-text-centered">
                <div className="columns is-vcentered">
                    <div className="column is-5">
                        <figure className="image is-4by3">
                            <img src={LogoMotion} alt="Description"/>
                        </figure>
                    </div>
                    <div className="column is-6 is-offset-1">
                        <h1 className="intro-title">
                        TALENT POOL
                        </h1>
                        <h2 className="headline">
                        Defining the next tech generation.
                        </h2>
                        <br/>
                        
                        <p className="has-text-centered">
                        
                        <Link to='/talent-dashboard' className='btn' style={{marginLeft:'1%'}}>I'm Talent</Link>
                        <Link to='/portfolios' className='btn'>I'm Recruiting </Link>
          
                        </p>
                    </div>
                </div>
            </div>
        </div>
  
</div>

        
      );

    } else {
      return (

        <div>
<div className="hero-body">
            <div className="container has-text-centered">
                <div className="columns is-vcentered">
                    <div className="column is-5">
                        <figure className="image is-4by3">
                            <img src={LogoMotion} alt="Description"/>
                        </figure>
                    </div>



                    
                    <div className="column is-6 is-offset-1">
                        <h1 className="intro">
                        TALENT POOL
                        </h1>
                        <h2 className="headline">
                        Defining the next tech generation.
                        </h2>
                        <br/>
                        <p className="has-text-centered">
                        <Link to='/talent-dashboard' className='btn' style={{marginLeft:'1%'}}>I'm Talent</Link>
                        <Link to='/portfolios' className='btn'>I'm Recruiting </Link>
                        </p>
                    </div>
                </div>
            </div>
        </div>
  
</div>


      );
    }
    
  }
  
}

export default Home;




<file_sep>/Client/src/components/Auth/SignUp.jsx

import React, { Component } from "react";
import AuthService from "../../services/AuthService";
import { Link } from "react-router-dom";


class SignUp extends Component {

  state = { email: "", password: "", errorMessage: "" };

  service = new AuthService();

  handleFormSubmit = (event) => {
    event.preventDefault();
    const { email, password } = this.state;

    this.service
      .signup(email, password)
      .then((response) => {
        this.setState({ email: "", password: "" });
        this.props.setUser(response);
      })
      .catch((error) => {
        if (error.response.data) {
          const { message } = error.response.data;
          this.setState({ ...this.state, errorMessage: message });
        }

        console.log(error);
      });
  };

  handleChange = (event) => {
    const { name, value } = event.target;
    this.setState({ ...this.state, [name]: value });
  };

  render() {
    return (
      
      <div >
      <div className="hero-body">
        <div className="container">
          <div className="columns is-centered">
            <div className="column is-5-tablet is-4-desktop is-3-widescreen">
            {this.state.errorMessage && <span>{this.state.errorMessage}</span>}
              <form className="box" onSubmit={this.handleFormSubmit}>
                <div className="field">
                  <label htmlFor="" className="label">Email</label>
                  <div className="control has-icons-left">
                    <input 
                    type="email" 
                    name='email'
                    placeholder="e.g. <EMAIL>" 
                    className="input" 
                    value={this.state.email}
                    onChange={(e) => this.handleChange(e)}
                    required/>
                    <span className="icon is-small is-left">
                      <i className="fa fa-envelope"></i>
                    </span>
                  </div>
                </div>
      
      
                <div className="field">
                  <label htmlFor="" className="label">Password</label>
                  <div className="control has-icons-left">
                    <input 
                    type="password" 
                    name="password"
                    value={this.state.password}
                    onChange={(e) => this.handleChange(e)}
                    placeholder="*******" 
                    className="input" 
                    required />
                    <span className="icon is-small is-left">
                      <i className="fa fa-lock"></i>
                    </span>
                  </div>
                </div>
                <div className="field">
                <input type="submit" value="Sign up" className="button is-success"/>
                </div>
                <h2>
                Already have account?
                <Link to={"/login"}> Login</Link>
            </h2>
              </form>
            </div>
          </div>
        </div>
      </div>
      </div>
    );
  }
}

export default SignUp;


<file_sep>/README.md
# Talent Pool 🏊‍♀️

A React App as final project of the Web Development course at Ironhack, 2021.

TechMeUp (TMU) is a tech fund which supported my tech training. Inspired by their mission and their trust, I wanted to give them something back and, in reciprocitty, support their growth.

Talent Pool is site to give extra exposure to the talent funded by TMU, making them more visible to tech recruiters.

## Technologies used:


* HTML
* CSS
* Javascript
* Node.js
* React
* MongoDB
* Mongoose
* Express
* Bulma
* Heroku


### HOW IT LOOKS:


https://user-images.githubusercontent.com/81960826/121230601-ba83a400-c88f-11eb-9b25-9e689e46f87a.mp4



### LINK TO TechMeUp:

https://www.techmeup.nl/


