<repo_name>lukelin1991/capstone-frontend<file_sep>/src/components/containers/UsersContainer.jsx
import React from 'react'
import { connect } from 'react-redux'
import { CardColumns } from 'react-bootstrap'
import UserCard from '../UserCard'
import '../../stylesheets/home.css'

const UsersContainer = (props) => {
    return(
        <div className="backGrd">
            <h2>List of Users</h2>
            <br />
            <br />
            <CardColumns>
                {
                    props.users.map((userObj) => {
                        return <UserCard key={userObj.id} user={userObj} />
                    })
                }
            </CardColumns>
        </div>
    )
}

const mstp = (reduxState) => {
    return {
        users: reduxState.users.all
    }
}

export default connect(mstp, {})(UsersContainer)<file_sep>/src/components/containers/CompaniesContainer.jsx
import React, { useState } from 'react'
import { connect } from 'react-redux'
import { CardColumns, Button, Modal, Form } from 'react-bootstrap'
import { addCompany } from '../../redux/actions/actions'
import CompanyCard from '../CompanyCard'
import '../../stylesheets/home.css'

const CompaniesContainer = (props) => {
    const [show, setShow] = useState(false);
    const handleClose = () => setShow(false);
    const handleShow = () => setShow(true);

    const [name, setName] = useState("");

    const handleModalSubmit = (e) => {
        e.preventDefault()
        console.log("before fetch, son.")
        fetch("http://localhost:3000/companies", {
        method: "POST",
        headers: {
            "content-type": "application/json"
        },
        body: JSON.stringify({
            name: name,
            })
        })
        .then(r => r.json())
        .then(data => {
            props.addCompany(data)
            handleClose()
        })
    }

    const handleChange = (e) => {
        let { value } = e.target
        setName(value)
    }

    return(
        <div className="backGrd">
            <h2>List of Companies</h2>
            {localStorage.token ? <Button variant="info" onClick={handleShow}>Create Company</Button> : null }
            <br />
            <br />
            <CardColumns>
                {
                    props.companies.map((companyObj) => {
                        return <CompanyCard key={companyObj.id} company={companyObj} />
                    })
                }
            </CardColumns>
            <Modal show={show} onHide={handleClose}>
                <Modal.Header closeButton>
                    <Modal.Title>Create a Company</Modal.Title>
                </Modal.Header>
                <Modal.Body>
                <Form onSubmit={handleModalSubmit}>
                    <Form.Group controlId="formBasicName">
                        <Form.Label>Name</Form.Label>
                        <Form.Control type="name" name="name" value={name} 
                        placeholder="Enter job name" onChange={handleChange} />
                    </Form.Group>
                    <Button variant="primary" type="submit" value="Submit">
                        Submit
                    </Button>
                </Form>
                </Modal.Body>
            </Modal>
        </div>
    )
}

const mstp = (reduxState) => {
    return {
        companies: reduxState.companies.all
    }
}

export default connect(mstp, { addCompany })(CompaniesContainer)<file_sep>/src/components/containers/ProfileContainer.jsx
import React, { useState } from 'react'
import { connect } from 'react-redux'
import { Button, Alert, Modal, Form } from 'react-bootstrap'
import { useHistory } from 'react-router-dom'
import '../../stylesheets/home.css'
import { deleteUser, addCompanyUser } from '../../redux/actions/actions'

