feat: added input for response size

- Included all input inside form element.
- Also made a few style changes to the form and its children elements.
- updated API response

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

@@ -13,7 +13,10 @@ function GitHubUserSearch(props) {
  const play = getPlayById(id);
 
  // Your Code Start below.
- const [query, setQuery] = useState("");
+ const [input, setInput] = useState({
+ query: "",
+ response_size: 30,
+ });
  const [resData, setData] = useState({
  data: null,
  remaining_searches: 0,
@@ -47,7 +50,7 @@ function GitHubUserSearch(props) {
 
  const getUsersData = async () => {
  const res = await axios.get(
- `https://api.github.com/search/users?q=${query}&per_page=15`
+ `https://api.github.com/search/users?q=${input.query}&per_page=${input.response_size}`
  );
  setData((prev) => ({...prev, data: res.data.items}));
  };
@@ -74,40 +77,77 @@ function GitHubUserSearch(props) {
  }
  };
 
+ //add useEffect to listen to enter key that would do the same thing as the search button
+
  return (
  <>
  <div className="play-details">
  <PlayHeader play={play} />
  <div className="play-details-body">
  {/* Your Code Starts Here */}
  <div className=" w-full flex items-center justify-center flex-col gap-4">
- <input
- className=" rounded-lg p-2 text-center"
- type="search"
- value={query}
- placeholder="Enter query here"
- onChange={(e) => setQuery(e.target.value)}
- />
- <button
- className="bg-[#00f2fe] p-2 rounded-xl disabled:text-gray-500 disabled:cursor-not-allowed disabled:bg-[#00bbc5]"
- onClick={getGitHubData}
- disabled={query === "" || dataFetchStates.error ? true : false}
+ <form
+ className="flex flex-col gap-2"
+ onSubmit={(e) => e.preventDefault()}
  >
- Search
- </button>
- {!resData.remaining_searches < 1 && (
+ <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">
+ How many matching user results can I show ?
+ </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}))
+ }
+ // required
+ />
+ <p className="text-xs text-neutral-500 text-center">
+ Default value is 30
+ </p>
+ <button
+ className="bg-[#00f2fe] p-2 rounded-xl disabled:text-gray-500 disabled:cursor-not-allowed disabled:bg-[#00bbc5]"
+ onClick={() => {
+ input.query !== "" && getGitHubData();
+ }}
+ disabled={dataFetchStates.error ? true : false}
+ >
+ Search
+ </button>
+ </form>
+ {resData.remaining_searches >= 1 && (
  <p>No. of searches remaining : {resData.remaining_searches}</p>
  )}
  {dataFetchStates.loading && <h2> L O A D I N G . . .</h2>}
- {dataFetchStates.error && (
-  <h2>
-  You have exhausted your search limit. Try again after{" "}
- {resData.time_until_reset}
-  </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 Profiles
+ No matching GitHub User Profile
  </h1>
  )}
  {!dataFetchStates.error && (