Having the rick power!!! Pt.4
Tags: react, webdev, graphql, javascript
Published: 2021-08-09 17:06:55

WOWOWOWOWWO a lot of time since I posted!!!! Well... 4 days or so...???

Don't know, but lets continue, I want to finish, I think this is going to be the last one. Or I'll try to make it the last one at least hahahahaha

First thing is first, we need to do a little of recap, we did some routes, make some Apollo magic in the home page, so we have 5 random characters, also we have an ugly Errors page :)

So, to finish we have to do:
- Search to work
- Button "more info" working

Don't know how I am gonna make this with apollo, 💩💩💩💩💩💩 (or maybe I know)

Maybe we'll use `useContext` because I want the results of the search bar in the `cardContainer`.

## Table of Contents
1. [npm start](#npm-start)
  1. [Fixing errors](#fixing)
2. [Continuing with Apollo](#cont-apollo)
  1. [Show more button](#show-more)
3. [Styling](#styling)
4. [Uploading...](#upload)

<img width="100%" style="width:100%" src="https://media.giphy.com/media/cdNSp4L5vCU7aQrYnV/giphy.gif" />

## npm start <a name="npm-start"></a>

First thing we do... it 🤯🤯🤯🤯🤯 yeppp
why? Because my computer decided to shut down before. So the changes were not fixed....

### » Fixing errors <a name="fixing"></a>

15 minutes later and realizing that we don't want `useContext` because we don't want to share the global variable to be displayed (rendered) in another element. That's why we don't use `useContext`, and that is why we want to pass the value as a prop, from one child to the other child, we do this using the "Father" element as a "Controller" of the value we want to pass.

So first is first, we prepare the "father" element which is `Home`, we make it use `useState`, this way we can keep track and update the value easily.

```jsx
// Home.jsx

const [t, setT] = useState('');

const callBack (n) => setT(n);

//....

return (
  <P callback={callBack} />
  <O value={t} />
);
```

Now we know that the element that changes the value of the element is `Search` which modifies the value when the we submit or click the icon. This way we pass the prop `callBack` which uses the function from the useState, `setT`.

```jsx
const P = ({ callBack }) => {
  // to keep track of the value from the input, when changed
  const [text, setText] = useState();
  return (
    <div>
      <input
        onChange={e => setText(e.target.value)}
        type="text"
        value={text}
        placeholder="Use power to search..."
      />
      <button
        onClick={() => callBack(text)}
      >
        Click
      </button>
    </div>
  );
};
```

This way we have the new value when the button is pressed.

Next and last step is to pass the value to the one which is going to use it for the query. So that we can search a character by Name.

In this example we are not going to use it to query something, we are going to use it to display, is just an example.
```jsx
const O = ({ value }) => {
  return (
    <h1>{value}</h1>
  );
};
```

And that is everything, I think you have understand why we do this and why we don't use `useContext`. If you haven't understand it well, I'll update the post!!! So comment!!!

## Continuing with Apollo <a name="cont-apollo"></a>

Apollo....
<img width="100%" style="width:100%" src="https://media.giphy.com/media/69mUSKBujnpgmxcqlg/giphy.gif" />

YUHUUUUUUU!! I love Apollo hahahhaha, I mean... is very easy and super powerful!!!

In the component `cardContainer`, we mostly use Apollo, so we are going to change the place of `ApolloProvider` just to wrap `CardContainer`, because nothing inside `Home.jsx` is going to use Apollo as well, so there is no need to have it to wrap everything.

<img width="100%" style="width:100%" src="https://media.giphy.com/media/26u4lOMA8JKSnL9Uk/giphy.gif" />

We had some errors in the queries we saved in `queries.js`, those who use the variables, so the correct way to use variables inside a query with Apollo is this:
```js
const getCharactersByName = gql`
  query getCharactersByName($charName: String!) {
    characters(filter: { name: $charName }) {
      results {
        id
      }
    }
  }
`;
```

with the variable name inside the query of the name, as an argument.

So then, when we use it in the `cardContainer`, we use Apollo to request the query, we use the `hook` provided by the library called `useQuery`. It has multiple parameters, the one that is required, the query we can also add options like "variables", "onError", "pollInterval" that fetches each time (the one you specify) the query and much more!!!

What we want from the return are some states like `loading, error and data`, this way we can display components depending on the state we have.

An example with the query above:
```jsx
Query = useQuery(query, {
  variables: { charName: 'Rick' },
});
```

### » "Show more" button <a href name="show-more"></a>

I am no sure how I want to do this one, because I thought about:
- creating a new window
- a pop up
- a route

I think I am going to do the 3rd one, because this way is easier, I just send the id of the character when the button is pressed. 

PRESS THE BUTTTONNNN!!!!!
<img width="100%" style="width:100%" src="https://media.giphy.com/media/gKr21u11F3hyRyJHqa/giphy.gif" />

Now lets continue

For this we call `react-router-dom` again, and we create a route which accepts a parameter, which we are going to get in the component who will fetch the data using a query.

To create the route, is like when using [express](https://expressjs.com/es/)
```jsx
// import CharInfo

// <Switch>
     <Route path="/charInfo/:id" Component={CharInfo} />
// </Switch>
```

This is everything, now using in `CharInfo` a hook provided from `react-router-dom` called `useParams`.

This way we can intercept that param and fetch the data with apollo.

```jsx
const CharInfo = () => {
  let { id } = useParams();
  return (
    <div>
      {id}
    </div>
  );
}

```

Now we are going to use the hook from `Apollo` to use the query and the `id` and fetch the data to display it.

```jsx
const { loading, error, data } = useQuery(getFullDataByID, { 
  variables: { id },
  client: Client
});
```
Instead of using the `ApolloProvider`, we use the option from the hook `client`, why we do it like this?
1. We don't have a root for the component `CharInfo` because is a component for a Route. So we cannot use "ApolloProvider"
2. I am not going to create a "root" component for that component, when I have the option of using that paramenter.

Once we got this, we have everything!!! Now we just need to make CSS, which I'll do later (but you will see them in this post UwU)

Before styling... I got an error while doing the basic web of the information from the character, and I got an "Internal Server Error" which was very weird (BTW I wasted like 15min with this error until I figured it out) and It all was because sometimes an attribute called "origin" was null, so this was causing all that error, which was not returning the data.... (Summary: An error in the Back)
Now I have removed that prop, so that I get no error.

[I am going to sleep, I am very tired... so... continue reading ;) and be happy!!]

## Styling!! <a href name="styling"></a>

Omg... this is going to be tough... F*
I hate starting, but when I have everything as I want, is like "OH MY GOOOOOODDDD, I LOVE IITTTT", then someone just come and says "What a F* shit, is that supposed to responsive?" :_(

Don't hate okey?¿?¿? UwU
Let's be loved and love :D

Now, continuing with styling... I am not going to do another GIMP, sorry but don't feel like doing another :(

BUTTTT I am going to use the FIREFOX TOOLSSSS TO MAKE THE CSS AND THEN CONVERT IT INTO TAILWINDCSS CLASSES!!!! OHHHHH YEAHHH BBYYYYY. Does that make any sense?? Don't think so... but I go fast as a fart like this 😎.
(Why a fart? IDK, why not?)

<img width="100%" style="width:100%" src="https://media.giphy.com/media/du6kQYcgBQE2t9wR3p/giphy.gif" />

I just want to show you what I have to deal with:
![Mobile progress](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/vk8ah04n6yu0vz3ihhgm.png)

Have you seen that vertical bar??? :') I think I am going to... have a good fun :')

As I said, no GIMP, I am lazzy, but I'll write what I want to do, this way you know what is in my mind :O

We have 3 sections
1. Main part, fundamental information for the character:
    - name
    - status
    - species
    - type
    - gender
    - image
    - created

2. Episodes section, these are Episodes where the character has been.
    - id
    - name
    - air_date
    - episode
    - created

Of course is an Array, so we are going to create a new component `Episode` to have everything better for my health :')

3. Location part, here we have information about
    - id
    - name
    - type
    - dimension
    - residents
    - created
  
  Here we have a subsection, "residents", which is an Array 
  of other characters, I am going to do it a single row with 
  horizontal scroll (What do you think?? DON'T TELL ME!!! Is 
  a great idea, I know, you know, we don't really know xd) 
  Sometimes there are a lot of residents, so this might be a 
  problem, but as it renders like "fast and furious", is 
  going to be every single character of the array rendered :)
  Also, we are going to _reuse_ the `Card` component.

## Uploading... <a href name="upload"></a>

We can upload a react project to GitHub Pages. Using the module `gh-pages`, we install it doing:
`npm install --save-dev gh-pages`

With it, we can upload it, so you can go and try it [here](https://blitty-codes.github.io/rick-power/)

---

Tell me what else you want to learn, I'll make a series of it :D

I want to learn more things!!!

---

## Follow me or contact!
(I liked more the red bird :_()
🐦 [Twitter](https://twitter.com/blit12_)
🐙 [GitHub](https://github.com/blitty-codes)
👥 [LinkdIn](https://www.linkedin.com/in/blitty/)

---