artemis

", 22 | "license": "ISC", 23 | "bugs": { 24 | "url": "https://github.com/sophiapak/artemis/issues" 25 | }, 26 | "homepage": "https://github.com/sophiapak/artemis#readme", 27 | "dependencies": { 28 | "axios": "^0.20.0", 29 | "body-parser": "^1.19.0", 30 | "dotenv": "^8.2.0", 31 | "express": "^4.17.1", 32 | "pg": "^8.3.3", 33 | "react": "^16.13.1", 34 | "react-dom": "^16.13.1" 35 | }, 36 | "devDependencies": { 37 | "@babel/core": "^7.11.6", 38 | "@babel/preset-env": "^7.11.5", 39 | "@babel/preset-react": "^7.10.4", 40 | "babel-loader": "^8.1.0", 41 | "concurrently": "^5.3.0", 42 | "cross-env": "^6.0.3", 43 | "css-loader": "^4.3.0", 44 | "html-webpack-plugin": "^4.4.1", 45 | "nodemon": "^2.0.4", 46 | "sass": "^1.26.10", 47 | "sass-loader": "^10.0.2", 48 | "style-loader": "^1.2.1", 49 | "webpack": "^4.44.1", 50 | "webpack-cli": "^3.3.12", 51 | "webpack-dev-server": "^3.11.0" 52 | } 53 | } 54 | -------------------------------------------------------------------------------- /client/components/Display.jsx: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | 3 | const Display = (props) => { 4 | const clientData = 1; 5 | return ( 6 |

7 | 8 | 9 | {renderTableHeader()} 10 | {renderTableBody(props)} 11 | 12 |

13 |

14 | ); 15 | }; 16 | 17 | const renderTableHeader = () => { 18 | const headerElement = ['ID', "Name", 'Gender', 'Spayed/Neutered', 'Birthday', 'Breed', 'Color', 'Insurance Card', "Owner's First Name", "Owner's Last Name", "Mailing Address", "City", "State", "Zipcode", "Primary Phone Number", "Secondary Phone Number", "Insurance Company"]; 19 | 20 | return headerElement.map((element, index) => { 21 | return ( 22 | {element.toUpperCase()} 23 | ) 24 | }); 25 | }; 26 | 27 | const renderTableBody = (props) => { 28 | const { petId, petName, petGender, petSpayNeuter, petBirthday, petBreed, petColor, petInsuranceCard, ownerFirstName, ownerLastName, ownerAddress, ownerCity, ownerState, ownerZipcode, ownerFirstPhoneNum, ownerSecondPhoneNum, insCompany } = props; 29 | 30 | return ( 31 | 32 | {petId} 33 | {petName} 34 | {petGender} 35 | {petSpayNeuter} 36 | {petBirthday} 37 | {petBreed} 38 | {petColor} 39 | {petInsuranceCard} 40 | {ownerFirstName} 41 | {ownerLastName} 42 | {ownerAddress} 43 | {ownerCity} 44 | {ownerState} 45 | {ownerZipcode} 46 | {ownerFirstPhoneNum} 47 | {ownerSecondPhoneNum} 48 | {insCompany} 49 | 50 | ) 51 | }; 52 | 53 | export default Display; -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 |

2 |

3 |

