Feat new react-play: GitHub User Search

package.json

@@ -8,6 +8,7 @@
     "@types/lodash": "^4.14.182",
     "@types/react": "^18.0.6",
     "@types/react-dom": "^18.0.2",
+    "axios": "^0.27.2",
     "date-fns": "^2.28.0",
     "firebase": "^9.8.2",
     "graphql": "^16.5.0",

src/meta/play-meta.js

@@ -24,7 +24,8 @@ import {
   DynamicRoutes,
   SimpleLiveChat,
   FlipCardEffect,
-//import play here
+  GitHubUserSearch,
+  //import play here
 } from "plays";
 
 export const plays = [
@@ -427,5 +428,21 @@ export const plays = [
     video: "",
     language: "js",
   },
-   //replace new play item here
+  {
+    id: "pl-github-user-search",
+    name: "GitHub User Search",
+    description: "A simple ReactJS application to search for GitHub users.",
+    component: () => {
+      return <GitHubUserSearch />;
+    },
+    path: "/plays/github-user-search",
+    level: "Beginner",
+    tags: "JSX,Tailwind,useState,Axios",
+    github: "TejasShekar",
+    cover: "",
+    blog: "",
+    video: "",
+    language: "js",
+  },
+  //replace new play item here
 ];

src/plays/expanding-cards/ExpandingCards.jsx

@@ -1,10 +1,9 @@
 import PlayHeader from "common/playlists/PlayHeader";
 import "./ExpandingCards.css";
