Spotify Chrome Extension: Music Controller | Phase 3
Tags: react, javascript, webdev
Published: 2020-12-03 00:36:20

### <center>Spotify Chrome Extension - Defining our State</center>

------------

### <center>This is Phase Three of a multi-phase project where we build a Spotify Chrome Extension powered by ReactJS that allows us to control the user's Spotify session</center>

### <center>Phase One can be found [here](https://dev.to/anobjectisa/spotify-chrome-extension-music-controller-phase-1-iki "here").</center>

------------

#### <center>This tutorial assumes you know how Google Chrome Extensions work. Learn more [here](https://anobjectisa.com/?p=11 "here").</center>

------------

### Let's start with the state of this whole app.

#### We're going to handle state in 2 ways:
1. a context or "global" state
2. prop-passing

#### We'll handle the state in our 'Foreground' constructor first.
![Foreground component state](https://user-images.githubusercontent.com/58220766/100555212-ecc0a300-3267-11eb-9649-953944017133.png)

**Note:**
1. **Decks** and **Cassettes** come from a separate **images_ledger.js** file.
2. **loaded** is used to make sure the entire app is loaded before displaying
3. **shouldResize** is used to make the app **responsive**
4. **isClosed**, **isPlaying**, **newTrack**, **current_track**, and **current_deck** are all used for the actual visuals of our cassette player
5. **load** and **direction** are both used for the **Options.js** component; **Foreground.js** doesn't need these, but we leave them here anyways
6. **container.main/width/height** are all used for **responsive** coding

------------

#### Let me quickly explain the images ledger.
This is how we're organizing our inventory of gifs.

```
export const decks = {
    'orange': {
        default: 'default-deck(orange).gif',
        '70s-retro-light': {
            play: 'play-deck(orange)-cassette(70s-retro-light).gif',
            pause: 'pause-deck(orange)-cassette(70s-retro-light).gif',
            load: 'load-deck(orange)-cassette(70s-retro-light).gif'
        },
        'punk-dark': {
            play: 'play-deck(orange)-cassette(punk-dark).gif',
            pause: 'pause-deck(orange)-cassette(punk-dark).gif',
            load: 'load-deck(orange)-cassette(punk-dark).gif'
        }
    },
    'cyberpunk': {
        default: 'default-deck(cyberpunk).gif',
        '70s-retro-light': {
            play: 'play-deck(cyberpunk)-cassette(70s-retro-light).gif',
            pause: 'pause-deck(cyberpunk)-cassette(70s-retro-light).gif',
            load: 'load-deck(cyberpunk)-cassette(70s-retro-light).gif'
        },
        'punk-dark': {
            play: 'play-deck(cyberpunk)-cassette(punk-dark).gif',
            pause: 'pause-deck(cyberpunk)-cassette(punk-dark).gif',
            load: 'load-deck(cyberpunk)-cassette(punk-dark).gif'
        }
    }
}

export const cassettes = [
    'punk-dark',
    '70s-retro-light'
]
```

**Note:**
Every type of **deck** has a **default image** and it's corresponding **cassette gifs** have **three** states: **play**, **pause**, and **load**.

------------

#### Let's set up a global context.
Very simple.

We just create a new file and export a **context**...

```
import React from 'react';

const MyContext = React.createContext();

export default MyContext;
```

...then wrap our entire app in that **context**...
![Using React Context for Global State](https://user-images.githubusercontent.com/58220766/100555543-3dd19680-326a-11eb-9cef-91632765a7bf.png)

------------

### Our state is set up.

If you want to see how we use this state throughout our React-Chrome Extension to:
* make our app responsive
* have our **ticker** display a song name
* have our **player** display specific gifs
then please watch the *video tutorial* at the bottom of this write-up.

You can find the source files for this Phase [here](https://github.com/an-object-is-a/project-1-spotify-controller-phase3 "here").

------------

#### <center>If you want a more in-depth guide, check out my full video tutorial on YouTube, **[An Object Is A](https://www.youtube.com/c/anobjectisa "An Object Is A")**.</center>

### <center>Build a Cyberpunk 2077-inspired Spotify Controller - Phase 3</center>

{% youtube Qjo4as3iPHE %}