src/pages/Profile.js - hooks - valslava/react-practice_project

src/pages/Profile.js
76 строк3 KB
valslava2
get links to repos in Profile page
01 апр 2024, 00:22
01 апр 2024, 00:22e0c5b41
import React, { useContext, useEffect } from "react"
import { Link, useParams } from "react-router-dom" 
import { GithubContext } from "../context/github/githubContext"
import { Repos } from "../component/Repos"
  
export const Profile = () => {  
    const { urlName } = useParams() 
    const {getUser, getRepos, loading, user, repos} = useContext(GithubContext) 
    
    useEffect(() => {  
        getUser(urlName)
        getRepos(urlName)
        // eslint-disable-next-line 
    }, []) 
    
    if (loading) {
        return <p className="text-center">Loading...</p>
    }

    const {
        name, company, avatar_url, location,
        bio, blog, login, html_url, followers,
        following, public_repos, public_gists
    } = user
    return (  
        <>
            <Link to="/" className="btn btn-link">Go to Home Page</Link>

            <div className="card mb-4">
                <div className="card-body">
                    <div className="row">
                        <div className="col-sm-3 text-center">
                            <img src={avatar_url} alt={name} style={{width: '100px'}}></img>
                            <h1>{name}</h1>
                            {location && <p>Location: {location}</p>}
                        </div>

                        <div className="col">
                            {
                                bio && <>
                                    <h3>BIO</h3>
                                    <p>{bio}</p>
                                </>
                            }
                            <a  
                                href={html_url} 
                                target="_blank"
                                rel="noreferrer noopener"
                                className="btn btn-dark"
                            >Open Profile</a>
                            <ul>
                                {login && <li>
                                    <strong>Username: </strong> {login}
                                </li>}
                                {company && <li>
                                    <strong>Company: </strong> {company}
                                </li>}
                                {blog && <li>
                                    <strong>WebSite: </strong> {blog}
                                </li>}
                            </ul>

                            <div className="">Subscribers: {followers}</div>
                            <div className="">Subscribed?: {following}</div>
                            <div className="">Repositories: {public_repos}</div>
                            <div className="">Gists: {public_gists}</div>

                        </div>
                    </div>
                </div>
            </div>

            <Repos repos={repos}></Repos>
        </>  
    )  
}