forked from reactplay/react-play
-
Notifications
You must be signed in to change notification settings - Fork 0
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
✨ Now tried the separated play header for counter app
- Loading branch information
Showing
6 changed files
with
157 additions
and
60 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,29 @@ | ||
|
|
||
|
|
||
| import { useState, useEffect } from 'react'; | ||
|
|
||
| const useGitHub = (github) => { | ||
| const [data, setData] = useState(); | ||
| const [error, setError] = useState(); | ||
| const [isLoading, setIsLoading] = useState(true); | ||
|
|
||
| useEffect(() => { | ||
| const fetchData = async () => { | ||
| setIsLoading(true); | ||
| try { | ||
| const response = await fetch(`https://api.github.com/users/${github}`); | ||
| const responseData = await response.json(); | ||
| setData(responseData); | ||
| setIsLoading(false); | ||
| } catch (error) { | ||
| setError(error); | ||
| setIsLoading(false); | ||
| } | ||
| }; | ||
| fetchData(); | ||
| }, [github]); | ||
|
|
||
| return { data, error, isLoading }; | ||
| }; | ||
|
|
||
| export default useGitHub; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,27 +1,52 @@ | ||
| import {useState} from 'react'; | ||
| import Counter from './Counter'; | ||
| import './counter.css'; | ||
| import PlayHeader from "common/playlists/PlayHeader"; | ||
| import { useState } from 'react'; | ||
| import { useLocation } from 'react-router-dom'; | ||
| import { getPlayById } from 'meta/play-meta'; | ||
| import Counter from "./Counter"; | ||
| import "./counter.css"; | ||
|
|
||
| function CounterApp() { | ||
| // The following code is to fetch the current play from the URL | ||
| const location = useLocation(); | ||
| const { id } = location.state; | ||
| const play = getPlayById(id); | ||
|
|
||
| const [input, setInput] = useState(""); | ||
| const [times, setTimes] = useState(33); | ||
| function register(){ | ||
| function register() { | ||
| let no_times = Number(input); | ||
| console.log(no_times) | ||
| console.log(no_times); | ||
| setTimes(no_times); | ||
| setInput(""); | ||
| } | ||
| return ( | ||
| <div className="counter-container"> | ||
| <h1>Counter</h1> | ||
| <p>A simple counter</p> | ||
| <p className="counter-desc">Specify the limit and click the circle below to increment the value until the limit has been reached. After that it will reset to zero.</p> | ||
| <div className="input_field"> | ||
| <input value={input} onChange={e => setInput(e.target.value)} className="no_of_times" type="text" /> | ||
| <button onClick={register}>Submit</button> | ||
| <> | ||
| <div className="play-details"> | ||
| <PlayHeader play={play} /> | ||
| <div className="play-details-body"> | ||
| <div className="counter-container"> | ||
| <h1>Counter</h1> | ||
| <p>A simple counter</p> | ||
| <p className="counter-desc"> | ||
| Specify the limit and click the circle below to increment the | ||
| value until the limit has been reached. After that it will reset | ||
| to zero. | ||
| </p> | ||
| <div className="input_field"> | ||
| <input | ||
| value={input} | ||
| onChange={(e) => setInput(e.target.value)} | ||
| className="no_of_times" | ||
| type="text" | ||
| /> | ||
| <button onClick={register}>Submit</button> | ||
| </div> | ||
| <Counter times={times} /> | ||
| </div> | ||
| </div> | ||
| </div> | ||
| <Counter times={times}/> | ||
| </div> | ||
| </> | ||
| ); | ||
| } | ||
|
|
||
| export default CounterApp; | ||
| export default CounterApp; |