Skip to content

Commit

Permalink
fixed routes
Browse files Browse the repository at this point in the history
  • Loading branch information
@SophiaAramburu
SophiaAramburu committed Jan 26, 2023
1 parent 9bf3a7b commit 4a51b9d
Show file tree
Hide file tree
Showing 4 changed files with 132 additions and 74 deletions.
21 changes: 7 additions & 14 deletions client/package-lock.json
View file

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

79 changes: 40 additions & 39 deletions client/package.json
View file
Original file line number Diff line number Diff line change
@@ -1,51 +1,52 @@
{
"name": "barscapes",
"version": "0.1.0",
"private": true,
"dependencies": {
"@testing-library/jest-dom": "^5.16.5",
"@testing-library/react": "^13.4.0",
"@testing-library/user-event": "^13.5.0",
"express": "^4.18.2",
"express-graphql": "^0.12.0",
"graph": "^0.2.0",
"ql": "^0.1.5",
"react": "^18.2.0",
"react-dom": "^18.2.0",
"react-router-dom": "^6.2.1",
"react-scripts": "^5.0.1",
"web-vitals": "^2.1.4"
},
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test",
"eject": "react-scripts eject"
"private": true,
"dependencies": {
"@apollo/client": "^3.7.5",
"@testing-library/jest-dom": "^5.16.5",
"@testing-library/react": "^13.4.0",
"@testing-library/user-event": "^13.5.0",
"express": "^4.18.2",
"express-graphql": "^0.12.0",
"graph": "^0.2.0",
"ql": "^0.1.5",
"react": "^18.2.0",
"react-dom": "^18.2.0",
"react-router-dom": "^6.2.1",
"react-scripts": "^5.0.1",
"web-vitals": "^2.1.4"
},
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test",
"eject": "react-scripts eject"
},
"eslintConfig": {
"extends": [
"react-app",
"react-app/jest"
]
},
"extends": [
"react-app",
"react-app/jest"
]
},
"browserslist": {
"production": [
">0.2%",
"not dead",
"not op_mini all"
],
"development": [
"last 1 chrome version",
"last 1 firefox version",
"last 1 safari version"
]
},
"production": [
">0.2%",
"not dead",
"not op_mini all"
],
"development": [
"last 1 chrome version",
"last 1 firefox version",
"last 1 safari version"
]
},
"description": "This project was bootstrapped with [Create React App](https://github.com/facebook/create-react-app).",
"main": "index.js",
"author": "",
"license": "ISC",
"devDependencies": {
"nodemon": "^2.0.20",
"tailwind": "^4.0.0"
"nodemon": "^2.0.20",
"tailwind": "^4.0.0"
}
}
}
31 changes: 28 additions & 3 deletions client/src/App.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,14 +3,37 @@ import Header from './components/Header.js'
import Home from './pages/homepage'
import Login from './pages/login'
import Signup from './pages/create-account'

import {
ApolloClient,
InMemoryCache,
ApolloProvider,
createHttpLink,
} from '@apollo/client';
import { setContext } from '@apollo/client/link/context';
import './App.css';
import { Route, Routes } from "react-router-dom"

const httpLink = createHttpLink({
uri: '/graphql',
});
const authLink = setContext((_, { headers }) => {
const token = localStorage.getItem('id_token');
return {
headers: {
...headers,
authorization: token ? `Bearer ${token}` : '',
},
};
});
const client = new ApolloClient({
link: authLink.concat(httpLink),
cache: new InMemoryCache(),
});