const  ProfileContainer = (props) => {
    // delete character functionality...
    const [show, setShow] = useState(false);
    const [confirmation, setConfirmation] = useState("");
    const handleClose = () => setShow(false);
    const handleShow = () => setShow(true);

    const history = useHistory()

    const handleChange = (e) => {
        let { value } = e.target
        setConfirmation(value)
    }

    const deleteFetch = () => {
        fetch(`http://localhost:3000/users/${props.user.id}`, {
            method: 'DELETE',
            headers: {
                'Content-Type': 'application/json',
                'Authorization': `bearer ${localStorage.token}`
            }
        })
        deleteUser(props.user)
        localStorage.clear()
        history.push('/')
        window.location.reload()
    }

    const handleDelete = () => {
        confirmation === "I confirm that I will delete this account" ?
            deleteFetch()
        :
            alert("Sorry, your confirmation input is incorrect.");
    }

    // joining a company functionality...
    const [modalShow, setModalShow] = useState(false)
    const [companyChosen, setCompanyChosen] = useState(0)

    const handleModalClose = () => setModalShow(false)
    const handleModalShow = () => setModalShow(true)

    const handleModalSubmit = (e) => {
        e.preventDefault()
        fetch("http://localhost:3000/companyusers", {
        method: "POST",
        headers: {
            "content-type": "application/json"
        },
        body: JSON.stringify({
            user_id: props.user.id,
            company_id: companyChosen })
        })
        .then(r => r.json())
        .then(data => {
            addCompanyUser(data)
            handleModalClose()
            window.location.reload()
        })
    }

    const handleSelectChange = (e) => {
        let { value } = e.target
        setCompanyChosen(value)
    }

    console.log(props.user)

    return(
        <div className="profileBackGrd">
            {localStorage.token ? 
                <div>
                    <Alert show={show} variant="danger" onClose={handleClose} dismissible>
                        <Alert.Heading>Are you sure?!</Alert.Heading>
                        <h5>
                        In order to confirm deleting your character, 
                        please type in the following inputs before clicking "Confirm Delete", 
                        or else press the x on the top right hand corner.
                        </h5>
                        <br />
                        <h6>please type "I confirm that I will delete this account" </h6>
                        <input type="confirmation" name="confirmation" autoComplete="off" value={confirmation} onChange={handleChange}/>
                        <hr />
                        <div className="d-flex justify-content-end">
                            <Button onClick={handleDelete} variant="outline-danger">
                                Confirm Delete!
                            </Button>
                        </div>
                    </Alert>

                    <h2>My Profile</h2>
                    <p>Username: {props.user.username}</p>
                    <p>Email: {props.user.email}</p>
                    <p>Company: {props.user.companies.length !== 0 ? props.user.companies[0].name : "None"}</p>
                    <p>How many Jobs I've Applied to: {props.applications.length}</p>
                    <Button variant="info" onClick={handleShow}>Delete</Button>
                    {' '}
                    { props.user.companies.length === 0? <Button variant="info" onClick={handleModalShow}>Join a Company</Button> : null }

                    <Modal show={modalShow} onHide={handleModalClose}>
                        <Modal.Header closeButton>
                            <Modal.Title>Join a Company</Modal.Title>
                        </Modal.Header>
                        <Modal.Body>
                        <Form onSubmit={handleModalSubmit}>
                            <Form.Group controlId="formControlSelect">
                                <Form.Label>Companies</Form.Label>
                                <Form.Control as="select" onChange={handleSelectChange}>
                                    {props.companies.map((companyObj) => {
                                        return <option key={companyObj.id} id={companyObj.id} value={companyObj.id}>{companyObj.name}</option>
                                    })}
                                </Form.Control>
                            </Form.Group>

                            <Button variant="primary" type="submit" value="Submit">
                                Submit
                            </Button>
                        </Form>
                        </Modal.Body>
                    </Modal>

                </div>
                :
                <h1>Please Register Or Log In First</h1>
            }
        </div>
    )
}

const mstp = (reduxState) => {
    return {
        user: reduxState.user,
        companies: reduxState.companies.all,
        applications: reduxState.user.applications
    }
}

export default connect(mstp, {deleteUser, addCompanyUser})(ProfileContainer)<file_sep>/src/redux/reducers/allUsersReducer.js
let initialState = {
    all: []
}

let allUsersReducer = (state = initialState, action) => {
    switch(action.type){
        case "SET_ALL_USERS":
            return {
                ...state,
                all: action.payload
            }
        case "DELETE_USER":
            return {
                ...state,
                all: state.all.filter(eachUser => eachUser.id !== action.payload)
            }

        default:
            return state
    }
}

export default allUsersReducer<file_sep>/src/components/Login.jsx
import React, { Component } from 'react';
import { Form, Button } from 'react-bootstrap'
import '../stylesheets/login.css'

class Login extends Component {
  state = {
    username: "",
    password: ""
  }

  handleSubmit = (e) => {
    e.preventDefault()
    this.props.handleSubmit(this.state)
  }

  handleChange = (e) => {
    let {name, value} = e.target
    this.setState({
      [name]: value
    })
  }

