Sprint

README.md

@@ -12,13 +12,13 @@ You are not allowed to collaborate during the sprint challenge.
 
 ## Project Set Up
 
-- [ ] Fork and clone the repo. Delete your old fork from Github first if you are repeating this Unit.
-- [ ] Open the assignment in Canvas and click on the "Set up git" option (Or, depending, if you see something along the lines of 'Load Sprint Challenge Submission in a new window' click that).
-- [ ] Wire your fork to Codegrade using the "Click here for instructions on setting up Git submissions" link, select Github, authorize Github.
-- [ ] Push your first commit: `git commit --allow-empty -m "first commit" && git push`. MAKE SURE TO PUSH TO MAIN, YOU NO LONGER NEED TO CREATE A NEW BRANCH!!
-- [ ] Make commits often! PUSH TO MAIN!!!
-- [ ] You can run tests locally by running npm run test.
-- [ ] Check to see that Codegrade has accepted your git submission.
+- [ X] Fork and clone the repo. Delete your old fork from Github first if you are repeating this Unit.
+- [X ] Open the assignment in Canvas and click on the "Set up git" option (Or, depending, if you see something along the lines of 'Load Sprint Challenge Submission in a new window' click that).
+- [ X] Wire your fork to Codegrade using the "Click here for instructions on setting up Git submissions" link, select Github, authorize Github.
+- [X ] Push your first commit: `git commit --allow-empty -m "first commit" && git push`. MAKE SURE TO PUSH TO MAIN, YOU NO LONGER NEED TO CREATE A NEW BRANCH!!
+- [ X] Make commits often! PUSH TO MAIN!!!
+- [X ] You can run tests locally by running npm run test.
+- [ X] Check to see that Codegrade has accepted your git submission.
 
 ## Project Instructions
 
@@ -79,6 +79,12 @@ After finishing your required elements, you can push your work further. These go
 Be prepared to demonstrate your understanding of this week's concepts by answering questions on the following topics. Put your answers underneath the questions:
 
 1. What is React JS and what problems does it solve? Support your answer with concepts introduced in class and from your personal research on the web.
+-We needed a way to build applications that can take care of a lot of the work for us. React interacts with the virtual DOM and renders it to the actual DOM. React provides a smooth experience for users, and developers.
+
 1. Describe component state.
+- Component is a loose term to describe a discrete chunk of your site. It is a regular JS function.
 1. Describe props.
+- When we want to pass information held on state inside one component to another, we pass them as props. We never make changes to props data, because they are read-only.
 1. What are side effects, and how do you sync effects in a React component to changes of certain state or props?
+- Side Effects is anything that affects something outside the scope of the function being executed. Fetching data from an API, timers, logging, and manually manipulating the DOM are all examples of side effects. 
+- We  sync effects by passing in a dependency array as the second argument to the effect hook.

src/App.js

@@ -1,19 +1,90 @@
-import React from 'react';
+import React, { useState, useEffect } from 'react';
 import './App.css';
+import axios from 'axios';
+import Character from './components/Character';
+import styled from 'styled-components';
+import Details from './components/Details';
 
 const App = () => {
+
   // Try to think through what state you'll need for this app before starting. Then build out
   // the state properties here.
-
+  const [starFolk,setStarFolk] = useState(null);
+  const [buttonOpen, setButtonOpen]= useState(null)
   // 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 openDetails = id =>
+  {
+      const character = starFolk.filter(item => item.id === id);
+      setButtonOpen(character);
+  };
+
+  const closeDetails = () =>
+  {
+      setButtonOpen(null);
+  };
+
+
+
+  useEffect(() => {
+    axios.get('https://swapi.dev/api/people')
+    .then(res => {
+      setStarFolk(res.data.results);
+      setStarFolk(res.data);
+
+      const characters = res.data;
+
+                let id = 1;
+                characters.forEach(item => item.id = id++);
+                console.log(characters);
+                setStarFolk(characters);
+    })
+    .catch(err => {
+      console.error(err)
+    })
+  }, []);
+
+
+
+  const StarDiv = styled.div`
+  margin: 0 auto;
+  box-sizing: border-box;
+  width: 50%;
+  display:flex;
+  flex-direction:column;
+  justify-content:space-between;
+
+  margin-bottom:10%;
 
+  button {
+    width: 30%;
+    margin-left:35%;
+  }
+
+`
+
   return (
     <div className="App">
-      <h1 className="Header">Characters</h1>
+    <h1 className="Header">Characters</h1>
+    <StarDiv>
+    {
+       starFolk &&
+       starFolk.map(info =>
+       {
+           return <Character key={info.name}
+               info={info}
+               openDetails={openDetails}
+               closeDetails={closeDetails} />;
+       })
+   }
+   {
+       buttonOpen && <Details info={buttonOpen} closeDetails={closeDetails} />
+    }
+    </StarDiv>
     </div>
   );
-}
+};
 
 export default App;

src/components/Character.js

@@ -1 +1,30 @@
 // Write your Character component here
+import React from 'react';
+import styled from 'styled-components';
+
+const StarStyle = styled.div`
+display:flex;
+justify-content:center;
+margin:10% 15% 0;
+background-color:coral;
+border: solid black 5px;
+border-radius:10%;
+padding:5%;
+
+`
+
+
+
+const Character = props => {
+    const {info} =props
+    return (
+        <StarStyle>
+
+            <p><b>{info.name}</b> was born in {info.birth_year}. 
+            They are {info.height}km tall.</p>
+        </StarStyle>
+    )
+}
+
+
+export default Character;

src/components/Details.js

@@ -0,0 +1,17 @@
+import React, { useEffect, useState } from 'react';
+import App from '../App';
+import styled from 'styled-components';
+
+export default function Details(props)
+{
+    return (
+        <div>
+            <h2>Details of {props.info[0].name}</h2>
+            <p>Born in year: {props.info[0].birth_year}</p>
+            <p>Eye color: {props.info[0].eye_color}</p>
+            <p>Hair color: {props.info[0].hair_color}</p>
+
+            <button onClick={props.closeDetails}>Close</button>
+        </div>
+    );
+}