// this is what appears on screen when you run npm start
function App() {
return (

<ApolloProvider client={client}>
<>

<Header />
Expand All @@ -24,7 +47,9 @@ function App() {
</Routes>

</>

</ApolloProvider>



)}

Expand Down
75 changes: 57 additions & 18 deletions client/src/pages/create-account.js
View file
Original file line number Diff line number Diff line change
@@ -1,68 +1,107 @@
import React from 'react'
import React, {useState} from 'react'
import drunkBee from '../assets/images/drunkbee.png'
import signupPhoto from '../assets/images/signup.png'
import { Link } from 'react-router-dom';
import { useMutation } from '@apollo/client';
import { ADD_USER } from '../utils/mutations';

export default function Signup() {
function Signup() {


const [formState, setFormState] = useState({
username: '',
email: '',
password: '',
});
const [addUser] = useMutation(ADD_USER);

const handleChange = (event) => {
const { name, value } = event.target;

setFormState({
...formState,
[name]: value,
});
};

const handleFormSubmit = async (event) => {
event.preventDefault();
console.log(formState);

try {
const { data } = await addUser({
variables: { ...formState },
});

Auth.login(data.addUser.token);
} catch (e) {
console.error(e);
}
};


return (
<div class="create-account bg-yellow-200 container">
<div className="create-account bg-yellow-200 container">

<form>
<form onSubmit={handleFormSubmit}>
<br></br><br></br>
<img class ="mx-auto outline" src={drunkBee} alt="Drunk bee" width="300" height="350"/><br></br>
<div class="input-1 text-2xl font md:font-serif pl-7 pt-34 text-center font-bold">
<img className ="mx-auto outline" src={drunkBee} alt="Drunk bee" width="300" height="350"/><br></br>
<div className="input-1 text-2xl font md:font-serif pl-7 pt-34 text-center font-bold">
<label>
First Name:
<input class ="bg-black text-white pl-7"type="text" name="name" placeholder="" />
<input className ="bg-black text-white pl-7"type="text" name="name" placeholder="" />
</label>
</div>

<br></br><br></br>
<div class="input-2 text-2xl md:font-serif pl-7 text-center font-bold">
<div className="input-2 text-2xl md:font-serif pl-7 text-center font-bold">


<label>
Last Name:
<input class ="bg-black text-white" type="text" name="name" placeholder="" />
<input className ="bg-black text-white" type="text" name="name" placeholder="" />
</label>
</div>

<br></br><br></br>

<div class="input-3 text-2xl md:font-serif pl-7 text-center font-bold">
<div className="input-3 text-2xl md:font-serif pl-7 text-center font-bold">

<label>
Email:
<input class ="bg-black text-white" type="text" name="name" placeholder="" />
<input onChange={handleChange} className ="bg-black text-white" type="text" name="name" placeholder="" />
</label>
</div>

<br></br><br></br>

<div class="input-4 text-2xl md:font-serif pl-7 text-center font-bold">
<div className="input-4 text-2xl md:font-serif pl-7 text-center font-bold">

<label>
Password:
<input class ="bg-black text-white" type="text" name="name" placeholder="" />
<input onChange={handleChange} className ="bg-black text-white" type="text" name="name" placeholder="" />
</label>
</div>

<br></br><br></br>

<div class="input-5 text-2xl md:font-serif pl-7 text-center font-bold">
<div className="input-5 text-2xl md:font-serif pl-7 text-center font-bold">

<label>
Confirm Password:
<input class ="bg-black text-white" type="text" name="name" placeholder="" />
<input onChange={handleChange} className ="bg-black text-white" type="text" name="name" placeholder="" />
</label>
</div>

<br></br><br></br>

</form>
<div class="log-in text-3xl md:font-serif pb-24 underline animate-pulse text-center font-bold">
<button class="button text-2xl md:font-serif text-center" type="button"><Link to="/pages/comment">Click here to submit!</Link></button>

<div className="log-in text-3xl md:font-serif pb-24 underline animate-pulse text-center font-bold">
<button className="button text-2xl md:font-serif text-center" type="submit"><Link to="/pages/comment">Click here to submit!</Link></button>

</div>
</form>
</div>
)
}
export default Signup

0 comments on commit 4a51b9d

Please sign in to comment.