⟱ first thing you see '/'
I did this project on an up-to-date world wide currency converter with a side choice of a past currency converter that lets you convert currency from as far back as 2010. I used and outside API for the info and saved all the user interaction to my rails backend.
⟸ code snippet
'/' page notice im bringing in state thru the connect method that I import from 'react redux'and using an if statement to show the username of the logged in user if the user state exists..⟱ Welcome page after signing in..
⟸ '/signin'
⟸ code snippet
'/signin'so lets get a bit into detail about what this code does..the first line imports React from "react"can't have a react app without react right..? lolsecond line
{connect} -> is a way to connect your component to the store store is where you're global state lives..not only that.. but connect also allows you to make dispatch actions
at the very bottom of the code you'll see connect againbut this time its taking in two arguments and also takes in our component as a third..export default connect(null, mapDispatchToProps)(signin)the first arg "null" -> is passed in the gobal state (is currently null since we don't need the global state to sign in)the second arg "mapDispatchToProps" -> is passed a dispatch as an arg.notice our mapDispatchToProps = (dispatch) => arrow function that takes in dispatch as an arg..?in the return {we are creating a props for our component to use.}in the handleSubmit() function we are passing in this.props.createSession(this.state) that takes in the local state as its arg and dispatches it to the action local state hold the users inputsquick explanation on global vs local state -> their name gives it away but local state belongs to the component it is in and the global state belongs to all the components.which takes us to our third line of code.. ⟱import {createSession} from '../actions/userActions
⟸ here we are calling our rails backendfetch("http://localhost:3001/login
and passing in the username and
password -> (userData)
if you’re not a member you can sign up…
after you sign up your information is sent to the back end and saved.
Now you can imagine how that happens pretty much the same as the sign in expect the back end is creating a user not finding one.
i don’t want to get to into detail about the user authentication process but if you want to know more about how its done one of my classmates did a blog walkthrough on it.
here is the link:
https://medium.com/swlh/dealing-with-redux-user-authentication-flatirons-final-hurdle-cbf2d7638d1f
⟸ rails backend snippet after the user sign's up.after the sign in process is done the first page we’ll see is still the Welcome expect and i posted this earlier it has your User name. I did this to show that you’re logged in and the App knows who you are
up top you’ll see the nav bar change also. lets take a look at how that happened.
i did an if statement on what shows up in the nav bar..
lets click into the present currency converter
⟸ there is a select options you can choose through choose the currency of your liking and input the amount you want to convert and click submit...
⟸ after submit is clicked⟸ here you get your result⟱let look at the code for the the above image
⟸ <form></form>onSubmit is called and passed and passed handleSubmit() ⟸ From: takes the value of the state (userCurrency)has a onChange= that is passed handleChange()and has a name⟸ To: same as from except as its own value and name⟸ Amount:
same as To & From with its own value.⟰ {array} is coming in from logic done in the render() look at next image.
⟸imports connect method from react-redux.⟸ class CurrencyInput name of the class ⟸ imports dispatch actions from the fetchCurrencies file located in the actions folder.⟸ state is local and holds the value of the inputs values from our form ⟸ handleChange()
changes the value of state to whatever the user inputs into the form⟸ handleSubmit()
makes sure the page doesn't refresh (event.preventDefault()) and passes in the state to the dispatch action {convertCurrencies}⟸ this.setState resets the state to empty input fields after the process is done.⟰ render()
doing some mapping to get the individual currencies..if you're wondering where this.props.currency came from look at next image.then doing an if statement to separate the keys (the object coming in was so deeply rooted it took some extra logic to get the info i need to display the converted currency)
⟸ this is where our state is coming in..⟸ in the return this.props.currency is created.. and holds the value of the currency state. were also bringing the user state.⟰ connect is bringing passing state to mapStateToProps
and dispatch to all the actions passed in the second arg.notice we didn't call mapDispatchToProps... but called the action in curly braces as the second arg in our connect method.this is just a short and easier way of passing in dispatch actions and creating props for the component.
now let’s go into the fetchCurrencies file located in src/actions folder to get see what the convertCurrencies action is doing…
⟸ convertCurrencies(from, to, value, user_id) takes in 4 args that is passed in during the submit event in the CurrencyInput class.⟸ fetch(i used string interpolation to add the user input to fetch call to get convert the currency) ⟰ dispatch({type: "CONVERT_CURRENCIES", payload: data})
a dispatch is sent to the reducer with type holding the value of the dispatch and payload holding the value of the data.⟰ a second dispatch is called this dispatch is another action and its taking in the data coming in and the user_id as its arg.
(details on this later)let's go into our reducer.
⟸ currencyReducer (all the dispatch actions of the currency)⟸ index (combiner is located here that combines both reducers)⟰ userReducer ( all the dispatch actions of the user)
⟸ currencyReducer⟸ "COVERT_CURRENCIES" is called here and is adding all the converted currencies into an array created in the initialState currency: []i'm sure you can imagine what the rest of these cases are, where they come from and how they're used.now go into the rootReducer (src/reducers/index.js)
⟰ here were importing both reducers and importing the combineReducers method from "redux" and using it to combine both reducers..let's look at why this is important.
⟸ src/index.js⟸here we're importing our rootReducer then passing it as an arg in our createStorecreateStore is imported from redux and looks like this.function createStore() {
let state;function dispatch(action){
state = reducer(state, action);
render() } function getState() {
return state; } return{dispatch, getState }
}
so the create store takes in the rootReducer as its 1st arg then you see composeWithDevTools which is imported from 'react-devtools-extension" which lets us use the React-Dev tools making our lives easier.⟰ applyMiddleware lets us alter the actions behavior by letting us pass an asynchronous method thunk as its arg.- the allows us to return a function in the action function..
- and also we can do multiple dispatch calls inside of one action.⟰ <React.StrictMode> is sort of a helper component that will help you write better react components.⟰ <Provider store={store}> provides the store (createStore) to the <App/> component⟰ <App/> is then imported to our index.html displaying all of our currency converter APPwhew! lol
so of-course there is way more components, actions, but hopefully this gives a somewhat basic idea of what my app is doing… thank you for reading
⟸ snippet of src/ ⟸ also did my own css..
check out my app video walkthrough
https://www.youtube.com/watch?v=vLqkyoxfX5Ek bye :)
