Albert/query planets

src/components/AppError.tsx

@@ -1,6 +1,6 @@
-export const AppError = ({message}) => {
+export const AppError = ({ message }) => {
     return (
-        <div className="bg-orange-100 border-l-4 border-orange-500 text-orange-700 p-4" role="alert">
+        <div className="bg-orange-100 border-l-4 border-orange-500 text-orange-700 p-4 " role="alert">
             <p className="font-bold">Something Went wrong!</p>
             <p>{message}</p>
         </div>

src/components/AppLoader.tsx

@@ -1,14 +1,14 @@
 export const AppLoader = () => {
-    return(
+    return (
         <div role="status" className={'mt-[5%] mb-5 flex flex-row justify-center'}>
             <svg aria-hidden="true" className="w-16 h-16 mr-2 text-gray-200 animate-spin dark:text-gray-600 fill-[#E02312]"
-                 viewBox="0 0 100 101" fill="none" xmlns="http://www.w3.org/2000/svg">
+                viewBox="0 0 100 101" fill="none" xmlns="http://www.w3.org/2000/svg">
                 <path
                     d="M100 50.5908C100 78.2051 77.6142 100.591 50 100.591C22.3858 100.591 0 78.2051 0 50.5908C0 22.9766 22.3858 0.59082 50 0.59082C77.6142 0.59082 100 22.9766 100 50.5908ZM9.08144 50.5908C9.08144 73.1895 27.4013 91.5094 50 91.5094C72.5987 91.5094 90.9186 73.1895 90.9186 50.5908C90.9186 27.9921 72.5987 9.67226 50 9.67226C27.4013 9.67226 9.08144 27.9921 9.08144 50.5908Z"
-                    fill="currentColor"/>
+                    fill="currentColor" />
                 <path
                     d="M93.9676 39.0409C96.393 38.4038 97.8624 35.9116 97.0079 33.5539C95.2932 28.8227 92.871 24.3692 89.8167 20.348C85.8452 15.1192 80.8826 10.7238 75.2124 7.41289C69.5422 4.10194 63.2754 1.94025 56.7698 1.05124C51.7666 0.367541 46.6976 0.446843 41.7345 1.27873C39.2613 1.69328 37.813 4.19778 38.4501 6.62326C39.0873 9.04874 41.5694 10.4717 44.0505 10.1071C47.8511 9.54855 51.7191 9.52689 55.5402 10.0491C60.8642 10.7766 65.9928 12.5457 70.6331 15.2552C75.2735 17.9648 79.3347 21.5619 82.5849 25.841C84.9175 28.9121 86.7997 32.2913 88.1811 35.8758C89.083 38.2158 91.5421 39.6781 93.9676 39.0409Z"
-                    fill="currentFill"/>
+                    fill="currentFill" />
             </svg>
             <span className="sr-only">Loading...</span>
         </div>

src/components/planets/Planet.tsx

@@ -1,75 +1,34 @@
 import React from "react";
-// import { Link } from "react-router-dom";
-import { useNavigate } from "react-router-dom";
+import { Link } from "react-router-dom";
+import { gql } from '@apollo/client';
+import { useData } from "../../hooks/data/useData";
+import { planetInfo } from "../../utils/starwarimages";
 
 function Planet() {
-  // const [openTab, setOpenTab] = React.useState(1);
-  const navigate = useNavigate();
   const banner =
     "https://images.unsplash.com/photo-1451187580459-43490279c0fa?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxzZWFyY2h8MjF8fHN0YXIlMjB3YXJzfGVufDB8fDB8fA%3D%3D&auto=format&fit=crop&w=800&q=60";
 
-  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 handleSubmit = (item: any) => {
-    navigate(`/character/${item.id}`);
-  };
+  const { loading, error, data } = useData(gql` query GetPlanets {
+    allPlanets {
+      planets {
+        id
+        name
+        population
+        orbitalPeriod
+      }
+    }
+  }`, {})
+  if (loading) return <p>Loading...</p>;
+  if (error) return <p>Error : {error.message}</p>;
+
+  const planets = data.allPlanets.planets
+
+  // console.log("=====================--==",);
+  // const handleSubmit = (item: any) => {
+  //   navigate(`/character/${item.id}`);
+  // };
+  const formatDesc = (input): string => `${input.slice(0, 150)} ...`
 
   return (
     <>
@@ -112,27 +71,29 @@ function Planet() {
             All Characters
           </h2>
           <div className="flex h-auto py-8 items-center justify-center w-full">
-            <div className="w-full gap-8 flex-wrap flex justify-start items-center">
-              {planets.map((character) => (
-                <div className={"flex flex-col"}>
-                  <img
-                    className={"object-cover h-96 rounded-t-lg"}
-                    src={character.image}
-                    alt={""}
-                  />
-                  <h1 className={"text-lg text-white my-4"}>
-                    {character.title}
-                  </h1>
-                  <button
-                    onClick={() => handleSubmit(character)}
-                    className="relative text-white w-[60%] inline-flex items-center justify-center p-0.5 mb-2 mr-2 overflow-hidden text-sm font-medium text-gray-900 rounded-lg group bg-red-900 group-hover:from-pink-500 group-hover:to-orange-400 hover:text-white dark:text-white focus:ring-4 focus:outline-none focus:ring-pink-200"
-                  >
-                    <span className="relative text-white w-[100%] px-5 py-4 transition-all ease-in duration-75 bg-black rounded-md group-hover:bg-opacity-0">
-                      Planet Details
-                    </span>
-                  </button>
-                </div>
-              ))}
+            <div className={'grid grid-cols-1 gap-6 md:grid-cols-4 lg:grid-cols-4 mt-4 mb-5'}>
+              {planets.map((character) => {
+                const planetData = planetInfo()
+                return (
+
+                  <div className={'flex flex-col min-h-[100px]'} key={character.id}>
+                    <img className={'object-cover h-96 rounded-t-lg'} src={planetData.planetLogo} alt={''} />
+                    <div className={'flex flex-col h-64 items-start justify-between'}>
+                      <h1 className={'text-2xl px-1 text-white font-semibold'}>
+                        {character.name}
+                      </h1>
+                      <p className={'px-1 mt-2 text-white font-extralight text-lg'}>
+                        {formatDesc(planetData.planetDesc)}
+                      </p>
+                      <Link
+                        to={`/planet/${character.id}`}
+                        className={'border border-2 rounded-md mt-4 border-[#E02312] text-white p-2 hover:bg-[#E02312] w-max'}>
+                        PLANET DETAILS
+                      </Link>
+                    </div>
+                  </div>
+                )
+              })}
             </div>
           </div>
         </div>

src/components/planets/PlanetDetails.tsx

@@ -1,33 +1,73 @@
 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 (
-    <div className="bg-black w-full min-h-screen mb-0">
-      <div className='border-b-2  border-white  m-auto w-11/12 mt-4' />
-      <div className='container mx-auto md:container md:mx-auto mt-10 text-white flex  '>
-
-        <div className="md:flex items-start justify-center py-12 2xl:px-20 md:px-6 px-4">
-          <div className="xl:w-2/6 lg:w-2/5 w-80 md:block hidden">
-            <img src="https://i.postimg.cc/0ybdytWT/download.jpg" alt='banner' className="w-full" />
-          </div>
-          <div className="xl:w-3/5 md:w-1/2 lg:ml-8 md:ml-6 md:mt-0 mt-6">
-            <div className="border-b border-gray-200 pb-6">
-              <h1 className="lg:text-2xl text-xl font-semibold lg:leading-6 leading-7 text-white dark:text-white mt-2">Star Wars: A New Hope (Episode IV)
-              </h1>
-            </div>
-            <div>
-              <p className="text-base leading-4 mt-7 text-gray-600 dark:text-gray-300">Ratings: PG</p>
-              <p className="text-base leading-4 mt-4 text-gray-600 dark:text-gray-300">Release Date: 23th May 2020</p>
-              <p className="text-base leading-4 mt-4 text-gray-600 dark:text-gray-300">Genre: Adventure, Fantasy, Science Fiction</p>
+    <>
+      <div className='flex items-center justify-center'>
+        {loading ? <AppLoader /> : <></>}
+      </div>
 
-              <p className="xl:pr-48 text-base lg:leading-tight leading-normal text-gray-600 dark:text-gray-300 mt-7">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.</p>
+      <div className="bg-black w-full min-h-screen mb-0">
+        <div className='container mx-auto md:container md:mx-auto mt-10 text-white flex  '>
+          {error ? <AppError message={error.message} /> : <></>}
+          {data ? <>
+            <div className="md:flex items-start justify-center py-12 2xl:px-20 md:px-6 px-4">
 
+              <div className="xl:w-2/5 lg:w-2/5 md:w1/2 w-80 md:block h-fit">
+                <img src={planetData.planetLogo} alt='banner'
+                  className="w-full object-cover h-96 hover:object-scale-down" />
+              </div>
+
+              <div className="xl:w-3/5 md:w-1/2 lg:w-3/5 lg:ml-8 md:ml-6 md:mt-0 mt-6">
+
+                <div className="border-b border-gray-200 pb-6">
+                  <h1 className="lg:text-4xl text-xl font-semibold lg:leading-6 leading-7 text-white dark:text-white mt-2">
+                    {node["name"]}
+                  </h1>
+                </div>
+
+                <div className={'mt-5'}>
+                  <p className="xl:pr-48 text-xl lg:leading-tight leading-normal text-gray-600 dark:text-gray-300 mt-7">
+                    {planetData.planetDesc}
+                  </p>
+
+                </div>
+              </div>
             </div>
-          </div>
+          </> : <></>}
         </div>
-      </div>
 
-    </div>
+      </div>
+    </>
   )
 }
 export default PlanetDetails

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
+    }
 }