  render() {
    let {username, password} = this.state

    return (
      <div className="login">
        <h1>Please Log in</h1>

        <Form onSubmit={this.handleSubmit}>
          <Form.Group controlId="formBasicUsername">
              <Form.Label>Username</Form.Label>
              <Form.Control type="username" name="username" autoComplete="off" value={username} placeholder="Enter username" onChange={this.handleChange} />
          </Form.Group>

          <Form.Group controlId="formBasicPassword">
              <Form.Label>Password</Form.Label>
              <Form.Control type="<PASSWORD>" name="password" autoComplete="off"
              value={password} placeholder="<PASSWORD>" onChange={this.handleChange}/>
          </Form.Group>
          <Button variant="primary" type="submit" value="Submit">
              Login
          </Button>
        </Form>
      </div>
    );
  }

}

export default Login;<file_sep>/src/redux/reducers/rootReducer.js
import { combineReducers } from 'redux'
import jobReducer from './jobReducer'
import userReducer from './userReducer'
import companyReducer from './companyReducer'
import allUsersReducer from './allUsersReducer'

export default combineReducers({
    jobs: jobReducer,
    user: userReducer,
    companies: companyReducer,
    users: allUsersReducer
})<file_sep>/src/components/Register.jsx
import React, { Component } from 'react'
import { Form, Button } from 'react-bootstrap'
import '../stylesheets/register.css'
class Register extends Component {
    state = {
        username: "",
        email: "",
        password: ""
    }

    handleSubmit = (e) => {
        e.preventDefault()
        this.props.handleSubmit(this.state)
    }

    handleChange = (e) => {
        let {name, value} = e.target
        this.setState({[name]: value})
    }

    render(){
        let {username, email, password} = this.state
        return(
            <div className="register">
                <h1>Please Register</h1>
                <div>
                    <Form onSubmit={this.handleSubmit}>
                        <Form.Group controlId="formBasicUsername">
                            <Form.Label>Username</Form.Label>
                            <Form.Control type="username" name="username" autoComplete="off" value={username} 
                            placeholder="Enter username" onChange={this.handleChange} />
                        </Form.Group>

                        <Form.Group controlId="formBasicEmail">
                            <Form.Label>Email address</Form.Label>
                            <Form.Control type="email" autoComplete="off" name="email" value={email}
                            placeholder="Enter email" onChange={this.handleChange}/>

                            <Form.Text className="text-muted">
                            We'll never share your email with anyone else.
                            </Form.Text>
                        </Form.Group>

                        <Form.Group controlId="formBasicPassword">
                            <Form.Label>Password</Form.Label>
                            <Form.Control type="<PASSWORD>" name="password" autoComplete="off" value={password} 
                            placeholder="<PASSWORD>" onChange={this.handleChange}/>
                        </Form.Group>

                        <Button variant="primary" type="submit" value="Submit">
                            Register
                        </Button>
                    </Form>
                </div>
            </div>
        )
    }
}

export default Register;
<file_sep>/src/components/containers/JobsContainer.jsx
import React, { useState } from 'react'
import { connect } from 'react-redux'
import { CardColumns, Button, Modal, Form } from 'react-bootstrap'
import { addJob } from '../../redux/actions/actions'
import JobCard from '../JobCard'
import '../../stylesheets/home.css'

