CeylinYasar-S6-Challenge

.gitignore

@@ -0,0 +1 @@
+node_modules

src/App.js

@@ -1,18 +1,60 @@
-import React from 'react';
+import React from "react";
+import { useEffect, useState } from "react";
+import Section from "./Section";
+import axios from "axios";
+import Arama from "./Arama";
 
 const App = () => {
   // Try to think through what state you'll need for this app before starting. Then build out
   // the state properties here.
 
-  // Fetch characters from the API in an effect hook. Remember, anytime you have a 
+  // Fetch characters from the API in an effect hook. Remember, anytime you have a
   // side effect in a component, you want to think about which state and/or props it should
   // sync up with, if any.
+  const [data, setData] = useState([]);
+  const [arama, setArama] = useState("");
+  const [icerik, setIcerik] = useState("");
+
+  useEffect(() => {
+    axios
+      .get("https://swapi.dev/api/people/")
+      .then((response) => setData(response.data));
+  }, []);
+
+  function handleClick(name) {
+    setIcerik(name === icerik ? null : name);
+  }
 
   return (
     <div className="App">
-      <h1 className="Header">Karakterler</h1>
+      <h1 className="Header">Star Wars Major Characters List</h1>
+      {<Arama setArama={setArama} arama={arama} />}
+      {data
+        .filter((person) => {
+          if (arama === "") {
+            return person;
+          } else if (
+            person.name.toLowerCase().includes(arama.toLocaleLowerCase())
+          ) {
+            return person;
+          }
+        })
+        .map((person) => {
+          return (
+            <Section
+              key={person.name}
+              data={person}
+              handleClick={handleClick}
+              icerik={icerik}
+              setIcerik={setIcerik}
+            />
+          );
+        })}
+      {/* {films.map((person) => {
+        return <Section films={person} />;
+      })} */}
     </div>
   );
-}
+};
 
 export default App;

src/Arama.js

@@ -0,0 +1,23 @@
+import React from "react";
+import styled from "styled-components";
+
+function Arama(props) {
+  const { arama, setArama } = props;
+  const SCInput = styled.input`
+    padding: 8px;
+    width: 30%;
+    background-color: #ddd;
+    color: black;
+    border-style: solid;
+  `;
+  return (
+    <SCInput
+      type="text"
+      placeholder="Arama"
+      onChange={(event) => setArama(event.target.value)}
+      value={arama}
+      autoFocus
+    ></SCInput>
+  );
+}
+export default Arama;

src/Section.js

@@ -0,0 +1,38 @@
+import React from "react";
+import styled from "styled-components";
+function Section(props) {
+  const { data, handleClick, icerik } = props;
+
+  const SCAciklama = styled.div`
+    ${(props) =>
+      props.icerik !== props.dataName ? `display:none` : `display:block`}
+  `;
+  const SCSection = styled.div`
+    width: 31%;
+    margin: 10px auto;
+    background-color: rgba(20, 0, 0, 0.3);
+    color: white;
+    padding: 1px 0 14px 0px;
+  `;
+  return (
+    <>
+      <SCSection>
+        <h3 key={data.name}>{data.name}</h3>
+        <button onClick={() => handleClick(data.name)}>
+          {icerik !== data.name ? "+" : "-"}
+        </button>
+        <SCAciklama icerik={icerik} dataName={data.name}>
+          <p>Gender: {data.gender}</p>
+          <p>Height: {data.height}</p>
+          <p>Mass: {data.mass}</p>
+          <p>BirthYear: {data.birth_year}</p>
+          <p>Eye Color: {data.eye_color}</p>
+          <p>Hair Color: {data.hair_color}</p>
+          <p>Skin Color: {data.skin_color}</p>
+          {<p>Appears in {data.films.length} films</p>}
+        </SCAciklama>
+      </SCSection>
+    </>
+  );
+}
+export default Section;

src/index.css

@@ -2,6 +2,6 @@ body {
   margin: 0;
   padding: 0;
   font-family: sans-serif;
-  background-image: url('./images/sw-bg.jpg');
+  background-image: url("./images/sw-bg.jpg");
   background-size: cover;
 }