From 5b47eec9c1e758ba6a4fdde3f3cc3e0b5ba49959 Mon Sep 17 00:00:00 2001 From: Albert Byrone Date: Fri, 3 Mar 2023 06:19:00 +0300 Subject: [PATCH 1/4] get planets --- src/components/planets/Planet.tsx | 171 +++++++++++++++++------------- src/views/Home.tsx | 4 +- 2 files changed, 98 insertions(+), 77 deletions(-) diff --git a/src/components/planets/Planet.tsx b/src/components/planets/Planet.tsx index d343a3e..ce08256 100644 --- a/src/components/planets/Planet.tsx +++ b/src/components/planets/Planet.tsx @@ -1,6 +1,68 @@ import React from "react"; -// import { Link } from "react-router-dom"; +import { Link } from "react-router-dom"; import { useNavigate } from "react-router-dom"; +import { gql } from '@apollo/client'; +import { useData } from "../../hooks/data/useData"; +import logo from "../../images/starwarslogo.png" +// import { useData } from "../hooks/data/useData"; +// const planets = [ +// { +// id: 1, +// title: "The Phantom Menace", +// image: "https://i.postimg.cc/0ybdytWT/download.jpg", +// description: +// "Star Warsis a space opera fran chise created by George Lucas that revolves around a group of rebels fighting against an evil empire. The franchise includes multiple films, books, comics", +// }, +// { +// id: 2, +// title: "The Phantom Menace", +// image: "https://i.postimg.cc/0ybdytWT/download.jpg", +// description: +// "Star Warsis a space opera fran chise created by George Lucas that revolves around a group of rebels fighting against an evil empire. The franchise includes multiple films, books, comics", +// }, +// { +// id: 3, +// title: "The Phantom Menace", +// image: "https://i.postimg.cc/0ybdytWT/download.jpg", +// description: +// "Star Warsis a space opera fran chise created by George Lucas that revolves around a group of rebels fighting against an evil empire. The franchise includes multiple films, books, comics", +// }, +// { +// id: 4, +// title: "The Phantom Menace", +// image: "https://i.postimg.cc/0ybdytWT/download.jpg", +// description: +// "Star Warsis a space opera fran chise created by George Lucas that revolves around a group of rebels fighting against an evil empire. The franchise includes multiple films, books, comics", +// }, +// { +// id: 5, +// title: "The Phantom Menace", +// image: "https://i.postimg.cc/0ybdytWT/download.jpg", +// description: +// "Star Warsis a space opera fran chise created by George Lucas that revolves around a group of rebels fighting against an evil empire. The franchise includes multiple films, books, comics", +// }, +// { +// id: 6, +// title: "The Phantom Menace", +// image: "https://i.postimg.cc/0ybdytWT/download.jpg", +// description: +// "Star Warsis a space opera fran chise created by George Lucas that revolves around a group of rebels fighting against an evil empire. The franchise includes multiple films, books, comics", +// }, +// { +// id: 7, +// title: "The Phantom Menace", +// image: "https://i.postimg.cc/0ybdytWT/download.jpg", +// description: +// "Star Warsis a space opera fran chise created by George Lucas that revolves around a group of rebels fighting against an evil empire. The franchise includes multiple films, books, comics", +// }, +// { +// id: 8, +// title: "The Phantom Menace", +// image: "https://i.postimg.cc/0ybdytWT/download.jpg", +// description: +// "Star Warsis a space opera fran chise created by George Lucas that revolves around a group of rebels fighting against an evil empire. The franchise includes multiple films, books, comics", +// }, +// ]; function Planet() { // const [openTab, setOpenTab] = React.useState(1); @@ -8,65 +70,23 @@ function Planet() { const banner = "https://lumiere-a.akamaihd.net/v1/images/aa-9-coruscant-freighter_a856053d.jpeg?region=92%2C0%2C1181%2C665"; - const planets = [ - { - id: 1, - title: "The Phantom Menace", - image: "https://i.postimg.cc/0ybdytWT/download.jpg", - description: - "Star Warsis a space opera fran chise created by George Lucas that revolves around a group of rebels fighting against an evil empire. The franchise includes multiple films, books, comics", - }, - { - id: 2, - title: "The Phantom Menace", - image: "https://i.postimg.cc/0ybdytWT/download.jpg", - description: - "Star Warsis a space opera fran chise created by George Lucas that revolves around a group of rebels fighting against an evil empire. The franchise includes multiple films, books, comics", - }, - { - id: 3, - title: "The Phantom Menace", - image: "https://i.postimg.cc/0ybdytWT/download.jpg", - description: - "Star Warsis a space opera fran chise created by George Lucas that revolves around a group of rebels fighting against an evil empire. The franchise includes multiple films, books, comics", - }, - { - id: 4, - title: "The Phantom Menace", - image: "https://i.postimg.cc/0ybdytWT/download.jpg", - description: - "Star Warsis a space opera fran chise created by George Lucas that revolves around a group of rebels fighting against an evil empire. The franchise includes multiple films, books, comics", - }, - { - id: 5, - title: "The Phantom Menace", - image: "https://i.postimg.cc/0ybdytWT/download.jpg", - description: - "Star Warsis a space opera fran chise created by George Lucas that revolves around a group of rebels fighting against an evil empire. The franchise includes multiple films, books, comics", - }, - { - id: 6, - title: "The Phantom Menace", - image: "https://i.postimg.cc/0ybdytWT/download.jpg", - description: - "Star Warsis a space opera fran chise created by George Lucas that revolves around a group of rebels fighting against an evil empire. The franchise includes multiple films, books, comics", - }, - { - id: 7, - title: "The Phantom Menace", - image: "https://i.postimg.cc/0ybdytWT/download.jpg", - description: - "Star Warsis a space opera fran chise created by George Lucas that revolves around a group of rebels fighting against an evil empire. The franchise includes multiple films, books, comics", - }, - { - id: 8, - title: "The Phantom Menace", - image: "https://i.postimg.cc/0ybdytWT/download.jpg", - description: - "Star Warsis a space opera fran chise created by George Lucas that revolves around a group of rebels fighting against an evil empire. The franchise includes multiple films, books, comics", - }, - ]; + const { loading, error, data } = useData(gql` query GetPlanets { + allPlanets { + planets { + id + name + population + orbitalPeriod + } + } + }`, {}) + if (loading) return