-import { useState } from "react";
+import {useState} from "react";
 import data from "./Expanding-Card-Images";
 
 function ExpandingCards(props) {
-
   // Your Code Start below.
 
   const [activeCard, setActiveCard] = useState(0);

src/plays/github-user-search/GitHubUserCard.jsx

@@ -0,0 +1,15 @@
+export const GitHubUserCard = ({username, avatar, link}) => {
+  return (
+    <a
+      href={link}
+      target="_blank"
+      rel="noreferrer"
+      style={{backgroundImage: `url(${avatar})`}}
+      className=" bg-cover bg-center h-[15rem] w-[15rem] rounded-lg flex flex-col justify-end"
+    >
+      <h1 className="text-2xl text-center xs:bg-black p-2 w-full rounded-lg text-white lg:h-full lg:opacity-0 lg:hover:opacity-80 lg:hover:bg-black ">
+        {username}
+      </h1>
+    </a>
+  );
+};

src/plays/github-user-search/GitHubUserSearch.jsx

@@ -0,0 +1,162 @@
+import PlayHeader from "common/playlists/PlayHeader";
+import {useState} from "react";
+import axios from "axios";
+import {GitHubUserCard} from "./GitHubUserCard";
+
+function GitHubUserSearch(props) {
+  // Your Code Start below.
+  const [input, setInput] = useState({
+    query: "",
+    response_size: 30,
+  });
+  const [resData, setData] = useState({
+    data: null,
+    remaining_searches: 0,
+    time_until_reset: null,
+  });
+  const [dataFetchStates, setDataFetchStates] = useState({
+    loading: false,
+    error: false,
+  });
+
+  const getResetTime = (time) => {
+    const newTime = new Date(time * 1000);
+    return newTime.toLocaleTimeString();
+  };
+
+  const getRateLimitData = async () => {
+    const rate_limit = await axios.get("https://api.github.com/rate_limit");
+    const reset_time = getResetTime(rate_limit.data.resources.search.reset);
+    const reset_count = rate_limit.data.resources.search.remaining - 1;
+    if (reset_count > 1)
+      setDataFetchStates((prev) => ({
+        ...prev,
+        error: false,
+      }));
+    setData((prev) => ({
+      ...prev,
+      remaining_searches: reset_count,
+      time_until_reset: reset_time,
+    }));
+  };
+
+  const getUsersData = async () => {
+    const res = await axios.get(
+      `https://api.github.com/search/users?q=${input.query}&per_page=${input.response_size}`
+    );
+    setData((prev) => ({...prev, data: res.data.items}));
+  };
+
+  const getGitHubData = async () => {
+    try {
+      setDataFetchStates((prev) => ({
+        ...prev,
+        loading: true,
+      }));
+      await getRateLimitData();
+      await getUsersData();
+      setDataFetchStates((prev) => ({
+        ...prev,
+        loading: false,
+      }));
+    } catch (error) {
+      setDataFetchStates((prev) => ({
+        ...prev,
+        loading: false,
+        error: true,
+      }));
+      setData((prev) => ({...prev, data: null}));
+    }
+  };
+
+  return (
+    <>
+      <div className="play-details">
+        <PlayHeader play={props} />
+        <div className="play-details-body">
+          {/* Your Code Starts Here */}
+          <div className=" w-full flex items-center justify-center flex-col gap-4">
+            <form
+              className="flex flex-col gap-2"
+              onSubmit={(e) => e.preventDefault()}
+            >
+              <label htmlFor="user_name" className="text-center">
+                Who are you searching for ?{" "}
+              </label>
+              <input
+                id="user_name"
+                className=" rounded-lg p-2 text-center"
+                type="search"
+                inputMode="text"
+                value={input.query}
+                placeholder="Enter query here"
+                onChange={(e) =>
+                  setInput((prev) => ({...prev, query: e.target.value}))
+                }
+                required
+                autoFocus
+              />
+              <label htmlFor="response_size">
+                Maximum number of results you want to see at once:
+              </label>
+              <input
+                id="response_size"
+                className=" rounded-lg p-2 text-center"
+                type="number"
+                inputMode="numeric"
+                min="1"
+                max="100"
+                value={input.response_size}
+                onChange={(e) =>
+                  setInput((prev) => ({...prev, response_size: e.target.value}))
+                }
+              />
+              <p className="text-xs text-neutral-500 text-center">
+                Default value is 30
+              </p>
+              <button
+                type="submit"
+                className="bg-[#00f2fe] p-2 rounded-xl disabled:text-gray-500 disabled:cursor-not-allowed disabled:bg-[#00bbc5]"
+                onClick={() => {
+                  input.query !== "" && getGitHubData();
+                }}
+              >
+                Search
+              </button>
+            </form>
+            {resData.remaining_searches >= 0 && (
+              <p>No. of searches remaining : {resData.remaining_searches}</p>
+            )}
+            {dataFetchStates.loading && <h2> L O A D I N G . . .</h2>}
+
+            <h2 className=" text-red-500">
+              {dataFetchStates.error &&
+                `You have exhausted your search limit. Try again after ${resData.time_until_reset}`}
+            </h2>
+
+            {resData?.data?.length === 0 && (
+              <h1 className="text-3xl text-center">
+                No matching GitHub User Profile
+              </h1>
+            )}
+            {!dataFetchStates.error && (
+              <div className="grid gap-2 grid-cols-[repeat(auto-fit,minmax(15rem,1fr))] w-full place-items-center">
+                {resData?.data?.map(({id, login, avatar_url, html_url}) => (
+                  <GitHubUserCard
+                    key={id}
+                    username={login}
+                    avatar={avatar_url}
+                    link={html_url}
+                  />
+                ))}
+              </div>
+            )}
+          </div>
+          {/* Your Code Ends Here */}
+        </div>
+      </div>
+    </>
+  );
+}
+
+export default GitHubUserSearch;

src/plays/github-user-search/Readme.md

@@ -0,0 +1,23 @@
+# GitHub User Search
+
+A simple ReactJS application to search for GitHub users. You can use this app to find users on GitHub by entering your search query and the number of profiles you want to see for each search.
+
+The results are arranged in the default order of most matching to least matching User name.
+
+## Play Demographic
+
+- Language: JS
+- Level: Beginner
+
+## Creator Information
+
+- User: Tejas Shekar
+- GitHub Link: https://github.com/TejasShekar
+
+## Consideration
+
+- GitHub Search API has a default response size of 30 when user does not input any value for the response size.
+
+## Resources
+
+[GitHub Search API](https://docs.github.com/en/rest/search)

src/plays/index.js

@@ -25,4 +25,5 @@ export { default as DynamicRoutes } from "plays/dynamic-routes/DynamicRoutes";
 export { default as Quizeo } from "plays/quizeo/Quizeo";
 export { default as SimpleLiveChat } from 'plays/simple-live-chat/SimpleLiveChat';
 export { default as FlipCardEffect } from 'plays/flip-card-effect/FlipCardEffect';
+export { default as GitHubUserSearch } from 'plays/github-user-search/GitHubUserSearch';
 //add export here

src/plays/simple-live-chat/firebase.js

@@ -1,4 +1,4 @@
-import { initializeApp } from "firebase/app";
+import {initializeApp} from "firebase/app";
 
 const firebaseConfig = {
   apiKey: process.env.REACT_APP_FIREBASE_API_KEY,

tailwind.config.js

@@ -1,9 +1,26 @@
 module.exports = {
-  content: [
-    "./src/**/*.{js,jsx,ts,tsx}",
-  ],
+  content: ["./src/**/*.{js,jsx,ts,tsx}"],
   theme: {
+    screens: {
+      xs: {min: "310px"},
+      // => @media (min-width: 640px and max-width: 767px) { ... }
+
+      sm: {min: "640px"},
+      // => @media (min-width: 640px and max-width: 767px) { ... }
+
+      md: {min: "768px"},
+      // => @media (min-width: 768px and max-width: 1023px) { ... }
+
+      lg: {min: "1024px"},
+      // => @media (min-width: 1024px and max-width: 1279px) { ... }
+
+      xl: {min: "1280px"},
+      // => @media (min-width: 1280px and max-width: 1535px) { ... }
+
+      "2xl": {min: "1536px"},
+      // => @media (min-width: 1536px) { ... }
+    },
     extend: {},
   },
   plugins: [],
-}
+};