const JobsContainer = (props) => {
    const [show, setShow] = useState(false);
    const handleClose = () => setShow(false);
    const handleShow = () => setShow(true);

    const [title, setTitle] = useState("");
    const [location, setLocation] = useState("");
    const [salary, setSalary] = useState(0);
    const [description, setDescription] = useState("");

    console.log(props)

    const handleModalSubmit = (e) => {
        e.preventDefault()
        console.log("before fetch, son.")
        fetch("http://localhost:3000/jobs", {
        method: "POST",
        headers: {
            "content-type": "application/json"
        },
        body: JSON.stringify({
            title: title,
            location: location,
            salary: salary,
            description: description,
            company_id: props.user.companies[0].id
            })
        })
        .then(r => r.json())
        .then(data => {
            props.addJob(data)
            handleClose()
        })
    }

    const handleTitleChange = (e) => {
        let { value } = e.target
        setTitle(value)
    }

    const handleLocationChange = (e) => {
        let { value } = e.target
        setLocation(value)
    }

    const handleSalaryChange = (e) => {
        let { value } = e.target
        setSalary(value)
    }

    const handleDescChange = (e) => {
        let { value } = e.target
        setDescription(value)
    }

    return(
        <div className="backGrd">
            <h2>List of Jobs</h2>
            {localStorage.token && props.user.companies.length !== 0 ? <Button variant="info" onClick={handleShow}>Create job</Button> : null }
            <br />
            <br />
            <CardColumns>
                {
                    props.jobs.map((jobObj) => {
                        return <JobCard key={jobObj.id} job={jobObj} />
                    })
                }
            </CardColumns>
            <Modal show={show} onHide={handleClose}>
                <Modal.Header closeButton>
                    <Modal.Title>Post A Job</Modal.Title>
                </Modal.Header>
                <Modal.Body>
                <Form onSubmit={handleModalSubmit}>
                    <Form.Group controlId="formBasicTitle">
                        <Form.Label>Title</Form.Label>
                        <Form.Control type="title" name="title" value={title} 
                        placeholder="Enter job title" onChange={handleTitleChange} />
                    </Form.Group>

                    <Form.Group controlId="formBasicLocation">
                        <Form.Label>Location</Form.Label>
                        <Form.Control type="location" name="location" value={location}
                        placeholder="Enter job location" onChange={handleLocationChange}/>
                    </Form.Group>

                    <Form.Group controlId="formBasicSalary">
                        <Form.Label>Salary</Form.Label>
                        <Form.Control type="number" name="salary" value={salary} 
                        placeholder="salary" onChange={handleSalaryChange}/>
                    </Form.Group>

                    <Form.Group controlId="formBasicDescription">
                        <Form.Label>Job Description</Form.Label>
                        <Form.Control as="textarea" rows="3" name="description" 
                        value={description} placeholder="Job Description" onChange={handleDescChange} />
                    </Form.Group>
                    <Button variant="primary" type="submit" value="Submit">
                        Submit
                    </Button>
                </Form>
                </Modal.Body>
            </Modal>
        </div>
    )
}

const mstp = (reduxState) => {
    return {
        jobs: reduxState.jobs.all,
        user: reduxState.user
    }
}

export default connect(mstp, { addJob })(JobsContainer)<file_sep>/src/redux/reducers/userReducer.js
let initialState = {
    username: "",
    email:"",
    token: "",
    id: null,
    applications: [],
    companyusers: {},
    companies: [],
    jobs: []
}

let userReducer = (state = initialState, action) => {
    switch(action.type){
        case "SET_USER_INFO":
            return {
                ...state,
                username: action.payload.user.username,
                email: action.payload.user.email,
                token: action.payload.token,
                id: action.payload.user.id,
                applications: action.payload.user.applications,
                companyusers: action.payload.user.companyusers[0],
                companies: action.payload.user.companies
            }
        case "ADD_APPLICATION":
            let applicationArray = [...state.applications, action.payload]
            return {
                ...state,
                applications: applicationArray
            }

        case "ADD_COMPANYUSER":
            let companyuserArray = [...state.companyusers, action.payload]
            return {
                ...state,
                companyusers: companyuserArray
            }
        
        case "LOG_OUT":
            return {
                ...state,
                ...initialState
            }

        default:
            return state
    }
}

export default userReducer<file_sep>/src/components/CompanyCard.jsx
import React from 'react'
import { Card } from 'react-bootstrap'

const CompanyCard = ({company}) => {
    return(
        <Card style={{ width: '18rem' }}>
            <Card.Img variant="top" src={require(`../cannabidiol.jpg`)} />
            <Card.Body>
                <Card.Title>{company.name}</Card.Title>
                <Card.Text>
                    Current # of Jobs posted: {company.jobs.length === 0 ? "0" : company.jobs.length}
                </Card.Text>
            </Card.Body>
        </Card>
    )
}

export default CompanyCard<file_sep>/src/redux/actions/actions.js
// function definition to be used, only return an action.

// ACTIONS FOR CURRENT USER --------------------
export const logOut = () => {
    return {
        type: "LOG_OUT"
    }
}

export const setUserInfo = (respFromFetch) => {
    return {
        type: "SET_USER_INFO",
        payload: respFromFetch
    }
}

export const addApplication = (userAppObj) => {
    let actionObj = {
        type: "ADD_APPLICATION",
        payload: userAppObj
    }
    return actionObj
}