4 | 5 |
6 | 7 | ## Beta Stage 8 | 9 | Team artemis will strive to continuously release updates and additional features. 10 | 11 | 1. If you would like to contribute to this project: 12 | 13 | - Please feel free to submit a PR 14 | 15 | 2. If you happen to come across any issues while tinkering with the application: 16 | - Please report the bug/issue by submitting a ticket located in the Issues Tab within this repository 17 | 18 |
19 | 20 | ## Getting Started 21 | 22 | 1. Clone artemis to your local machine and point to the artemis directory: 23 | 24 | git clone https://github.com/sophiapak/artemis.git 25 | 26 | cd artemis 27 | 28 | 2. Install all required dependencies with the following script: 29 | 30 | npm install 31 | 32 | 3. Run the following script to open artemis on http://localhost:8080: 33 | 34 | npm run dev 35 | 36 |
37 | 38 | ## Overview 39 | 40 | artemis is an application that allows users to store and query client data. 41 | 42 | Users can quickly query the data entering the Owner's Last Name and the Pet's Name. 43 | 44 | If no matches are found, the application will return a message to the user saying that the client they are trying to find does not exist in the database. 45 | 46 | Users also can add new clients to the database or add new pets to existing owners found in the database. 47 | 48 |
49 | 50 | ## Built With 51 | 52 | - React 53 | - Node.JS 54 | - Express 55 | - PostgreSQL 56 | 57 |
58 | 59 | ## License 60 | 61 | This project is licensed under the MIT License 62 | -------------------------------------------------------------------------------- /server/server.js: -------------------------------------------------------------------------------- 1 | const express = require('express'); 2 | const bodyParser = require('body-parser'); 3 | const path = require('path'); 4 | const app = express(); 5 | const artemisController = require('./controllers/artemisControllers'); 6 | 7 | // this allows our input values from our form to be available in req.body 8 | app.use(express.urlencoded({ 9 | extended: true, 10 | })); 11 | 12 | app.use(bodyParser.json()); 13 | 14 | // Sends the Client the Artemis Homepage (Logo with Interactive Buttons) 15 | app.get('/', (req, res) => { 16 | res.status(200).sendFile(path.join(__dirname, '../client/index.html')); 17 | }); 18 | 19 | // Sends the Client a table if Client has been found in the db 20 | app.post('/find', artemisController.getClient, (req, res) => { 21 | res.status(200).json(res.locals.foundClient); 22 | }); 23 | 24 | app.get('/breed', artemisController.getBreeds, (req, res) => { 25 | res.status(200).json(res.locals.allBreeds); 26 | }); 27 | 28 | app.get('/owners', artemisController.getOwners, (req, res) => { 29 | res.status(200).json(res.locals.allOwners); 30 | }); 31 | 32 | // Sends the Client a success message if Client has been added to the db 33 | app.post('/add', artemisController.addOwner, artemisController.addPet, artemisController.sendClient, (req, res) => { 34 | res.status(200).json(res.locals.sendClient); 35 | }); 36 | 37 | // Sends the Client a success message if Client has been found and deleted from the db 38 | // app.post('/delete', artemisController.deleteClient, (req, res) => { 39 | // }); 40 | 41 | // 404 HANDLER FOR UNKNOWN ROUTES 42 | app.use((req, res) => { 43 | res.status(404).send('Not Found'); 44 | }); 45 | 46 | // GLOBAL ERROR HANDLER 47 | app.use((err, req, res, next) => { 48 | res.status(500).send('Internal Server Error'); 49 | }); 50 | 51 | // LISTENING TO SERVER 52 | app.listen(3000, () => { 53 | console.log('artemis server is running on port 3000'); 54 | }); -------------------------------------------------------------------------------- /client/style.css: -------------------------------------------------------------------------------- 1 | * { 2 | margin: 0; 3 | padding: 0; 4 | } 5 | 6 | #root { 7 | width: 100%; 8 | } 9 | 10 | body { 11 | display: flex; 12 | align-items: center; 13 | flex-direction: column; 14 | justify-content: center; 15 | background-color: #d2d7ff; 16 | padding: 150px 0 150px 0; 17 | font-family: 'Karla', sans-serif; 18 | font-size: 12pt; 19 | } 20 | 21 | #artemis-logo { 22 | margin: 0 0 -20px 0; 23 | } 24 | 25 | h1 { 26 | color: #ffffff; 27 | font-size: 48pt; 28 | font-family: 'Pacifico', cursive; 29 | } 30 | 31 | input[type=submit] { 32 | padding: 5px 10px; 33 | background-color: #606dc8; 34 | color: #ffffff; 35 | font-family: 'Karla', sans-serif; 36 | font-size: 14pt; 37 | border: none; 38 | border-radius: 4px; 39 | margin: 5px; 40 | } 41 | 42 | .searchField { 43 | padding: 7px 10px; 44 | margin: 5px; 45 | text-align: center; 46 | border: none; 47 | } 48 | 49 | #interactiveContainer { 50 | display: flex; 51 | flex-direction: column; 52 | justify-content: center; 53 | width: 250px; 54 | margin: 0 auto; 55 | } 56 | 57 | #searchBar { 58 | margin: 0 auto; 59 | } 60 | 61 | #addContainer { 62 | display: flex; 63 | flex-direction: column; 64 | justify-content: center; 65 | width: 250px; 66 | margin: 50px auto 0 auto; 67 | } 68 | 69 | #addBar { 70 | margin: 0 auto; 71 | } 72 | 73 | #mainContainer { 74 | display: flex; 75 | flex-direction: column; 76 | justify-content: center; 77 | width: 80%; 78 | margin: 0 auto; 79 | } 80 | 81 | #resultTable { 82 | text-align: center; 83 | margin: 75px auto; 84 | font-family: 'Karla', sans-serif; 85 | border-radius: 3px; 86 | width: 100%; 87 | } 88 | 89 | #resultTable th { 90 | background-color: #606dc8; 91 | color: #ffffff; 92 | padding: 20px 10px; 93 | } 94 | 95 | #resultTable tr { 96 | background-color: #ffffff; 97 | color: #606dc8; 98 | } 99 | 100 | #resultTable td { 101 | padding: 20px 10px; 102 | } 103 | 104 | #notFoundNotice { 105 | text-align: center; 106 | margin: 75px; 107 | color: #606dc8; 108 | font-weight: 700; 109 | } 110 | 111 | #addOption { 112 | margin: 15px auto 0 auto; 113 | color: #606dc8; 114 | font-family: 'Karla', sans-serif; 115 | text-decoration: none; 116 | } 117 | 118 | #addOption:visited { 119 | color: #606dc8; 120 | } 121 | 122 | select { 123 | text-align-last: center; 124 | text-indent: 12px; 125 | color: #6e6e6e; 126 | padding: 25px -5px; 127 | margin: 5px auto 5px auto; 128 | width: 240px; 129 | font-size: 10pt; 130 | border: none; 131 | height: 27px; 132 | } -------------------------------------------------------------------------------- /server/controllers/artemisControllers.js: -------------------------------------------------------------------------------- 1 | /* eslint-disable radix */ 2 | /* eslint-disable max-len */ 3 | /* eslint-disable no-tabs */ 4 | const db = require('../db/artemisDB'); 5 | const { query } = require('express'); 6 | 7 | const artemisController = {}; 8 | 9 | artemisController.getClient = (req, res, next) => { 10 | // retrieving the information from req.body 11 | // find within our sql db 12 | // store our filtered table in res.locals 13 | const { petName } = req.body; 14 | const { ownerName } = req.body; 15 | const clientTable = ` 16 | SELECT 17 | p.pet_id AS id, 18 | p.name, 19 | p.gender, 20 | p.spayneuter, 21 | p.birthday, 22 | b.breedname, 23 | p.color, 24 | p.insurancecard, 25 | o.firstname, 26 | o.lastname, 27 | o.mailingaddress, 28 | o.city, 29 | o.state, 30 | o.zipcode, 31 | o.firstphonenum, 32 | o.secondphonenum, 33 | i.company 34 | 35 | FROM pet p 36 | 37 | FULL OUTER JOIN owner o ON p.owner_id = o.owner_id 38 | FULL OUTER JOIN insurance i ON p.insurance_id = i.insurance_id 39 | FULL OUTER JOIN breed b ON p.breed_id = b.breed_id 40 | 41 | WHERE p.name=$1 AND o.lastname=$2 42 | `; 43 | // $1 = petName & $2 = ownerName 44 | const queryParams = [petName, ownerName]; 45 | 46 | db.query(clientTable, queryParams) 47 | .then(result => { 48 | res.locals.foundClient = result.rows[0]; 49 | return next(); 50 | }) 51 | .catch((err) => { 52 | console.error(err.stack, 'Sorry! Client not found!'); 53 | }); 54 | }; 55 | 56 | artemisController.getBreeds = (req, res, next) => { 57 | const breedTable = ` 58 | SELECT 59 | b.breedname 60 | 61 | FROM breed b 62 | `; 63 | 64 | db.query(breedTable) 65 | .then(result => { 66 | // console.log('BREEDS RESULT.ROWS[0]: ', result.rows); 67 | const listBreeds = []; 68 | result.rows.forEach(obj => { 69 | listBreeds.push(obj.breedname); 70 | }); 71 | res.locals.allBreeds = listBreeds; 72 | // console.log('LISTBREEDS: ', listBreeds); 73 | return next(); 74 | }) 75 | .catch((err) => { 76 | console.error(err.stack, 'Sorry! Client not found!'); 77 | }); 78 | }; 79 | 80 | artemisController.getOwners = (req, res, next) => { 81 | const ownerTable = ` 82 | SELECT 83 | firstname || ' ' || lastname AS name, 84 | owner_id AS ownerId 85 | FROM owner 86 | `; 87 | 88 | db.query(ownerTable) 89 | .then(result => { 90 | console.log('OWNERS RESULT.ROWS: ', result.rows); 91 | res.locals.allOwners = result.rows; 92 | return next(); 93 | }) 94 | .catch((err) => { 95 | console.error(err.stack, 'Sorry! Owner not found!'); 96 | }); 97 | }; 98 | 99 | artemisController.addOwner = (req, res, next) => { 100 | console.log('CONTROLLER ADD OWNER REQ.BODY: ', req.body); 101 | // if the owner already exists in the database 102 | if (req.body.ownerExisting !== "") return next(); 103 | 104 | let { ownerFirstName, ownerLastName, ownerAddress, ownerCity, ownerState, ownerZipcode, ownerFirstPhoneNum, ownerSecondPhoneNum } = req.body; 105 | 106 | // parsing all the string values from input fields into integers to follow Schema guidelines 107 | ownerZipcode = parseInt(ownerZipcode); 108 | 109 | const addOwnerString = ` 110 | INSERT INTO owner(firstname, lastname, mailingaddress, city, state, zipcode, firstphonenum, secondphonenum) 111 | VALUES($1, $2, $3, $4, $5, $6, $7, $8) 112 | RETURNING owner_id AS ownerId, lastname 113 | `; 114 | 115 | const queryParamsOwner = [ownerFirstName, ownerLastName, ownerAddress, ownerCity, ownerState, ownerZipcode, ownerFirstPhoneNum, ownerSecondPhoneNum]; 116 | 117 | // if a new owner 118 | db.query(addOwnerString, queryParamsOwner) 119 | .then(result => { 120 | console.log('RESULT.ROWS.OWNERID: ', result.rows[0].ownerid); 121 | res.locals.newOwnerId = result.rows[0].ownerid; 122 | res.locals.newOwnerName = result.rows[0].lastname; 123 | return next(); 124 | }) 125 | .catch((err) => { 126 | console.error(err.stack, 'Sorry! Owner was not added!'); 127 | }); 128 | }; 129 | 130 | artemisController.addPet = (req, res, next) => { 131 | console.log('CONTROLLER ADD PET REQ.BODY: ', req.body); 132 | let { petName, petGender, petSpayNeuter, petBirthday, petBreed, petColor, ownerExisting, insCompany, petInsuranceCard } = req.body; 133 | 134 | // parsing all the string values from input fields into integers to follow Schema guidelines 135 | petBreed = parseInt(petBreed); 136 | insCompany = (insCompany === "") ? null : parseInt(insCompany); 137 | ownerExisting = (ownerExisting === "") ? res.locals.newOwnerId : parseInt(ownerExisting); 138 | 139 | const addPetString = ` 140 | INSERT INTO pet 141 | (name, gender, spayneuter, birthday, breed_id, color, owner_id, insurance_id, insurancecard) 142 | VALUES ($1, $2, $3, $4, $5, $6, $7, $8, $9) 143 | RETURNING name 144 | `; 145 | 146 | const queryParamsPet = [petName, petGender, petSpayNeuter, petBirthday, petBreed, petColor, ownerExisting, insCompany, petInsuranceCard]; 147 | 148 | db.query(addPetString, queryParamsPet) 149 | .then(result => { 150 | console.log('Pet has been added to the database'); 151 | res.locals.newPetName = result.rows[0].name; 152 | res.locals.sendOwnerId = ownerExisting; 153 | // res.locals.newOwner = result; 154 | return next(); 155 | }) 156 | .catch((err) => { 157 | console.error(err.stack, 'Sorry! Pet was not added!'); 158 | }); 159 | }; 160 | 161 | artemisController.sendClient = (req, res, next) => { 162 | const { sendOwnerId } = res.locals; 163 | const { newPetName } = res.locals; 164 | const clientTable = ` 165 | SELECT 166 | p.pet_id AS id, 167 | p.name, 168 | p.gender, 169 | p.spayneuter, 170 | p.birthday, 171 | b.breedname, 172 | p.color, 173 | p.insurancecard, 174 | o.firstname, 175 | o.lastname, 176 | o.mailingaddress, 177 | o.city, 178 | o.state, 179 | o.zipcode, 180 | o.firstphonenum, 181 | o.secondphonenum, 182 | i.company 183 | 184 | FROM pet p 185 | 186 | FULL OUTER JOIN owner o ON p.owner_id = o.owner_id 187 | FULL OUTER JOIN insurance i ON p.insurance_id = i.insurance_id 188 | FULL OUTER JOIN breed b ON p.breed_id = b.breed_id 189 | 190 | WHERE p.name=$1 AND o.owner_id=$2 191 | `; 192 | // $1 = petName & $2 = ownerName 193 | const queryParams = [newPetName, sendOwn]; 194 | 195 | db.query(clientTable, queryParams) 196 | .then(result => { 197 | res.locals.sendClient = result.rows[0]; 198 | return next(); 199 | }) 200 | .catch((err) => { 201 | console.error(err.stack, 'Sorry! Client not found!'); 202 | }); 203 | }; 204 | // artemisController.deleteClient = (req, res, next) => { 205 | // }; 206 | 207 | module.exports = artemisController; -------------------------------------------------------------------------------- /client/App.jsx: -------------------------------------------------------------------------------- 1 | import React, { Component } from 'react'; 2 | import Display from './components/Display.jsx'; 3 | import axios from 'axios'; 4 | 5 | class App extends Component { 6 | constructor() { 7 | super() 8 | this.state = { 9 | petName: '', 10 | ownerName: '', 11 | client: {}, 12 | addClient: { 13 | petName: '', 14 | petGender: '', 15 | petSpayNeuter: '', 16 | petBirthday: '', 17 | petBreed: '', 18 | petColor: '', 19 | ownerExisting: '', 20 | ownerFirstName: '', 21 | ownerLastName: '', 22 | ownerAddress: '', 23 | ownerCity: '', 24 | ownerState: '', 25 | ownerZipcode: '', 26 | ownerFirstPhoneNum: '', 27 | ownerSecondPhoneNum: '', 28 | insCompany: '', 29 | petInsuranceCard: '', 30 | }, 31 | addContainer: false, 32 | breeds: [], 33 | owners: [], 34 | } 35 | 36 | this.onChangePetName = this.onChangePetName.bind(this); 37 | this.onChangeOwnerName = this.onChangeOwnerName.bind(this); 38 | this.onSubmit = this.onSubmit.bind(this); 39 | this.addComponent = this.addComponent.bind(this); 40 | this.hideComponent = this.hideComponent.bind(this); 41 | this.breedOptions = this.breedOptions.bind(this); 42 | this.addSubmit = this.addSubmit.bind(this); 43 | this.changePetName = this.changePetName.bind(this); 44 | this.changePetGender = this.changePetGender.bind(this); 45 | this.changePetSpayNeuter = this.changePetSpayNeuter.bind(this); 46 | this.changePetBirthday = this.changePetBirthday.bind(this); 47 | this.changePetBreed = this.changePetBreed.bind(this); 48 | this.changePetColor = this.changePetColor.bind(this); 49 | this.changeOwnerExisting = this.changeOwnerExisting.bind(this); 50 | this.changeOwnerFirstName = this.changeOwnerFirstName.bind(this); 51 | this.changeOwnerLastName = this.changeOwnerLastName.bind(this); 52 | this.changeOwnerAddress = this.changeOwnerAddress.bind(this); 53 | this.changeOwnerCity = this.changeOwnerCity.bind(this); 54 | this.changeOwnerState = this.changeOwnerState.bind(this); 55 | this.changeOwnerZipcode = this.changeOwnerZipcode.bind(this); 56 | this.changeOwnerFirstPhoneNum = this.changeOwnerFirstPhoneNum.bind(this); 57 | this.changeOwnerSecondPhoneNum = this.changeOwnerSecondPhoneNum.bind(this); 58 | this.changeInsCompany = this.changeInsCompany.bind(this); 59 | this.changePetInsuranceCard = this.changePetInsuranceCard.bind(this); 60 | 61 | } 62 | 63 | componentDidMount() { 64 | axios.get('/breed') 65 | .then((result) => { 66 | // console.log('RESULT.DATA: ', result.data) 67 | this.setState({ 68 | breeds: result.data, 69 | }) 70 | }) 71 | .catch((err) => { 72 | console.log('Error in App axios get request: ', err); 73 | }); 74 | 75 | axios.get('/owners') 76 | .then((result) => { 77 | console.log('RESULT.DATA: ', result.data) 78 | this.setState({ 79 | owners: result.data, 80 | }) 81 | }) 82 | .catch((err) => { 83 | console.log('Error in App axios get request: ', err); 84 | }); 85 | } 86 | 87 | onChangePetName(e) { 88 | this.setState({ petName: e.target.value }) 89 | } 90 | 91 | onChangeOwnerName(e) { 92 | this.setState({ ownerName: e.target.value }) 93 | } 94 | 95 | onSubmit(e) { 96 | e.preventDefault() 97 | 98 | const clientObject = { 99 | petName: this.state.petName, 100 | ownerName: this.state.ownerName, 101 | }; 102 | 103 | // console.log('CLIENTOBJECT: ', clientObject) 104 | 105 | axios.post('/find', clientObject) 106 | .then((result) => { 107 | if (typeof result.data === 'string') { 108 | this.setState({ 109 | componentDisplay: 'OFF', 110 | petName: '', 111 | ownerName: '', 112 | addContainer: false, 113 | }) 114 | } 115 | if (typeof result.data === 'object') { 116 | this.setState({ 117 | client: result.data, 118 | componentDisplay: 'ON', 119 | petName: '', 120 | ownerName: '', 121 | addContainer: false, 122 | }) 123 | } 124 | // console.log('CLIENT DATA: ', typeof result.data) 125 | // console.log('COMPONENTDISPLAY: ', this.state.componentDisplay) 126 | }) 127 | .catch((err) => { 128 | console.log('Error in App axios post request: ', err); 129 | }) 130 | } 131 | 132 | addComponent(e) { 133 | this.setState({ 134 | addContainer: !this.state.addContainer, 135 | }) 136 | } 137 | 138 | hideComponent(e) { 139 | this.setState({ 140 | addContainer: false, 141 | }) 142 | } 143 | 144 | breedOptions() { 145 | return this.state.breeds.map((breed, index) => { 146 | return ( 147 | 148 | ) 149 | }) 150 | } 151 | 152 | ownerOptions() { 153 | return this.state.owners.map((owner) => { 154 | return ( 155 | 156 | ) 157 | }) 158 | } 159 | 160 | changePetName(e) { 161 | this.setState({ 162 | addClient: { 163 | ...this.state.addClient, 164 | petName: e.target.value, 165 | }, 166 | }); 167 | } 168 | 169 | changePetGender(e) { 170 | this.setState({ 171 | addClient: { 172 | ...this.state.addClient, 173 | petGender: e.target.value, 174 | }, 175 | }); 176 | } 177 | 178 | changePetSpayNeuter(e) { 179 | this.setState({ 180 | addClient: { 181 | ...this.state.addClient, 182 | petSpayNeuter: e.target.value, 183 | }, 184 | }); 185 | } 186 | 187 | changePetBirthday(e) { 188 | this.setState({ 189 | addClient: { 190 | ...this.state.addClient, 191 | petBirthday: e.target.value, 192 | }, 193 | }); 194 | } 195 | 196 | changePetBreed(e) { 197 | this.setState({ 198 | addClient: { 199 | ...this.state.addClient, 200 | petBreed: e.target.value, 201 | }, 202 | }); 203 | } 204 | 205 | changeOwnerExisting(e) { 206 | this.setState({ 207 | addClient: { 208 | ...this.state.addClient, 209 | ownerExisting: e.target.value, 210 | }, 211 | }); 212 | } 213 | 214 | 215 | changePetColor(e) { 216 | this.setState({ 217 | addClient: { 218 | ...this.state.addClient, 219 | petColor: e.target.value, 220 | }, 221 | }); 222 | } 223 | 224 | changeOwnerFirstName(e) { 225 | this.setState({ 226 | addClient: { 227 | ...this.state.addClient, 228 | ownerFirstName: e.target.value, 229 | }, 230 | }); 231 | } 232 | 233 | changeOwnerLastName(e) { 234 | this.setState({ 235 | addClient: { 236 | ...this.state.addClient, 237 | ownerLastName: e.target.value, 238 | }, 239 | }); 240 | } 241 | 242 | changeOwnerAddress(e) { 243 | this.setState({ 244 | addClient: { 245 | ...this.state.addClient, 246 | ownerAddress: e.target.value, 247 | }, 248 | }); 249 | } 250 | 251 | changeOwnerCity(e) { 252 | this.setState({ 253 | addClient: { 254 | ...this.state.addClient, 255 | ownerCity: e.target.value, 256 | }, 257 | }); 258 | } 259 | 260 | changeOwnerState(e) { 261 | this.setState({ 262 | addClient: { 263 | ...this.state.addClient, 264 | ownerState: e.target.value, 265 | }, 266 | }); 267 | } 268 | 269 | changeOwnerZipcode(e) { 270 | this.setState({ 271 | addClient: { 272 | ...this.state.addClient, 273 | ownerZipcode: e.target.value, 274 | }, 275 | }); 276 | } 277 | 278 | changeOwnerFirstPhoneNum(e) { 279 | this.setState({ 280 | addClient: { 281 | ...this.state.addClient, 282 | ownerFirstPhoneNum: e.target.value, 283 | }, 284 | }); 285 | } 286 | 287 | changeOwnerSecondPhoneNum(e) { 288 | this.setState({ 289 | addClient: { 290 | ...this.state.addClient, 291 | ownerSecondPhoneNum: e.target.value, 292 | }, 293 | }); 294 | } 295 | 296 | changeInsCompany(e) { 297 | this.setState({ 298 | addClient: { 299 | ...this.state.addClient, 300 | insCompany: e.target.value, 301 | }, 302 | }); 303 | } 304 | 305 | changePetInsuranceCard(e) { 306 | this.setState({ 307 | addClient: { 308 | ...this.state.addClient, 309 | petInsuranceCard: e.target.value, 310 | }, 311 | }); 312 | } 313 | 314 | 315 | addSubmit(e) { 316 | e.preventDefault() 317 | 318 | const addClientObject = this.state.addClient; 319 | 320 | console.log('ADDCLIENTOBJECT: ', addClientObject) 321 | 322 | axios.post('/add', addClientObject) 323 | .then((result) => { 324 | this.setState({ 325 | client: result.data, 326 | componentDisplay: 'ON', 327 | addContainer: false, 328 | }) 329 | 330 | console.log('POST REQUEST RESULT: ', result) 331 | }) 332 | .catch((err) => { 333 | console.log('Error in App axios post request: ', err); 334 | }) 335 | } 336 | 337 | render() { 338 | return ( 339 |

340 |

341 | 346 |

347 | 348 | ADD CLIENT 349 | 350 | {(this.state.componentDisplay === 'ON') ? 351 | : null 370 | } 371 | 372 | {(this.state.componentDisplay === 'OFF') ? 373 |

374 |

CLIENT DOES NOT EXIST

375 |

: null 376 | } 377 | 378 | {(this.state.addContainer === true) ? 379 |

380 |

381 | 382 | 387 | 392 | 393 | 397 | 398 | 407 | 408 | 412 | 413 | 414 | 415 | 416 | 470 | 471 | 472 | 473 | 474 | 475 |

476 |

: null 477 | } 478 |

479 | ); 480 | } 481 | 482 | // render() { 483 | // return ( 484 | //

485 | //

486 | // 491 | //

492 | // { !(this.state.componentDisplay === false) ? : null } 493 | //

494 | // ); 495 | // } 496 | }; 497 | 498 | export default App; --------------------------------------------------------------------------------