news added

.netlify/state.json

@@ -0,0 +1,3 @@
+{
+	"siteId": "d17b7f4e-b594-4503-b1be-d45e20b435c1"
+}

dist/bundle-wp.js.LICENSE.txt

@@ -0,0 +1,41 @@
+/*
+object-assign
+(c) Sindre Sorhus
+@license MIT
+*/
+
+/** @license React v0.20.2
+ * scheduler.production.min.js
+ *
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+/** @license React v16.13.1
+ * react-is.production.min.js
+ *
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+/** @license React v17.0.2
+ * react-dom.production.min.js
+ *
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+/** @license React v17.0.2
+ * react.production.min.js
+ *
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */

netlify.toml

@@ -0,0 +1,2 @@
+[build]
+    publish="dist"

src/components/Alert.js

@@ -1,14 +1,20 @@
-import React from 'react'
+import React, {useContext} from 'react'
+import AContext from "../context/alert/AContext"
 
-export const Alert = (props) => {
+
+export const Alert = () => {
+    const {alert} = useContext(AContext);
+
     return (
-        props.alert != null &&(
-            <div className="container my-2">
-                <div className={`alert alert-${props.alert.type} alert-dismissible fade show`}>{props.alert.msg}
-                    <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
+        <>
+            {alert != null && 
+                <div className="container my-2">
+                    <div className={`alert alert-${alert.type} alert-dismissible fade show`}>{alert.msg}
+                        <button type="button" className="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
+                    </div>
                 </div>
-            </div>
-        )
+            }
+        </>
     )
 }
 

src/components/App.js

@@ -1,91 +1,39 @@
-import React, { Component, Fragment } from 'react'
+import React from 'react'
 import { BrowserRouter, Route, Switch, Link, NavLink } from 'react-router-dom'
+
 import Navbar from './Navbar'
-import Search from './Search'
-import Users from './Users'
+import Home from './Home'
 import Alert from './Alert'
 import UserDetails from './UserDetails'
-import axios from 'axios'
-
-
-export class App extends Component {
-    constructor(props){
-        super(props)
-
-        this.searchUser = this.searchUser.bind(this);
-        this.cleanResults = this.cleanResults.bind(this);
-        this.setAlert = this.setAlert.bind(this);
-        this.getUser = this.getUser.bind(this);
-
-        this.state={
-            loading :false,
-            users:[],
-            user: {},
-            alert: null
-
-        }
-    }
-
-    searchUser(keyword){
-        this.setState({loading: true});
-
-        axios.get(`https://api.github.com/search/users?q=${keyword}`).then(res=>
-        this.setState({users:res.data.items, loading:false}));
-    }
-
-    getUser(username) {
-        this.setState({loading: true});
-        setTimeout(() => {
-            axios
-                .get(`https://api.github.com/users/${username}`)
-                .then(res => this.setState({user: res.data, loading: false}));
-        }, 1000);   
-    }
-
-
-    cleanResults(keyword){
-        this.setState({users: []})
-    }
-
-    setAlert(msg, type){
-        this.setState({
-            alert:{msg, type}
-        })
-
-        setTimeout(() => {
-            this.setState({
-                alert:null
-            })
-        }, 3000);
-    }
-
-
-    render() {
-        return (
-            <BrowserRouter>
-                <Navbar />
-                <Alert alert= {this.state.alert}/>
-                <Switch>
-                        <Route exact path="/" render={ props=> (
-                                <>
-                                    <Search 
-                                        searchUserq={this.searchUser} 
-                                        cleanResults={this.cleanResults} 
-                                        clearButtonStatus = {this.state.users.length > 0 ? true : false}
-                                        setAlert={this.setAlert}
-                                        />
-                                    <Users users={this.state.users} loading={this.state.loading}/>
-                                </>
-                            )
-                        } />
-
-                        <Route path="/user/:login" render= {props => (
-                            <UserDetails {...props} getUser= {this.getUser} user={this.state.user} loading={this.state.loading}/>
-                        )} />
-                </Switch>
-            </BrowserRouter>
-        )
-    }
+import NotFound from './NotFound'
+
+import State from "../context/github/State"
+import AState from "../context/alert/AState"
+
+const App=()=> {
+    return (
+        <State> {/*State.js de tanımlanan Context.provider value larına diğer componentlerin ulaşması için gerekiyor.*/}
+            <AState>
+                <BrowserRouter>
+                    <Navbar />
+                    <Alert/>
+                    <Switch>
+                            {/* <Route exact path="/" render={props=> (
+                                    <>
+                                        <Search/>
+                                        <Users/>
+                                    </>
+                                )}/>  */
+                            }
+                            <Route exact path="/" component={Home}/>
+
+                            <Route path="/user/:login" component={UserDetails}/>
+                            <Route component={NotFound}/>
+                    </Switch>
+                </BrowserRouter>
+            </AState>
+        </State>
+    )
 }
 
-export default App
+export default App;

src/components/Home.js

@@ -0,0 +1,14 @@
+import React from "react";
+import Search from './Search'
+import Users from './Users'
+
+const Home=()=>{
+    return(
+        <>
+            <Search/>
+            <Users/>
+        </>
+    )
+}
+
+export default Home;

src/components/NotFound.js

@@ -0,0 +1,11 @@
+import React from "react";
+
+const NotFound= ()=>{
+    return(
+        <div className="container pt-3">
+            <h1>404 Not Found</h1>
+        </div>
+    )
+}
+
+export default NotFound;

src/components/Search.js

@@ -1,9 +1,15 @@
-import React, {useState} from 'react'
-//React hook state 
-const Search =({setAlert, searchUserq, clearButtonStatus, cleanResults}) => { //Destructuring
-
-    const [keyword, setKeyword]= useState('');
+import React, {useState, useReducer, useContext} from 'react';
+import Context from '../context/github/Context';
+import AContext from "../context/alert/AContext";
+
+const Search =() => { 
+    //Destructuring
+    const {searchUsers, cleanResults, users}= useContext(Context); //State.js deki reducer metotlarına her yerden kullanılmasını sağlıyor.
+    const {setAlert}= useContext(AContext);
 
+    //Function component de state kullanılmasının sağlıyor(Hook)  
+    const [keyword, setKeyword]= useState('');
+
     const onChange=(e)=>{
         setKeyword(e.target.value);
     }
@@ -13,11 +19,10 @@ const Search =({setAlert, searchUserq, clearButtonStatus, cleanResults}) => { //
         if(keyword==""){
             setAlert("Please write a name", "danger");
         }else{
-            searchUserq(keyword);
+            searchUsers(keyword);
             setKeyword("");
         }
     }
-
 
     return (
         <div className="container my-3">
@@ -29,12 +34,11 @@ const Search =({setAlert, searchUserq, clearButtonStatus, cleanResults}) => { //
                     </div>
                 </div>
             </form>
-            {clearButtonStatus && <button className="btn btn-secondary btn-sm col-md-12 mt-2" onClick={cleanResults}>Clean results</button>}
-
+            {users.length > 0 &&
+                <button className="btn btn-secondary btn-sm col-md-12 mt-2" onClick={cleanResults}>Clean results</button>
+            }
         </div>
-
     )
-
 }
 
 export default Search

src/components/User.js

@@ -2,20 +2,19 @@ import React, { Component } from 'react'
 import {Link} from 'react-router-dom'
 
 export default class User extends Component {
-
-
     render() {
-        const {login,avatar_url,html_url} = this.props.user;
+        const {login, avatar_url, html_url} = this.props.user;
+
         return (
-                <div className="col-md-4 col-sm-6 col-lg-3">
-                    <div className="card mt-2">
-                        <img src={avatar_url} alt="" className="img-fluid"/>
-                        <div className="card-body">
-                            <h5 className="card-title">{login}</h5>
-                            <Link to={`/user/${login}`} className="btn btn-primary btn-sm">Go Profile</Link>
-                        </div>
+            <div className="col-md-4 col-sm-6 col-lg-3">
+                <div className="card mt-2">
+                    <img src={avatar_url} alt="" className="img-fluid"/>
+                    <div className="card-body">
+                        <h5 className="card-title">{login}</h5>
+                        <Link to={`/user/${login}`} className="btn btn-primary btn-sm">Go Profile</Link>
                     </div>
                 </div>
+            </div>
         )
     }
 }

src/components/UserDetails.js

@@ -1,16 +1,21 @@
-import React, { useEffect } from 'react'
+import React, { useEffect, useContext } from 'react'
 import Loading from './Loading'
+import Context from '../context/github/Context';
+import User from './User';
 
-const UserDetails =({getUser, match, loading, user })=> { //Destructuring
+const UserDetails =({match})=> { //Destructuring
+
+    const {getUser, laoding, user} = useContext(Context);
+
+    //Function component de didmount didupdate metotlarının kullanılmasının sağlıyor(Hook)  
     useEffect(()=> {
         getUser(match.params.login);
-    }, [])
-
+    }, []) //[] olunca sadece did mount için çalışır, spesific değer verildiğnde sadece o değişince çalışır
 
-
-    const {name,avatar_url,location,html_url,bio,blog,followers,following,public_repos} = user; //Destructuring
 
-    if(loading) return <Loading />
+    const {name, avatar_url, location, html_url, bio,blog, followers, following, public_repos} = user; //Destructuring
+
+    if(laoding) return <Loading />
 
     return (
         <div className="container mt-3">
@@ -45,17 +50,16 @@ const UserDetails =({getUser, match, loading, user })=> { //Destructuring
                                     </>
                             }
                             <div>
-                                <span className="badge badge-primary m-1">Followers: {followers}</span>
-                                <span className="badge badge-danger m-1">Following: {following}</span>
-                                <span className="badge badge-success m-1">Repos: {public_repos}</span>
+                                <span className="badge bg-primary m-1">Followers: {followers}</span>
+                                <span className="badge bg-secondary m-1">Following: {following}</span>
+                                <span className="badge bg-success m-1">Repos: {public_repos}</span>
                             </div>
                         </div>
                     </div>
                 </div>
             </div>
         </div>
     )
-
 }
 
 export default UserDetails