export const addCompanyUser = (companyUserObj) => {
    let actionObj = {
        type: "ADD_COMPANYUSER",
        payload: companyUserObj
    }
    return actionObj
}

// ACTIONS FOR ALL USERS ---------------------
export const setAllUsers = (usersArr) => {
    return {
        type: "SET_ALL_USERS",
        payload: usersArr
    }
}

export const deleteUser = (user) => {
    let actionObj = {
        type: "DELETE_USER",
        payload: user.id
    }
    return actionObj
}

// ACTIONS FOR COMPANIES ---------------------
export const setAllCompanies = (companiesArr) => {
    return {
        type: "SET_ALL_COMPANIES",
        payload: companiesArr
    }
}

export const addCompany = (compObj) => {
    let actionObj = {
        type: "ADD_COMPANY",
        payload: compObj
    }
    return actionObj
}

// ACTIONS FOR JOBS ----------------------------
export const setAllJobs = (jobsArr) => {
    return {
        type: "SET_ALL_JOBS",
        payload: jobsArr
    }
}

export const addJob = (jobObj) => {
   let actionObj = {
       type: "ADD_JOB",
       payload: jobObj
   }
   return actionObj
}<file_sep>/src/components/UserCard.jsx
import React from 'react'
import { Card } from 'react-bootstrap'

const UserCard = ({user}) => {
    return(
        <Card style={{ width: '18rem' }}>
            <Card.Img variant="top" src={require(`../Hemp-Farmer.jpg`)} />
            <Card.Body>
                <Card.Title>{user.username}</Card.Title>
                <Card.Text>
                    Email: {user.email}
                </Card.Text>
                <Card.Text>
                    Company: { user.companies.length === 0 ? "No Company" : user.companies[0].name}
                </Card.Text>
            </Card.Body>
        </Card>
    )
}

export default UserCard<file_sep>/src/components/JobCard.jsx
import React, { useState } from 'react'
import { connect } from 'react-redux'
import { Card, Button, Modal, Form } from 'react-bootstrap'
import { setUserInfo, addApplication } from '../redux/actions/actions'

const JobCard = (props) => {
    const [show, setShow] = useState(false);
    const [description, setDescription] = useState("");
    const handleClose = () => setShow(false);
    const handleShow = () => setShow(true);

    const handleModalSubmit = (e) => {
        e.preventDefault()
        console.log(props.user_id, "before fetch, son.")
        fetch("http://localhost:3000/applications", {
        method: "POST",
        headers: {
            "content-type": "application/json"
        },
        body: JSON.stringify({
            description: description,
            user_id: props.user_id,
            job_id: props.job.id })
        })
        .then(r => r.json())
        .then(data => {
            props.addApplication(data)
            handleClose()
            // window.location.reload()
        })
    }
    
    const handleChange = (e) => {
        let { value } = e.target
        console.log(e.target)
        setDescription(value)
    }


    return(
        <div>
            <Card style={{ width: '18rem' }}>
                <Card.Img variant="top" src={require(`../Hemp-Farmer.jpg`)} />
                <Card.Body>
                    <Card.Title>{props.job.title}</Card.Title>
                    <Card.Text>Salary: {props.job.salary}</Card.Text>
                    <Card.Text>Location: {props.job.location} </Card.Text>
                    <Card.Text>Description: {props.job.description} </Card.Text>
                    {localStorage.token ? <Button variant="info" onClick={handleShow}>Apply Here</Button> : null }
                </Card.Body>
            </Card>

            <Modal show={show} onHide={handleClose}>
                <Modal.Header closeButton>
                    <Modal.Title>Application Form</Modal.Title>
                </Modal.Header>
                <Modal.Body>
                <Form onSubmit={handleModalSubmit}>
                    <Form.Group controlId="formBasicDescription">

                        <Form.Label>Your Application</Form.Label>
                        <Form.Control as="textarea" rows="3" name="description" 
                        value={description} placeholder="Copy and paste your resume" onChange={handleChange} />
                    </Form.Group>
                    <Button variant="primary" type="submit" value="Submit">
                        Submit
                    </Button>
                </Form>
                </Modal.Body>
            </Modal>
        </div>
    
    )
}

const mstp = (reduxState) => {
    return {
        user_id: reduxState.user.id,
        user: reduxState.user
    }
}

export default connect(mstp, {setUserInfo, addApplication})(JobCard)