Loading...

; + if (error) return

Error : {error.message}

; + + const planets = data.allPlanets.planets + + // console.log("=====================--==",); const handleSubmit = (item: any) => { navigate(`/character/${item.id}`); }; @@ -75,7 +95,7 @@ function Planet() { <>
-
+
-
+
{planets.map((character) => ( -
- {""} -

- {character.title} -

- +
+ {''} +
+

+ {character.name} +

+

+ Lorem ipsum dolor sit amet consectetur adipisicing elit. Repudiandae architecto est deserunt minus necessitatibus animi deleniti veritatis earum expedita doloremque iusto vitae exercitationem saepe nobis temporibus modi, nostrum veniam fuga. +

+ + SHIP DETAILS + +
))}
diff --git a/src/views/Home.tsx b/src/views/Home.tsx index 6374554..ecebf9e 100644 --- a/src/views/Home.tsx +++ b/src/views/Home.tsx @@ -37,8 +37,8 @@ const films = [ ]; function Home() { - const navigate = useNavigate(); - if (!getUser()) navigate("/login"); + // const navigate = useNavigate(); + // if (!getUser()) navigate("/login"); const banner = 'https://lumiere-a.akamaihd.net/v1/images/aa-9-coruscant-freighter_a856053d.jpeg?region=92%2C0%2C1181%2C665' From 31c25f3c01e5b724325e8f5e4e7ebc904f7e8bbd Mon Sep 17 00:00:00 2001 From: Albert Byrone Date: Fri, 3 Mar 2023 06:52:40 +0300 Subject: [PATCH 2/4] get planet data and details --- src/components/AppError.tsx | 4 +- src/components/AppLoader.tsx | 8 +-- src/components/planets/Planet.tsx | 42 +++++++----- src/components/planets/PlanetDetails.tsx | 84 +++++++++++++++++------- src/utils/starwarimages.ts | 10 +++ 5 files changed, 103 insertions(+), 45 deletions(-) diff --git a/src/components/AppError.tsx b/src/components/AppError.tsx index b1649bb..2902b64 100644 --- a/src/components/AppError.tsx +++ b/src/components/AppError.tsx @@ -1,6 +1,6 @@ -export const AppError = ({message}) => { +export const AppError = ({ message }) => { return ( -
+

Something Went wrong!

{message}

diff --git a/src/components/AppLoader.tsx b/src/components/AppLoader.tsx index e06dde6..eb886f2 100644 --- a/src/components/AppLoader.tsx +++ b/src/components/AppLoader.tsx @@ -1,14 +1,14 @@ export const AppLoader = () => { - return( + return (
Loading...
diff --git a/src/components/planets/Planet.tsx b/src/components/planets/Planet.tsx index ce08256..08d2879 100644 --- a/src/components/planets/Planet.tsx +++ b/src/components/planets/Planet.tsx @@ -4,6 +4,9 @@ import { useNavigate } from "react-router-dom"; import { gql } from '@apollo/client'; import { useData } from "../../hooks/data/useData"; import logo from "../../images/starwarslogo.png" +import { planetInfo } from "../../utils/starwarimages"; +import { AppLoader } from "../AppLoader"; +import { AppError } from "../AppError"; // import { useData } from "../hooks/data/useData"; // const planets = [ // { @@ -90,6 +93,7 @@ function Planet() { const handleSubmit = (item: any) => { navigate(`/character/${item.id}`); }; + const formatDesc = (input): string => `${input.slice(0, 150)} ...` return ( <> @@ -131,24 +135,28 @@ function Planet() {
- {planets.map((character) => ( -
- {''} -
-

- {character.name} -

-

- Lorem ipsum dolor sit amet consectetur adipisicing elit. Repudiandae architecto est deserunt minus necessitatibus animi deleniti veritatis earum expedita doloremque iusto vitae exercitationem saepe nobis temporibus modi, nostrum veniam fuga. -

- - SHIP DETAILS - + {planets.map((character) => { + const planetData = planetInfo() + return ( + +
+ {''} +
+

+ {character.name} +

+

+ {formatDesc(planetData.planetDesc)} +

+ + PLANET DETAILS + +
-
- ))} + ) + })}
diff --git a/src/components/planets/PlanetDetails.tsx b/src/components/planets/PlanetDetails.tsx index 496dd46..5dfeb38 100644 --- a/src/components/planets/PlanetDetails.tsx +++ b/src/components/planets/PlanetDetails.tsx @@ -1,34 +1,74 @@ import React from 'react' +import { useParams } from "react-router-dom"; +import { useData } from "../../hooks/data/useData"; +import { gql } from "@apollo/client"; +import { AppLoader } from "../AppLoader"; +import { AppError } from "../AppError"; +import { planetInfo } from "../../utils/starwarimages"; + function PlanetDetails() { + const { id } = useParams() + const { loading, error, data } = useData( + gql`query GetPlanetsDetail($nodeId: ID!) { + node(id: $nodeId) { + ... on Planet { + id + name + population + } + } + } + `, { + variables: { 'nodeId': id } + } + ) + let node = {} + + if (data) { + node = data.node + } + const planetData = planetInfo() + return ( -
-
-
-
- -
-
- banner -
-
-
-

Star Wars: A New Hope (Episode IV) -

-
-
-

Ratings: PG

-

Release Date: 23th May 2020

-

Genre: Adventure, Fantasy, Science Fiction

+ <> +
+ {loading ? : <>} +
+ +
+
-

Luke Skywalker begins a journey that will change the galaxy in Star Wars: Episode IV - A New Hope. Nineteen years after the formation of the Empire, Luke is thrust into the struggle of the Rebel Alliance when he meets Obi-Wan Kenobi, who has lived for years in seclusion on the desert planet of Tatooine. Obi-Wan begins Luke’s Jedi training as Luke joins him on a daring mission to rescue the beautiful Rebel leader Princess Leia from the clutches of Darth Vader and the evil Empire.

+ {error ? : <>} + {data ? <> +
+
+ banner +
+ +
+ +
+

+ {node["name"]} +

+
+ +
+

+ {planetData.planetDesc} +

+ +
+
-
+ : <>}
-
-
+
+ ) } export default PlanetDetails \ No newline at end of file diff --git a/src/utils/starwarimages.ts b/src/utils/starwarimages.ts index 20abecc..b0a9f05 100644 --- a/src/utils/starwarimages.ts +++ b/src/utils/starwarimages.ts @@ -37,4 +37,14 @@ export const starShipInfo = () => { return { shipLogo, shipDesc } +} + +export const planetInfo = () => { + + const planetLogo = images[Math.floor(Math.random() * 7)] + const planetDesc = shipDescriptions[Math.floor(Math.random() * 4)] + + return { + planetLogo, planetDesc + } } \ No newline at end of file From 175eab152b40c4d81e82861d1599156cbeb541fa Mon Sep 17 00:00:00 2001 From: Albert Byrone Date: Fri, 3 Mar 2023 06:54:21 +0300 Subject: [PATCH 3/4] remoe unneccesary code --- src/components/planets/Planet.tsx | 16 ++++++++-------- 1 file changed, 8 insertions(+), 8 deletions(-) diff --git a/src/components/planets/Planet.tsx b/src/components/planets/Planet.tsx index 08d2879..3ec93fe 100644 --- a/src/components/planets/Planet.tsx +++ b/src/components/planets/Planet.tsx @@ -1,12 +1,12 @@ import React from "react"; import { Link } from "react-router-dom"; -import { useNavigate } from "react-router-dom"; +// import { useNavigate } from "react-router-dom"; import { gql } from '@apollo/client'; import { useData } from "../../hooks/data/useData"; -import logo from "../../images/starwarslogo.png" +// import logo from "../../images/starwarslogo.png" import { planetInfo } from "../../utils/starwarimages"; -import { AppLoader } from "../AppLoader"; -import { AppError } from "../AppError"; +// import { AppLoader } from "../AppLoader"; +// import { AppError } from "../AppError"; // import { useData } from "../hooks/data/useData"; // const planets = [ // { @@ -69,7 +69,7 @@ import { AppError } from "../AppError"; function Planet() { // const [openTab, setOpenTab] = React.useState(1); - const navigate = useNavigate(); + // const navigate = useNavigate(); const banner = "https://lumiere-a.akamaihd.net/v1/images/aa-9-coruscant-freighter_a856053d.jpeg?region=92%2C0%2C1181%2C665"; @@ -90,9 +90,9 @@ function Planet() { const planets = data.allPlanets.planets // console.log("=====================--==",); - const handleSubmit = (item: any) => { - navigate(`/character/${item.id}`); - }; + // const handleSubmit = (item: any) => { + // navigate(`/character/${item.id}`); + // }; const formatDesc = (input): string => `${input.slice(0, 150)} ...` return ( From d9553f02439d926e10be8732b52def65ddb84dad Mon Sep 17 00:00:00 2001 From: Albert Byrone Date: Fri, 3 Mar 2023 07:03:36 +0300 Subject: [PATCH 4/4] remove inwanted code --- src/components/planets/Planet.tsx | 67 +------------------------------ src/views/Home.tsx | 5 --- 2 files changed, 1 insertion(+), 71 deletions(-) diff --git a/src/components/planets/Planet.tsx b/src/components/planets/Planet.tsx index 3ec93fe..6fc2ef8 100644 --- a/src/components/planets/Planet.tsx +++ b/src/components/planets/Planet.tsx @@ -1,75 +1,10 @@ import React from "react"; import { Link } from "react-router-dom"; -// import { useNavigate } from "react-router-dom"; import { gql } from '@apollo/client'; import { useData } from "../../hooks/data/useData"; -// import logo from "../../images/starwarslogo.png" import { planetInfo } from "../../utils/starwarimages"; -// import { AppLoader } from "../AppLoader"; -// import { AppError } from "../AppError"; -// import { useData } from "../hooks/data/useData"; -// const planets = [ -// { -// id: 1, -// title: "The Phantom Menace", -// image: "https://i.postimg.cc/0ybdytWT/download.jpg", -// description: -// "Star Warsis a space opera fran chise created by George Lucas that revolves around a group of rebels fighting against an evil empire. The franchise includes multiple films, books, comics", -// }, -// { -// id: 2, -// title: "The Phantom Menace", -// image: "https://i.postimg.cc/0ybdytWT/download.jpg", -// description: -// "Star Warsis a space opera fran chise created by George Lucas that revolves around a group of rebels fighting against an evil empire. The franchise includes multiple films, books, comics", -// }, -// { -// id: 3, -// title: "The Phantom Menace", -// image: "https://i.postimg.cc/0ybdytWT/download.jpg", -// description: -// "Star Warsis a space opera fran chise created by George Lucas that revolves around a group of rebels fighting against an evil empire. The franchise includes multiple films, books, comics", -// }, -// { -// id: 4, -// title: "The Phantom Menace", -// image: "https://i.postimg.cc/0ybdytWT/download.jpg", -// description: -// "Star Warsis a space opera fran chise created by George Lucas that revolves around a group of rebels fighting against an evil empire. The franchise includes multiple films, books, comics", -// }, -// { -// id: 5, -// title: "The Phantom Menace", -// image: "https://i.postimg.cc/0ybdytWT/download.jpg", -// description: -// "Star Warsis a space opera fran chise created by George Lucas that revolves around a group of rebels fighting against an evil empire. The franchise includes multiple films, books, comics", -// }, -// { -// id: 6, -// title: "The Phantom Menace", -// image: "https://i.postimg.cc/0ybdytWT/download.jpg", -// description: -// "Star Warsis a space opera fran chise created by George Lucas that revolves around a group of rebels fighting against an evil empire. The franchise includes multiple films, books, comics", -// }, -// { -// id: 7, -// title: "The Phantom Menace", -// image: "https://i.postimg.cc/0ybdytWT/download.jpg", -// description: -// "Star Warsis a space opera fran chise created by George Lucas that revolves around a group of rebels fighting against an evil empire. The franchise includes multiple films, books, comics", -// }, -// { -// id: 8, -// title: "The Phantom Menace", -// image: "https://i.postimg.cc/0ybdytWT/download.jpg", -// description: -// "Star Warsis a space opera fran chise created by George Lucas that revolves around a group of rebels fighting against an evil empire. The franchise includes multiple films, books, comics", -// }, -// ]; function Planet() { - // const [openTab, setOpenTab] = React.useState(1); - // const navigate = useNavigate(); const banner = "https://lumiere-a.akamaihd.net/v1/images/aa-9-coruscant-freighter_a856053d.jpeg?region=92%2C0%2C1181%2C665"; @@ -139,7 +74,7 @@ function Planet() { const planetData = planetInfo() return ( -
+
{''}

diff --git a/src/views/Home.tsx b/src/views/Home.tsx index ecebf9e..ab7236a 100644 --- a/src/views/Home.tsx +++ b/src/views/Home.tsx @@ -1,6 +1,4 @@ import React from "react"; -import { getUser } from "../utils/authData"; -import { useNavigate } from "react-router-dom"; import FilmsList from "../components/Films/FilmsList"; const films = [ @@ -37,9 +35,6 @@ const films = [ ]; function Home() { - // const navigate = useNavigate(); - // if (!getUser()) navigate("/login"); - const banner = 'https://lumiere-a.akamaihd.net/v1/images/aa-9-coruscant-freighter_a856053d.jpeg?region=92%2C0%2C1181%2C665'