react2-week1/eva

7_react/react2/week1/my-app/src/App.css

@@ -0,0 +1,68 @@
+/* App.css */
+body {
+ font-family: "Arial", sans-serif;
+ margin: 0;
+ padding: 0;
+ background-color: #f4f4f4;
+}
+
+.container {
+ max-width: 800px;
+ margin: 50px auto;
+ padding: 20px;
+ background-color: #fff;
+ box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
+ border-radius: 5px;
+}
+
+input {
+ padding: 10px;
+ font-size: 16px;
+ margin-right: 10px;
+}
+
+button {
+ padding: 10px 20px;
+ font-size: 16px;
+ background-color: #4caf50;
+ color: #fff;
+ border: none;
+ cursor: pointer;
+ border-radius: 5px;
+}
+
+button:hover {
+ background-color: #45a049;
+}
+
+ul {
+ list-style: none;
+ padding: 0;
+}
+
+li {
+ margin: 10px 0;
+ padding: 10px;
+ background-color: #f0f0f0;
+ border-radius: 5px;
+}
+
+p {
+ font-size: 16px;
+ margin: 10px 0;
+}
+
+.loading {
+ font-size: 18px;
+ color: #3498db;
+}
+
+.error {
+ font-size: 18px;
+ color: #e74c3c;
+}
+
+.no-results {
+ font-size: 18px;
+ color: #2ecc71;
+}

7_react/react2/week1/my-app/src/App.js

@@ -0,0 +1,42 @@
+// App.js
+import React, { useState } from "react";
+import { useGithubContext } from "./Context/GithubContext";
+import "./App.css";
+
+const App = () => {
+ const { users, loading, error, searchUsers } = useGithubContext();
+ const [query, setQuery] = useState("");
+
+ const handleSearch = () => {
+ searchUsers(query);
+ };
+
+ return (
+ <div>
+ <header>
+ <h1>Github User Searcher</h1>
+ </header>
+
+ <div>
+ <input
+ type="text"
+ value={query}
+ onChange={(e) => setQuery(e.target.value)}
+ />
+ <button onClick={handleSearch}>Search</button>
+
+ {loading && <p>Loading...</p>}
+ {error && <p>Error: {error}</p>}
+ {users.length === 0 && !loading && !error && <p>No results...</p>}
+
+ <ul>
+ {users.map((user) => (
+ <li key={user.id}>{user.login}</li>
+ ))}
+ </ul>
+ </div>
+ </div>
+ );
+};
+
+export default App;

7_react/react2/week1/my-app/src/Context/GithubContext.js

@@ -0,0 +1,64 @@
+// GithubContext.js
+import React, { createContext, useReducer, useContext } from "react";
+
+const GithubContext = createContext();
+
+const initialState = {
+ users: [],
+ loading: false,
+ error: null,
+};
+
+const githubReducer = (state, action) => {
+ switch (action.type) {
+ case "SEARCH_LOADING":
+ return { ...state, loading: true, error: null };
+ case "SEARCH_SUCCESS":
+ return { ...state, users: action.payload, loading: false, error: null };
+ case "SEARCH_ERROR":
+ return { ...state, loading: false, error: action.payload };
+ default:
+ return state;
+ }
+};
+
+const GithubProvider = ({ children }) => {
+ const [state, dispatch] = useReducer(githubReducer, initialState);
+
+ const searchUsers = async (query) => {
+ try {
+ dispatch({ type: "SEARCH_LOADING" });
+ const response = await fetch(
+ `https://api.github.com/search/users?q=${query}`
+ );
+ const data = await response.json();
+
+ if (data.items) {
+ dispatch({ type: "SEARCH_SUCCESS", payload: data.items });
+ } else {
+ dispatch({ type: "SEARCH_ERROR", payload: "No results..." });
+ }
+ } catch (error) {
+ dispatch({
+ type: "SEARCH_ERROR",
+ payload: `Error fetching: ${error.message}`,
+ });
+ }
+ };
+
+ return (
+ <GithubContext.Provider value={{ ...state, searchUsers }}>
+ {children}
+ </GithubContext.Provider>
+ );
+};
+
+const useGithubContext = () => {
+ const context = useContext(GithubContext);
+ if (!context) {
+ throw new Error("useGithubContext must be used within a GithubProvider");
+ }
+ return context;
+};
+
+export { GithubProvider, useGithubContext };

7_react/react2/week1/my-app/src/components/useGithubContext

@@ -0,0 +1,35 @@
+// App.js
+import React, { useState } from "react";
+import { useGithubContext } from "../Context/GithubContext";
+
+const App = () => {
+ const { users, loading, error, searchUsers } = useGithubContext();
+ const [query, setQuery] = useState("");
+
+ const handleSearch = () => {
+ searchUsers(query);
+ };
+
+ return (
+ <div>
+ <input
+ type="text"
+ value={query}
+ onChange={(e) => setQuery(e.target.value)}
+ />
+ <button onClick={handleSearch}>Search</button>
+
+ {loading && <p>Loading...</p>}
+ {error && <p>Error: {error}</p>}
+ {users.length === 0 && !loading && !error && <p>No results...</p>}
+
+ <ul>
+ {users.map((user) => (
+ <li key={user.id}>{user.login}</li>
+ ))}
+ </ul>
+ </div>
+ );
+};
+
+export default App;

7_react/react2/week1/my-app/src/index.css

@@ -0,0 +1,13 @@
+body {
+ margin: 0;
+ font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',
+ 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue',
+ sans-serif;
+ -webkit-font-smoothing: antialiased;
+ -moz-osx-font-smoothing: grayscale;
+}
+
+code {
+ font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New',
+ monospace;
+}

7_react/react2/week1/my-app/src/index.js

@@ -0,0 +1,14 @@
+// index.js
+import React from "react";
+import ReactDOM from "react-dom";
+import App from "./App";
+import { GithubProvider } from "./Context/GithubContext";
+
+ReactDOM.render(
+ <React.StrictMode>
+ <GithubProvider>
+ <App />
+ </GithubProvider>
+ </React.StrictMode>,
+ document.getElementById("root")
+);

7_react/react2/week1/my-app/src/reportWebVitals.js

@@ -0,0 +1,13 @@
+const reportWebVitals = onPerfEntry => {
+ if (onPerfEntry && onPerfEntry instanceof Function) {
+ import('web-vitals').then(({ getCLS, getFID, getFCP, getLCP, getTTFB }) => {
+ getCLS(onPerfEntry);
+ getFID(onPerfEntry);
+ getFCP(onPerfEntry);
+ getLCP(onPerfEntry);
+ getTTFB(onPerfEntry);
+ });
+ }
+};
+
+export default reportWebVitals;

7_react/react2/week1/my-app/src/setupTests.js

@@ -0,0 +1,5 @@
+// jest-dom adds custom jest matchers for asserting on DOM nodes.
+// allows you to do things like:
+// expect(element).toHaveTextContent(/react/i)
+// learn more: https://github.com/testing-library/jest-dom
+import '@testing-library/jest-dom';