From 60c0a32e8a520d3dfc3c0d440079e27d945f63c7 Mon Sep 17 00:00:00 2001 From: Filip Date: Sat, 19 Nov 2022 08:06:33 +0000 Subject: [PATCH 1/7] Update App.jsx --- src/App.jsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/App.jsx b/src/App.jsx index 84162ae..0d8cbed 100644 --- a/src/App.jsx +++ b/src/App.jsx @@ -5,7 +5,7 @@ function App() { <>
-

Welcome to the JSHeroes Bootcamp!

+

Hello!

From 1a7f8292b463b4bb9f0b013487f6ecddad7d8f66 Mon Sep 17 00:00:00 2001 From: Filip Date: Sat, 19 Nov 2022 09:48:45 +0000 Subject: [PATCH 2/7] Update 4 files --- src/App.jsx | 69 +++++++++++------------- src/Components/Card/Card.jsx | 19 +++++++ src/Components/Header/Header.jsx | 14 +++++ src/Components/SearchForm/SearchForm.jsx | 12 +++++ 4 files changed, 76 insertions(+), 38 deletions(-) create mode 100644 src/Components/Card/Card.jsx create mode 100644 src/Components/Header/Header.jsx create mode 100644 src/Components/SearchForm/SearchForm.jsx diff --git a/src/App.jsx b/src/App.jsx index 0d8cbed..20df14b 100644 --- a/src/App.jsx +++ b/src/App.jsx @@ -1,48 +1,41 @@ import "./App.css"; +import Head from "./Components/Header/Header"; +import SearchForm from "./Components/SearchForm/SearchForm"; +import Card from "./Components/Card/Card"; + +const cards = [ + { + title: "facebook/react", + description: "placeholder description", + stars: 500, + forks: 100, + }, + + { + title: "vuejs/vue", + description: "placeholder description", + stars: 500, + forks: 100, + }, + + { + title: "sveltejs/svelte", + description: "placeholder description", + stars: 500, + forks: 100, + }, +]; function App() { return ( <> -
-
-

Hello!

-
- -
- +
-
- - -
- +
    -
  • - facebook/react - placeholder description -
    -
    Stars: 500
    -
    Forks: 100
    -
    -
    • - -
  • - vuejs/vue - placeholder description -
    -
    Stars: 500
    -
    Forks: 100
    -
    -
    • - -
  • - sveltejs/svelte - placeholder description -
    -
    Stars: 500
    -
    Forks: 100
    -
    -
    • + + +
diff --git a/src/Components/Card/Card.jsx b/src/Components/Card/Card.jsx new file mode 100644 index 0000000..561a834 --- /dev/null +++ b/src/Components/Card/Card.jsx @@ -0,0 +1,19 @@ +import React from "react"; + +function Cards() { + return ( + + ); +} + +export default Cards; diff --git a/src/Components/Header/Header.jsx b/src/Components/Header/Header.jsx new file mode 100644 index 0000000..58ce5b7 --- /dev/null +++ b/src/Components/Header/Header.jsx @@ -0,0 +1,14 @@ +import React from "react"; + +function Head() { + return ( +
+
+

Hello!

+
+ +
+ ); +} + +export default Head; diff --git a/src/Components/SearchForm/SearchForm.jsx b/src/Components/SearchForm/SearchForm.jsx new file mode 100644 index 0000000..79d4ea8 --- /dev/null +++ b/src/Components/SearchForm/SearchForm.jsx @@ -0,0 +1,12 @@ +import React from "react"; + +function Form() { + return ( +
+ + +
+ ); +} + +export default Form; From 637e155e36fa9ebe6204e5b237781f77a34f2307 Mon Sep 17 00:00:00 2001 From: Filip Date: Sat, 19 Nov 2022 10:26:01 +0000 Subject: [PATCH 3/7] Update App.jsx and Card.jsx --- src/App.jsx | 15 ++++++++++----- src/Components/Card/Card.jsx | 12 ++++++------ 2 files changed, 16 insertions(+), 11 deletions(-) diff --git a/src/App.jsx b/src/App.jsx index 20df14b..9d88062 100644 --- a/src/App.jsx +++ b/src/App.jsx @@ -27,16 +27,21 @@ const cards = [ ]; function App() { + const newArray = cards.map((card) => ( + + )); + return ( <>
-
    - - - -
+
    {newArray}
); diff --git a/src/Components/Card/Card.jsx b/src/Components/Card/Card.jsx index 561a834..d788609 100644 --- a/src/Components/Card/Card.jsx +++ b/src/Components/Card/Card.jsx @@ -1,17 +1,17 @@ import React from "react"; -function Cards() { +function Cards(props) { + console.log(props); return (
  • - facebook/react - placeholder description + {props.title} + {props.title}
    -
    Stars: 500
    -
    Forks: 100
    +
    Stars: {props.stars}
    +
    Forks: {props.forks}
    • -
); } From 51f609dd5acd1a2905bc2fef88f23d4491828af6 Mon Sep 17 00:00:00 2001 From: Filip Date: Sat, 19 Nov 2022 12:28:58 +0000 Subject: [PATCH 4/7] Update 3 files --- src/App.jsx | 20 ++++++++++++++++---- src/Components/Card/Card.jsx | 2 +- src/Components/SearchForm/SearchForm.jsx | 18 +++++++++++++----- 3 files changed, 30 insertions(+), 10 deletions(-) diff --git a/src/App.jsx b/src/App.jsx index 9d88062..9a30f5f 100644 --- a/src/App.jsx +++ b/src/App.jsx @@ -2,6 +2,7 @@ import "./App.css"; import Head from "./Components/Header/Header"; import SearchForm from "./Components/SearchForm/SearchForm"; import Card from "./Components/Card/Card"; +import {useState} from "react"; const cards = [ { @@ -20,14 +21,15 @@ const cards = [ { title: "sveltejs/svelte", - description: "placeholder description", + description: "test description", stars: 500, forks: 100, }, ]; function App() { - const newArray = cards.map((card) => ( + let filteredCards = []; + const cardsJSX = filteredCards.map((card) => ( )); + console.log("rerender", filteredCards); return ( <>
- -
    {newArray}
+ { + console.log(value); + filteredCards = cards.filter( + (item) => + item.title.includes(value) || item.description.includes(value) + ); + console.log(filteredCards); + }} + /> +
    {cardsJSX}
); diff --git a/src/Components/Card/Card.jsx b/src/Components/Card/Card.jsx index d788609..f0778c4 100644 --- a/src/Components/Card/Card.jsx +++ b/src/Components/Card/Card.jsx @@ -6,7 +6,7 @@ function Cards(props) {
  • {props.title} - {props.title} + {props.description}
    Stars: {props.stars}
    Forks: {props.forks}
    diff --git a/src/Components/SearchForm/SearchForm.jsx b/src/Components/SearchForm/SearchForm.jsx index 79d4ea8..956b871 100644 --- a/src/Components/SearchForm/SearchForm.jsx +++ b/src/Components/SearchForm/SearchForm.jsx @@ -1,12 +1,20 @@ -import React from "react"; +import React, { useRef } from "react"; + +function SearchForm(props) { + const textInput = useRef(null); + function buttonClicked(e) { + e.preventDefault(); + props.onSearch(textInput.current.value); + } -function Form() { return (
    - - + +
    ); } -export default Form; +export default SearchForm; From fed948826086a70fd9ca391e84384b029640721a Mon Sep 17 00:00:00 2001 From: Filip Date: Sat, 19 Nov 2022 12:52:19 +0000 Subject: [PATCH 5/7] Update App.jsx --- src/App.jsx | 9 ++++++--- 1 file changed, 6 insertions(+), 3 deletions(-) diff --git a/src/App.jsx b/src/App.jsx index 9a30f5f..1fa2174 100644 --- a/src/App.jsx +++ b/src/App.jsx @@ -2,7 +2,7 @@ import "./App.css"; import Head from "./Components/Header/Header"; import SearchForm from "./Components/SearchForm/SearchForm"; import Card from "./Components/Card/Card"; -import {useState} from "react"; +import { useState } from "react"; const cards = [ { @@ -28,7 +28,8 @@ const cards = [ ]; function App() { - let filteredCards = []; + const [filteredCards, setFilteredCards] = useState(cards); + const cardsJSX = filteredCards.map((card) => ( { console.log(value); - filteredCards = cards.filter( + const items = cards.filter( (item) => item.title.includes(value) || item.description.includes(value) ); console.log(filteredCards); + setFilteredCards(items); }} /> + {/* {render} */}
      {cardsJSX}
    From adc8a78ea7c4c7cac069a5347098e56a37e8121a Mon Sep 17 00:00:00 2001 From: Filip Date: Sat, 19 Nov 2022 13:13:29 +0000 Subject: [PATCH 6/7] Update App.jsx --- src/App.jsx | 20 ++++++++++++++++---- 1 file changed, 16 insertions(+), 4 deletions(-) diff --git a/src/App.jsx b/src/App.jsx index 1fa2174..e465aee 100644 --- a/src/App.jsx +++ b/src/App.jsx @@ -2,7 +2,7 @@ import "./App.css"; import Head from "./Components/Header/Header"; import SearchForm from "./Components/SearchForm/SearchForm"; import Card from "./Components/Card/Card"; -import { useState } from "react"; +import { useState, useEffect } from "react"; const cards = [ { @@ -28,17 +28,29 @@ const cards = [ ]; function App() { + const [cards, setCards] = useState([]); + const [filteredCards, setFilteredCards] = useState(cards); const cardsJSX = filteredCards.map((card) => ( )); console.log("rerender", filteredCards); + useEffect(() => { + // cand apare componenta prima data + // console.log("prima data"); + fetch("https://api.github.com/search/repositories?q=stars:>10000") + .then((response) => response.json()) + .then((data) => { + console.log(data); + setCards(data.items); + }); + }, []); return ( <> @@ -49,7 +61,7 @@ function App() { console.log(value); const items = cards.filter( (item) => - item.title.includes(value) || item.description.includes(value) + item.name.includes(value) || item.description.includes(value) ); console.log(filteredCards); setFilteredCards(items); From 514ce4acfcfc72e566bb4ba30ae053260fa90f8d Mon Sep 17 00:00:00 2001 From: Filip Date: Sat, 19 Nov 2022 13:33:25 +0000 Subject: [PATCH 7/7] Update App.jsx --- src/App.jsx | 23 +++++++++++++---------- 1 file changed, 13 insertions(+), 10 deletions(-) diff --git a/src/App.jsx b/src/App.jsx index e465aee..2569455 100644 --- a/src/App.jsx +++ b/src/App.jsx @@ -28,8 +28,6 @@ const cards = [ ]; function App() { - const [cards, setCards] = useState([]); - const [filteredCards, setFilteredCards] = useState(cards); const cardsJSX = filteredCards.map((card) => ( @@ -48,10 +46,10 @@ function App() { .then((response) => response.json()) .then((data) => { console.log(data); - setCards(data.items); + setFilteredCards(data.items); }); }, []); - + // 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 return ( <> @@ -59,12 +57,17 @@ function App() { { console.log(value); - const items = cards.filter( - (item) => - item.name.includes(value) || item.description.includes(value) - ); - console.log(filteredCards); - setFilteredCards(items); + fetch(`https://api.github.com/search/repositories?q=${value}`, { + headers: { + Authorization: + "Bearer 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", + }, + }) + .then((response) => response.json()) + .then((data) => { + console.log(data); + setFilteredCards(data.items); + }); }} /> {/* {render} */}