react router

sedcakmak · Mar 31, 2023 · ddcb18a · ddcb18a
1 parent f851dfb
commit ddcb18a
Show file tree

Hide file tree

Showing 3 changed files with 145 additions and 52 deletions.
diff --git a/src/App.js b/src/App.js
@@ -1,5 +1,6 @@
 import "./App.css";
 import { useState, createContext } from "react";
+import { BrowserRouter, Routes, Route } from "react-router-dom";
 import styled from "styled-components";
 import { lightTheme, darkTheme } from "./globalStyles";
 import { ThemeProvider } from "styled-components";
@@ -8,6 +9,7 @@ import Navbar from "./components/Navbar";
 import SearchBar from "./components/SearchBar";
 import Cards from "./components/Cards";
 import Dropdown from "./components/Dropdown";
+import CountryPage from "./components/CountryPage";
 
 export const ThemeContext = createContext();
 
@@ -27,54 +29,63 @@ function App() {
     }
   };
 
-  function openCountry() {
-    console.log("working");
-  }
-
   return (
-    <ThemeContext.Provider
-      value={{
-        theme,
-        countries,
-        setCountries,
-        filterCountry,
-        setFilterCountry,
-        region,
-        setRegion,
-      }}
-    >
-      <ThemeProvider theme={theme === "light" ? lightTheme : darkTheme}>
-        <GlobalStyle />
-        <Navbar
-          toggleTheme={toggleTheme}
-          theme={theme}
-        />
-        <Section>
-          <SearchBar
-            countries={countries}
-            setCountries={setCountries}
-            filterCountry={filterCountry}
-            setFilterCountry={setFilterCountry}
-            theme={theme}
-          />
-          <Dropdown
-            theme={theme}
-            countries={countries}
-            region={region}
-            setRegion={setRegion}
-          />
-        </Section>
-        <Div>
-          <Cards
+    <BrowserRouter>
+      <ThemeContext.Provider
+        value={{
+          theme,
+          countries,
+          setCountries,
+          filterCountry,
+          setFilterCountry,
+          region,
+          setRegion,
+        }}
+      >
+        <ThemeProvider theme={theme === "light" ? lightTheme : darkTheme}>
+          <GlobalStyle />
+          <Navbar
+            toggleTheme={toggleTheme}
             theme={theme}
-            countries={countries}
-            setCountries={setCountries}
-            filterCountry={filterCountry}
-            region={region}
           />
-        </Div>
-      </ThemeProvider>
-    </ThemeContext.Provider>
+          <Section>
+            <SearchBar
+              countries={countries}
+              setCountries={setCountries}
+              filterCountry={filterCountry}
+              setFilterCountry={setFilterCountry}
+              theme={theme}
+            />
+            <Dropdown
+              theme={theme}
+              countries={countries}
+              region={region}
+              setRegion={setRegion}
+            />
+          </Section>
+          <Div>
+            <Routes>
+              <Route
+                path="/"
+                element={
+                  <Cards
+                    theme={theme}
+                    countries={countries}
+                    setCountries={setCountries}
+                    filterCountry={filterCountry}
+                    region={region}
+                  />
+                }
+              />
+              <Route
+                path="/:name"
+                element={<CountryPage countries={countries} />}
+              />
+            </Routes>
+          </Div>
+        </ThemeProvider>
+      </ThemeContext.Provider>
+    </BrowserRouter>
   );
 }
 

diff --git a/src/components/Cards.js b/src/components/Cards.js
@@ -1,12 +1,15 @@
 import axios from "axios";
 import { useEffect, useContext } from "react";
+import { useNavigate } from "react-router-dom";
 import styled from "styled-components";
 import { ThemeContext } from "../App";
 
 export default function Cards() {
   const { theme, countries, setCountries, filterCountry, region } =
     useContext(ThemeContext);
 
+  let navigate = useNavigate();
+
   const Div = styled.div`
     background: ${() => (theme === "light" ? "#FFF" : "hsl(209, 23%, 22%)")};
     width: 280px;
@@ -37,19 +40,19 @@ export default function Cards() {
   useEffect(() => {
     getAllCountries();
   }, []);
-
+  console.log(countries);
   if (!region && !filterCountry && countries.length > 0) {
     return countries
       .sort((a, b) => (a.name.common > b.name.common ? 1 : -1))
       .map((country) => {
         return (
           <Div
             key={country.name.common}
-            onClick={() => alert("working")}
+            onClick={() => navigate(`${country.name.common}`)}
           >
             <img
               src={country.flags.png}
-              alt="flag"
+              alt={country.flags.alt}
             />
             <Div2>
               <H1>{country.name.common}</H1>
@@ -69,10 +72,13 @@ export default function Cards() {
       });
   } else if (region) {
     return region.map((country) => (
-      <Div key={country.name.official}>
+      <Div
+        key={country.name.official}
+        onClick={() => navigate(`${country.name.common}`)}
+      >
         <img
           src={country.flags.png}
-          alt="flag"
+          alt={country.flags.alt}
         />
         <Div2>
           <H1>{country.name.common}</H1>
@@ -91,10 +97,13 @@ export default function Cards() {
     ));
   } else if (filterCountry)
     return filterCountry.map((country) => (
-      <Div key={country.name.official}>
+      <Div
+        key={country.name}
+        onClick={() => navigate(`${country.name.common}`)}
+      >
         <img
           src={country.flags.png}
-          alt="flag"
+          alt={country.flags.alt}
         />
         <Div2>
           <H1>{country.name.common}</H1>

diff --git a/src/components/CountryPage.js b/src/components/CountryPage.js
@@ -0,0 +1,73 @@
+import { useNavigate, useParams } from "react-router-dom";
+import { useEffect, useContext } from "react";
+import styled from "styled-components";
+import { ThemeContext } from "../App";
+
+export default function CountryPage() {
+  let theCountry = window.location.pathname.substring(1);
+  const { countries } = useContext(ThemeContext);
+
+  if (countries.length > 0)
+    return countries.map((country) => {
+      const border = country.borders.map((border) => border.split(""));
+      console.log(border);
+      return (
+        country.name.common === theCountry && (
+          <>
+            <Div>
+              <button>Back</button>
+              <Img
+                src={country.flags.png}
+                alt={country.flags.alt}
+              />
+            </Div>
+            <Div2>
+              <h1>{country.name.common}</h1>
+              <p>
+                <span>Native Name: </span> {country.name.nativeName.official}
+              </p>
+              <p>
+                <span>Population: </span> {country.population}
+              </p>
+              <p>
+                <span>Region: </span> {country.region}
+              </p>
+              <p>
+                <span>Capital: </span>
+                {country.capital}
+              </p>
+              <p>
+                <span>Top Level Domain: </span> {country.tld}
+              </p>
+              {/* <p>
+                <span>Currencies: </span> {country.currencies[0]}
+              </p>
+              <p>
+                <span>Languages: </span>
+                {country.languages}
+              </p> */}
+              <h2>Border Countries: {}</h2>
+            </Div2>
+          </>
+        )
+      );
+    });
+}
+
+const Img = styled.img`
+  width: 100%;
+  height: 100%;
+`;
+const Div = styled.div`
+  /* display: flex;
+  flex-direction: column; */
+`;
+
+const Div2 = styled.div`
+  display: flex;
+  flex-direction: column;
+  flex-wrap: wrap;
+  width: 50%;
+  border: 1px solid red;
+  line-height: 2;
+`;