-
The various
import
statements are:import { pool } from './database.js' import GitHubStrategy from 'passport-github2'
-
The
options
should be:const options = { clientID: process.env.GITHUB_CLIENT_ID, clientSecret: process.env.GITHUB_CLIENT_SECRET }
-
When registering for the Oauth app on Github, use the following information:
- Application Name:
codepath-onthefly-development
- Homepage URL:
http://localhost:3000
- Authorization callback URL:
http://localhost:3001/auth/github/callback
- Application Name:
-
name
is not required when extracting the user's profile information from theprofile
argumentconst { _json: { id, name, login, avatar_url } } = profile
should be:
const { _json: { id, login, avatar_url } } = profile
-
You need to use backticks ` instead of single quotes ' in the
INSERT INTO users
SQL statement
-
When updating the
cors
middleware, use port3000
, not5173
app.use(cors({ origin: 'http://localhost:3000', methods: 'GET,POST,PUT,DELETE,PATCH', credentials: true }))
-
Additionally, update the
/
route s follows:app.get('/', (req, res) => { res.redirect('http://localhost:3000') })
-
At the end of
server/routes/auth.js
, export the router as default:export default router
-
Ignore the part about
createUsersTableQuery
,createUsersTripsTableQuery
, and usingpool.query
-
Instead, put the following in
server/config/reset.js
:const createUsersTripsTable = async () => { const createUsersTripsTableQuery = ` CREATE TABLE IF NOT EXISTS users_trips ( id serial PRIMARY KEY, trip_id int NOT NULL, username text NOT NULL, FOREIGN KEY (trip_id) REFERENCES trips(id) ); ` try { const res = await pool.query(createUsersTripsTableQuery) console.log('🎉 users_trips table created successfully') } catch (err) { console.error('⚠️ error creating users_trips table', err) } }
-
and call the function at the bottom of
server/config/reset.js
:createUsersTripsTable()
-
-
After creating the three functions
createTripUser()
,getTripUsers()
, andgetUserTrips()
inserver/controllers/users_trips.js
, be sure to export them:export default { createTripUser, getTripUsers, getUserTrips }
-
Import these into
server/routes/users_trips.js
with:import UsersTripsController from '../controllers/users_trips.js'
-
Then, create the individual routes as such:
router.post('/create/:trip_id', UsersTripsController.createTripUser) router.get('/users/:trip_id', UsersTripsController.getTripUsers) router.get('/trips/:username', UsersTripsController.getUserTrips)
-
Also add
api_url={API_URL}
to the instantiation of the<ReadDestinations>
component-
Inside the
ReadDestinations
component you will need:const response = await fetch(`${props.api_url}/api/destinations`)
-
-
In
client/src/pages/AddToTrip.js
, simply pass theapi_url
prop along to the instantiation of the<AddTripOptionCard>
component like so:<AddTripOptionCard key={trip.id} ... other stuff ... api_url={props.api_url} />
-
And in
client/src/components/AddTripOptionCard.js
update thefetch()
call as usual:await fetch(`${props.api_url}/api/trips-destinations`, options)
-
-
Be sure to update all the
fetch()
calls inCreateTrip.js
,EditTrip.js
,TripDetails.js
,CreateDestination.js
, andCreateActivity.js
-
For the
client/src/pages/Login.js
component, it's not necessary to importReact
andLink
anymore
-
The function calls at the end of the
useEffect
hook forApp.js
should be:getUser() fetchTrips()
-
Be sure to import the
Login
component at the top ofApp.js
:import Login from './pages/Login'
-
Comment out for now the additional route to
<AddUserToTrip>
, since we haven't written that component yet!
-
Add
alt='avatar'
to the<img>
tag inAvatar.js
to avoid warnings -
Be sure to import the
Avatar
component at the top ofApp.js
:import Login from './components/Avatar'
- After finishing all of Step 9, the
AddUserToTrip
component is now writen, so update the following inApp.js
:-
Add the import statement
import AddUserToTrip from './pages/AddUserToTrip'
-
Uncomment the route to
<AddUserToTrip>
-
Use the following for the route:
{ path: '/users/add/:trip_id', element: user && user.id ? <AddUserToTrip user={user} api_url={API_URL} /> : <Login api_url={API_URL} /> },
-
-
For the
<div className='travelers'>
div, thestyle
tag is incorrect. It should be:<p key={index} style={{ textAlign: 'center', lineHeight: 0, paddingTop: 20 }}> {traveler.username} </p>
-
The
trip
state is inclient/src/pages/CreateTrip.js
-
Be sure to destructure the
user
from the props:const CreateTrip = ({user, api_url}) => {
-
Then instead of:
const [trip, setTrip] = useState({ id: 0, //... more key/values ... username: props.user.username })
use:
const [trip, setTrip] = useState({ id: 0, //... more key/values ... username: user.username })
-
-
In the
tripUser
,user_removal
portion where you are adding additional SQL queries, be sure to use backticks ` instead of single ticks '