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
npm start
First thing we do... it 🤯🤯🤯🤯🤯 yeppp
why? Because my computer decided to shut down before. So the changes were not fixed....
» Fixing errors
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.
// 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.
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.
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
Apollo....
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.
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:
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:
Query = useQuery(query, {
variables: { charName: 'Rick' },
});
» "Show more" button
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!!!!!
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
// 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.
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.
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?
- We don't have a root for the component
CharInfobecause is a component for a Route. So we cannot use "ApolloProvider" - 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!!
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?)
I just want to show you what I have to deal with:
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
-
Main part, fundamental information for the character:
- name
- status
- species
- type
- gender
- image
- created
-
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 :')
- 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...
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
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
🐙 GitHub
👥 LinkdIn
Top comments (0)