Skip to content
Open
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension


Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
59 changes: 37 additions & 22 deletions README.md
Original file line number Diff line number Diff line change
Expand Up @@ -16,12 +16,12 @@ In this project you'll take this crypto currency tracker app and build two custo

## Project Set Up

- [ ] Create a forked copy of this project.
- [ ] Clone your OWN version of the repository in your terminal
- [ ] CD into the project base directory `cd dark-mode`
- [ ] Download project dependencies by running `npm install`
- [ ] Start up the app using `npm start`
- [ ] Create a new branch: git checkout -b `<firstName-lastName>`.
- [x] Create a forked copy of this project.
- [x] Clone your OWN version of the repository in your terminal
- [x] CD into the project base directory `cd dark-mode`
- [x] Download project dependencies by running `npm install`
- [x] Start up the app using `npm start`
- [x] Create a new branch: git checkout -b `<firstName-lastName>`.
- [ ] Implement the project on your newly created `<firstName-lastName>` branch, committing changes regularly.
- [ ] Push commits: git push origin `<firstName-lastName>`.

Expand All @@ -43,12 +43,18 @@ Open your app and take a look around. The crypto currency data is being fetched

This is going to be a pretty cool hook. It will be used pretty much the same way as `useState`, but with a key and value passed into it - ie `const [name, setName] = useLocalStorage('name', 'Dustin')`. You can use `setName` to update the value of `name` on localStorage! Pretty cool, huh? Let's get to it!

- Create a new directory called `hooks`, and a new file in it called `useLocalStorage`.
- Build a function called `useLocalStorage`. Now, to set something to localStorage, we need a key (must be a string) and a value (can be anything). To retrieve something from localStorage, we need the key. To update something in localStorage, you use the same method as adding something new, and it will just replace the old key/value pair in localStorage. Knowing this, let's add `key` and `initialValue` as parameters to the hook.
- We're going to set up some state here. Set up a state property called storedValue.
- This state property is going to take a function as it's initial value. When we do this, whatever that callback function returns is what gets set as the intialValue for the state property.
- In the callback function, we'll check to see if the item we passed in already exists in localStorage, and return that value, otherwise we'll return whatever initialValue was passed in.
- Quick note, if you pass in arrays or objects to localStorage, you will need to parse it into JSON. Then when you retrieve it, like we do below, you'll need to parse it back into regular JavaScript
- Create a new directory called `hooks`, and a new file in it called `useLocalStorage`. -OK

- Build a function called `useLocalStorage`. Now, to set something to localStorage, we need a key (must be a string) and a value (can be anything). To retrieve something from localStorage, we need the key. To update something in localStorage, you use the same method as adding something new, and it will just replace the old key/value pair in localStorage. Knowing this, let's add `key` and `initialValue` as parameters to the hook. - OK

- We're going to set up some state here. Set up a state property called storedValue. - OK

- This state property is going to take a function as it's initial value. When we do this, whatever that callback function returns is what gets set as the intialValue for the state property. -OK

- In the callback function, we'll check to see if the item we passed in already exists in localStorage, and return that value, otherwise we'll return whatever initialValue was passed in.


- Quick note, if you pass in arrays or objects to localStorage, you will need to parse it into JSON. Then when you retrieve it, like we do below, you'll need to parse it back into regular JavaScript

```js
// To retrieve an item from localStorage, call localStorage.getItem('itemName')
Expand Down Expand Up @@ -76,11 +82,15 @@ export const useLocalStorage = (key, initialValue) => {
};
```

- Remember we're trying to use this hook like this: `const [name, setName] = useLocalStorage('name', 'Dustin')`. So far we have made the value part of the hook, but not the setter. Let's go ahead and create a setter function, and return that in the array as well.
- inside the hook, write a function called `setValue` that takes a `value` parameter
- In `setValue`, set the `value` to localStorage using the `key` that was passed into the hook itself
- Also, update the state of `storedValue` with `value` as well
- Add `setValue` to the array that is being returned out of this hook
- Remember we're trying to use this hook like this: `const [name, setName] = useLocalStorage('name', 'Dustin')`. So far we have made the value part of the hook, but not the setter. Let's go ahead and create a setter function, and return that in the array as well. -ok
- inside the hook, write a function called `setValue` that takes a `value` parameter - ok

- In `setValue`, set the `value` to localStorage using the `key` that was passed into the hook itself -OK

- Also, update the state of `storedValue` with `value` as well - OK

- Add `setValue` to the array that is being returned out of this hook - Ok

- `setValue` should look something like this:

```js
Expand All @@ -96,11 +106,15 @@ We're going to use this inside our dark mode hook, but this can be used anywhere

## STEP 2 - useDarkMode

- Inside the `hooks` directory, add a new file called `useDarkMode`.
- Build a function called `useDarkMode`.
- Import `useLocalStorage`
- Call `useLocalStorage` and pass in the key you want to use to store to indicate whether or not dark mode is enabled. Remember, this hook returns an array with a value and a setter in an array, exactly like the state hook, so make sure to capture those values in a `const` - `const [someValue, setSomeValue] = useLocalStorage('your key here')`
- Finally, we need to return something out of `useDarkMode`, so we can use this in our app. What do you think we'll need? We'll need to know if dark mode is enabled, right? And we'll need a setter function to toggle dark mode. Let's just forward the value and the setter that were returned out of the `useLocalStorage` call. Return those two values in an array as well.
- Inside the `hooks` directory, add a new file called `useDarkMode`. - OK

- Build a function called `useDarkMode`. -OK

- Import `useLocalStorage` - OK

- Call `useLocalStorage` and pass in the key you want to use to store to indicate whether or not dark mode is enabled. Remember, this hook returns an array with a value and a setter in an array, exactly like the state hook, so make sure to capture those values in a `const` - `const [someValue, setSomeValue] = useLocalStorage('your key here')` -OK

- Finally, we need to return something out of `useDarkMode`, so we can use this in our app. What do you think we'll need? We'll need to know if dark mode is enabled, right? And we'll need a setter function to toggle dark mode. Let's just forward the value and the setter that were returned out of the `useLocalStorage` call. Return those two values in an array as well. -OK

_In this case `useDarkMode` isn't doing any of it's own logic, just simply composing `useLocalStorage` inside it and passing those values back to the component. There are other things we **could** do here to extend even more logic. If you want to try that after you're finished, check out the first stretch goal 👍_

Expand All @@ -109,6 +123,7 @@ _In this case `useDarkMode` isn't doing any of it's own logic, just simply compo
Now that we have composed our different pieces of stateful logic, let's use it in our component!

- import the dark mode hook into the `App` component

- Looking at this component, we see that we are controlling the toggle with some state. The state hook here returns a `darkMode` value, and a `setDarkMode` function. Isn't that exactly what our `useDarkMode` hook returns as well? Replace the state hook with our hook, click the toggle, and watch the magic happen!!!

(If it wasn't magical, you have a bug somewhere 😫 go back through the steps slowly, one at a time, to see if you missed any of the steps)
Expand Down
Loading