Merge branch 'reactplay:main' into reactplay-pwa

src/plays/git-hub-profile-search/GithubProfileSearch.js

@@ -0,0 +1,36 @@
+import PlayHeader from 'common/playlists/PlayHeader';
+import './styles.css';
+import Input from './components/Input';
+import Results from './components/Results';
+import { ResultContextProvider } from './context/ResultContextProvider';
+
+// WARNING: Do not change the entry componenet name
+function GithubProfileSearch(props) {
+
+ // Your Code Start below.
+
+ return (
+ <>
+ <div className="play-details nirban-github-profile">
+ <PlayHeader play={props} />
+ <div className="play-details-body">
+ {/* Your Code Starts Here */}
+ <div className='play-body nirban-github-profile-body'>
+ <ResultContextProvider>
+ <h1 className='play-heading nirban-github-profile-heading'>
+ Github Profile Search
+ </h1>
+ <Input />
+ <div className='nirban-github-profile-result'>
+ <Results />
+ </div>
+ </ResultContextProvider>
+ </div>
+ {/* Your Code Ends Here */}
+ </div>
+ </div>
+ </>
+ );
+}
+
+export default GithubProfileSearch;

src/plays/git-hub-profile-search/Readme.md

@@ -0,0 +1,22 @@
+# GitHub Profile Search
+
+A play where you can search anybody's public github profile. I have made it using Context Api for showing basic implementation which you can practice in order to get comfortable with using Context Api for bigger projects.
+
+The search result provides you with one user whose username matches with his/her profile link, bio, followers, as well as the current 5 public repositories made by the user starting from the latest.
+
+## Play Demographic
+
+- Language: js
+- Level: Beginner
+
+## Creator Information
+
+- User: nirban256
+- Gihub Link: https://github.com/nirban256
+- Blog: NA
+- Video: NA
+
+
+## Resources
+
+[GitHub RESST API](https://docs.github.com/rest)

src/plays/git-hub-profile-search/components/Input.jsx

@@ -0,0 +1,26 @@
+import React, { useState } from 'react';
+import { useResultContext } from '../context/ResultContextProvider';
+
+const Input = () => {
+
+ const { getRepos, getUser } = useResultContext();
+ const [username, setUsername] = useState('');
+
+ const handleSubmit = (e) => {
+ e.preventDefault();
+ getUser(username);
+ getRepos(username);
+ setUsername('');
+ }
+
+ return (
+ <form className='nirban-github-profile-form'>
+ <input tabIndex={0} autoFocus value={username} placeholder="Search Username" onChange={(e) => setUsername(e.target.value)} className="nirban-github-profile-search" />
+ <button type="submit" onClick={handleSubmit} className="nirban-github-profile-btn">
+ Search
+ </button>
+ </form>
+ )
+}
+
+export default Input

src/plays/git-hub-profile-search/components/Results.jsx

@@ -0,0 +1,71 @@
+import React from 'react';
+import { useResultContext } from '../context/ResultContextProvider';
+
+const Results = () => {
+
+ const { results, repoDetails } = useResultContext();
+
+ const showRepo = (repo) => {
+ return (
+ <div key={repo.id}>
+ <h2 className='nirban-github-profile-repo-link'>
+ <strong>
+ <a href={`${repo.html_url}`} target="_blank" rel='noreferrer'>
+ {repo.name.length > 15 ? repo.name.slice(0, 15) : repo.name}
+ </a>
+ </strong>
+ </h2>
+ </div>
+ )
+ }
+
+ return (
+
+ <div>
+ {results ? (
+ <div className="nirban-github-profile-results" >
+ <div className='nirban-github-profile-results-body'>
+ <div>
+ <div className='nirban-github-profile-details'>
+ <img src={`${results.avatar_url}`} alt={`${results.name}`} className="nirban-github-profile-avatar" />
+ <a href={`${results.html_url}`} target="_blank" rel='noreferrer'>
+ <h2 className='nirban-github-profile-link'>{results.name === '' ? results.login : results.name}</h2>
+ </a>
+ </div>
+ <div className="nirban-github-profile-results-info">
+ <div>
+ {results.bio === '' ? '' : <h2 className='nirban-github-profile-bio'><strong>Bio:</strong> {results.bio}</h2>}
+ {results.location === '' ? '' : <p className='nirban-github-profile-location'><strong>Location:</strong> {results.location}</p>}
+ {results.twitter_username === '' ? '' : <p className='nirban-github-profile-twitter'><strong>Twitter:</strong> <a href={`https://twitter.com/${results.twitter_username}`} target="_blank" rel='noreferrer'>{results.twitter_username}</a></p>}
+ <ul className='nirban-github-profile-socials'>
+ <li><strong>{results.followers}</strong> Followers</li>
+ <li><strong>{results.following}</strong> Following</li>
+ <li><strong>{results.public_repos}</strong> Repos</li>
+ </ul>
+ </div>
+ <div>
+ <h2 className='nirban-github-profile-repos-heading'>
+ Latest repositories
+ </h2>
+ <div className='nirban-github-profile-repos'>
+ {repoDetails?.map(showRepo).slice(0, 5)}
+ </div>
+ </div>
+ </div>
+ </div>
+ </div>
+ </div>
+ )
+ :
+ (
+ <div className='nirban-github-profile-no-user'>
+ <p>
+ No users to show
+ </p >
+ </div >
+ )}
+ </div>
+ )
+}
+
+export default Results

src/plays/git-hub-profile-search/context/ResultContextProvider.jsx

@@ -0,0 +1,37 @@
+import { createContext, useState, useContext } from "react";
+import axios from "axios";
+
+const ResultContext = createContext();
+const baseUrl = 'https://api.github.com/users/';
+
+export const ResultContextProvider = ({ children }) => {
+
+ const [results, setResults] = useState('');
+ const [repoDetails, setRepoDetails] = useState([]);
+
+ const getUser = (user) => {
+ axios({
+ method: "get",
+ url: `${baseUrl}${user}`,
+ }).then(res => {
+ setResults(res.data);
+ })
+ }
+
+ const getRepos = (user) => {
+ axios({
+ method: "get",
+ url: `${baseUrl}${user}/repos?sort=created`
+ }).then(res => {
+ setRepoDetails(res.data);
+ })
+ }
+
+ return (
+ <ResultContext.Provider value={{ getRepos, getUser, results, repoDetails }}>
+ {children}
+ </ResultContext.Provider>
+ )
+}
+
+export const useResultContext = () => useContext(ResultContext);

src/plays/git-hub-profile-search/styles.css

@@ -0,0 +1,190 @@
+/* enter stlyes here */
+.nirban-github-profile-heading {
+ display: flex;
+ justify-content: center;
+ margin-bottom: 1rem;
+ font-size: 2rem;
+ color: #010326;
+ font-weight: 600;
+}
+
+.nirban-github-profile-form {
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ margin-bottom: 2rem;
+ flex-direction: column;
+}
+
+.nirban-github-profile-search {
+ border: none;
+ outline: none;
+ margin-bottom: 1.5rem;
+ padding: 10px;
+ border-radius: 6px;
+ box-shadow: 0px 0px 4px 4px #01032609;
+}
+
+.nirban-github-profile-search ::placeholder {
+ color: #010326;
+}
+
+.nirban-github-profile-search:focus {
+ box-shadow: 0px 0px 4px 4px #01032638;
+}
+
+.nirban-github-profile-btn {
+ background-color: #00f1feab;
+ color: #010326;
+ padding: 4px 15px;
+ border-radius: 10px;
+ box-shadow: 0px 0px 4px 4px rgba(173, 169, 169, 0.377);
+}
+
+.nirban-github-profile-btn:hover {
+ background-color: #00f1fe;
+}
+
+.nirban-github-profile-result {
+ display: flex;
+ justify-content: center;
+}
+
+.nirban-github-profile-results {
+ max-width: 500px;
+ background: #ffff;
+ padding: 1rem;
+ border-radius: 25px;
+ box-shadow: 0px 0px 4px 4px rgba(173, 169, 169, 0.377);
+ color: #010326;
+ font-weight: 500;
+}
+
+.nirban-github-profile-results-info {
+ padding-left: 1rem;
+}
+
+.nirban-github-profile-bio,
+.nirban-github-profile-location,
+.nirban-github-profile-twitter {
+ margin-bottom: 0.5rem;
+}
+
+.nirban-github-profile-details {
+ display: flex;
+ justify-content: space-evenly;
+ align-items: center;
+ margin-bottom: 1rem;
+}
+
+.nirban-github-profile-link {
+ font-size: x-large;
+ font-weight: 600;
+ text-decoration: underline;
+}
+
+.nirban-github-profile-avatar {
+ border-radius: 50%;
+ border: 10px solid #fff;
+ max-height: 125px;
+ max-width: 125px;
+}
+
+.nirban-github-profile-socials {
+ display: flex;
+ margin-bottom: 1rem;
+}
+
+.nirban-github-profile-socials>:first-child {
+ margin-right: 1rem;
+}
+
+.nirban-github-profile-socials>:nth-child(2) {
+ margin: 0 1rem;
+}
+
+.nirban-github-profile-socials>:last-child {
+ margin-left: 1rem;
+}
+
+.nirban-github-profile-repos-heading {
+ font-size: 1.4rem;
+ font-weight: 600;
+ text-align: center;
+ margin-bottom: 0.25rem;
+ margin-top: 1rem;
+}
+
+.nirban-github-profile-repos {
+ display: grid;
+ grid-template-columns: repeat(2, 1fr);
+}
+
+.nirban-github-profile-repo-link {
+ margin-top: 0.5rem;
+ margin-bottom: 0.5rem;
+ text-align: center;
+ text-decoration: underline;
+}
+
+.nirban-github-profile-no-user {
+ color: #010326;
+ font-weight: 400;
+ font-size: 1.2rem;
+ margin-top: 2rem;
+ background: #fff;
+ padding: 1rem 1.5rem;
+ border-radius: 10px;
+}
+
+/* Media Queries */
+
+@media screen and (max-width: 600px) {
+
+ .nirban-github-profile-results {
+ max-width: 450px;
+ }
+
+ .nirban-github-profile-details {
+ flex-direction: column;
+ }
+
+ .nirban-github-profile-repos-heading {
+ text-align: left;
+ }
+
+ .nirban-github-profile-repos {
+ display: block;
+ }
+
+ .nirban-github-profile-repo-link {
+ text-align: left;
+ }
+}
+
+@media screen and (max-width: 450px) {
+
+ .nirban-github-profile-top {
+ text-align: center;
+ }
+
+ .nirban-github-profile-results {
+ max-width: 300px;
+ }
+
+ .nirban-github-profile-socials {
+ display: block;
+ }
+
+ .nirban-github-profile-socials>:first-child {
+ margin-right: 0;
+ }
+
+ .nirban-github-profile-socials>:nth-child(2) {
+ margin: 0;
+ }
+
+ .nirban-github-profile-socials>:last-child {
+ margin-left: 0;
+ }
+}