Merge to master

.gitignore

@@ -4,6 +4,7 @@
 /node_modules
 /.pnp
 .pnp.js
+package-lock.json
 
 # testing
 /coverage

README.md

@@ -68,3 +68,8 @@ This section has moved here: [https://facebook.github.io/create-react-app/docs/d
 ### `npm run build` fails to minify
 
 This section has moved here: [https://facebook.github.io/create-react-app/docs/troubleshooting#npm-run-build-fails-to-minify](https://facebook.github.io/create-react-app/docs/troubleshooting#npm-run-build-fails-to-minify)
+
+### JSON Server
+
+For installing json-server use [npm i -g -json-server]
+For starting the json server locally use [npx json-server src/tests/utils/users.json --port 3030]

babel.config.js

@@ -0,0 +1,3 @@
+module.exports = {
+  presets: ["@babel/preset-env", "@babel/react"],
+};

jest.config.js

@@ -0,0 +1,22 @@
+const esModules = [
+  "@mui",
+  "@material-ui",
+  "rc-.+?",
+  "axios",
+  "@babel/runtime",
+].join("|");
+
+module.exports = {
+  verbose: true,
+  testEnvironment: "jsdom",
+  moduleFileExtensions: ["js", "jsx", "ts", "tsx"],
+  moduleDirectories: ["node_modules", "src"],
+  moduleNameMapper: {
+    "\\.(styl|less|sass|png|jpg|ttf|woff|woff2|css|scss|svg)$":
+      "identity-obj-proxy",
+  },
+  coverageDirectory: "coverage",
+  transformIgnorePatterns: [`/node_modules/(?!${esModules}).+(js|jsx|ts|tsx)$`],
+  watchPathIgnorePatterns: ["<rootDir>/node_modules/"],
+  setupFiles: ["<rootDir>/src/setupTests.js"],
+};

package.json

@@ -6,9 +6,11 @@
     "@emotion/react": "^11.11.4",
     "@emotion/styled": "^11.11.0",
     "@mui/material": "^5.15.14",
+    "@mui/x-data-grid": "^7.11.1",
     "@testing-library/jest-dom": "^5.17.0",
     "@testing-library/react": "^13.4.0",
     "@testing-library/user-event": "^13.5.0",
+    "axios": "^1.7.2",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "react-scripts": "5.0.1",

src/App.js

@@ -1,10 +1,19 @@
+import { useContext } from "react";
 import "./App.css";
+import BackNavigationButton from "./component/BackNavigationButton";
+import ClientDashboard from "./component/ClientDashboard";
 import UserDropDown from "./component/UserDropDown";
+import { UserDropDownContext } from "./context/UserDropDownContextProvider";
 
 function App() {
-  return (
+  const { state, clientDashboard } = useContext(UserDropDownContext);
+
+  return clientDashboard.parentPage ? (
+    <UserDropDown />
+  ) : (
     <>
-      <UserDropDown />
+      <BackNavigationButton />
+      <ClientDashboard name={state.selectedUser} />
     </>
   );
 }

src/component/BackNavigationButton.js

@@ -0,0 +1,29 @@
+import { Button } from "@mui/material";
+import React, { useContext } from "react";
+import { UserDropDownContext } from "../context/UserDropDownContextProvider";
+
+const BackNavigationButton = ({ name }) => {
+  const { setClientDashboard } = useContext(UserDropDownContext);
+
+  const handleNavigation = () => {
+    setClientDashboard({
+      childPage: false,
+      parentPage: true,
+    });
+  };
+
+  return (
+    <Button
+      type="button"
+      style={{ marginTop: 10 }}
+      color="info"
+      variant="contained"
+      data-testid="back-button-type-testid"
+      onClick={handleNavigation}
+    >
+      Back
+    </Button>
+  );
+};
+
+export default BackNavigationButton;

src/component/ClientDashboard.js

@@ -0,0 +1,60 @@
+import { Box } from "@mui/material";
+import { DataGrid } from "@mui/x-data-grid";
+import React, { useContext, useEffect, useState } from "react";
+import { UserDropDownContext } from "../context/UserDropDownContextProvider";
+import { EMPTY_ARRAY } from "../constant/Constant";
+
+const ClientDashboard = ({ name }) => {
+  const { fetchGridData } = useContext(UserDropDownContext);
+  const [row, setRow] = useState(EMPTY_ARRAY);
+
+  useEffect(() => {
+    (async () => {
+      let gridData = await fetchGridData();
+      setRow(gridData);
+    })();
+  }, EMPTY_ARRAY);
+
+  const columns = [
+    { field: "userId", headerName: "User ID", width: 90 },
+    {
+      field: "id",
+      headerName: "ID",
+      width: 150,
+    },
+    {
+      field: "title",
+      headerName: "Title",
+      width: 150,
+    },
+    {
+      field: "completed",
+      headerName: "Completed",
+      width: 110,
+    },
+  ];
+
+  return (
+    <>
+      <Box sx={{ height: 400, width: "100%" }}>
+        <div>Welcome {name[0]} and others</div>
+        <DataGrid
+          rows={row}
+          columns={columns}
+          initialState={{
+            pagination: {
+              paginationModel: {
+                pageSize: 5,
+              },
+            },
+          }}
+          pageSizeOptions={[5]}
+          data-testid="data-grid-testid"
+          disableRowSelectionOnClick
+        />
+      </Box>
+    </>
+  );
+};
+
+export default ClientDashboard;

src/component/UserDropDown.js

@@ -1,17 +1,20 @@
 import { Autocomplete, Button, TextField } from "@mui/material";
-import React, { useEffect, useState } from "react";
+import React, { useContext, useEffect } from "react";
 import "../css/UserDropDown.css";
-import getUsers from "../service/DropDownService";
+import { UserDropDownContext } from "../context/UserDropDownContextProvider";
+import { EMPTY_ARRAY } from "../constant/Constant";
 
 const UserDropDown = () => {
-  const url = "https://jsonplaceholder.typicode.com/users";
-  const [state, setState] = useState({
-    username: [],
-    selectedUser: [],
-    isButtonDisabled: true,
-  });
+  const { state, setState, fetchUserDetails, setClientDashboard } =
+    useContext(UserDropDownContext);
 
-  getUsers(url, setState);
+  useEffect(() => {
+    (async () => {
+      let response = await fetchUserDetails();
+      let names = response.map((user) => user.name);
+      setState((prev) => ({ ...prev, username: names }));
+    })();
+  }, EMPTY_ARRAY);
 
   const handleChange = (event, newValue) => {
     let showButton = newValue.length === 0 ? true : false;
@@ -21,8 +24,10 @@ const UserDropDown = () => {
   };
 
   const storeUsers = () => {
-    //TODO - can further call backend API with the logged payload
-    console.log(state);
+    setClientDashboard({
+      childPage: true,
+      parentPage: false,
+    });
   };
 
   return (
@@ -35,15 +40,15 @@ const UserDropDown = () => {
         value={state.selectedUser}
         sx={{ width: 500 }}
         onChange={handleChange}
-        data-testid="my-user-dropdown"
+        data-testid="user-dropdown-type-testid"
         renderInput={(params) => <TextField {...params} label="Select users" />}
       />
       <Button
         type="button"
         style={{ marginTop: 10 }}
         color="info"
         variant="contained"
-        data-testid="send-button"
+        data-testid="send-button-type-testid"
         onClick={storeUsers}
         disabled={state.isButtonDisabled}
       >

src/constant/Constant.js

@@ -0,0 +1,6 @@
+export const USERS_ENDPOINT = "https://jsonplaceholder.typicode.com/users";
+export const TODOS_ENDPOINT = "https://jsonplaceholder.typicode.com/todos";
+export const HEADERS = {"Accept": "application/json", "Content-Type": "application/json"}
+export const EMPTY_ARRAY = [];
+export const EMPTY_OBJECT = {};
+export const GET = "GET";

src/context/InitialState.js

@@ -0,0 +1,10 @@
+export const userInitialState = {
+  username: [],
+  selectedUser: [],
+  isButtonDisabled: true,
+};
+
+export const viewForAdmin = {
+  childPage: false,
+  parentPage: true,
+};

src/context/UserDropDownContextProvider.js

@@ -0,0 +1,36 @@
+import React, { createContext, useState } from "react";
+import { TODOS_ENDPOINT, USERS_ENDPOINT } from "../constant/Constant";
+import getUsers, { getGridData } from "../service/DropDownService";
+import { userInitialState, viewForAdmin } from "./InitialState";
+
+export const UserDropDownContext = createContext();
+
+const UserDropDownContextProvider = ({ children }) => {
+  const [state, setState] = useState(userInitialState);
+  const [clientDashboard, setClientDashboard] = useState(viewForAdmin);
+
+  const fetchUserDetails = async () => {
+    return await getUsers(USERS_ENDPOINT);
+  };
+
+  const fetchGridData = async () => {
+    return await getGridData(TODOS_ENDPOINT);
+  };
+
+  return (
+    <UserDropDownContext.Provider
+      value={{
+        state,
+        setState,
+        fetchUserDetails,
+        fetchGridData,
+        clientDashboard,
+        setClientDashboard,
+      }}
+    >
+      {children}
+    </UserDropDownContext.Provider>
+  );
+};
+
+export default UserDropDownContextProvider;

src/index.js

@@ -1,13 +1,16 @@
-import React from 'react';
-import ReactDOM from 'react-dom/client';
-import './index.css';
-import App from './App';
-import reportWebVitals from './reportWebVitals';
+import React from "react";
+import ReactDOM from "react-dom/client";
+import App from "./App";
+import UserDropDownContextProvider from "./context/UserDropDownContextProvider";
+import "./index.css";
+import reportWebVitals from "./reportWebVitals";
 
-const root = ReactDOM.createRoot(document.getElementById('root'));
+const root = ReactDOM.createRoot(document.getElementById("root"));
 root.render(
   <React.StrictMode>
-    <App />
+    <UserDropDownContextProvider>
+      <App />
+    </UserDropDownContextProvider>
   </React.StrictMode>
 );
 

src/service/ApiFetchConfig.js

@@ -0,0 +1,14 @@
+import axios from "axios";
+
+export async function fetchResponse(url, method, headers, body) {
+  return await axios({ url, method, headers, data: body })
+    .then((response) => handleResponse(response))
+    .then((data) => data)
+    .catch((error) => console.error(error));
+}
+
+export async function handleResponse(response) {
+  if (response.status === 200 || response.status === 201) {
+    return response;
+  }
+}

src/service/DropDownService.js

@@ -1,13 +1,23 @@
-const getUsers = (url, setState) => {
-  fetch(url)
-    .then((response) => response.json())
-    .then((result) => {
-      let names = result.map((user) => user.name);
-      setState((prev) => {
-        return { ...prev, username: names };
-      });
-    })
-    .catch((err) => console.warn(err));
+import { fetchResponse } from "./ApiFetchConfig";
+
+const getUsers = async (url) => {
+  const header = {
+    Accept: "application/json",
+    "Content-Type": "application/json",
+  };
+  const body = {};
+  let response = await fetchResponse(url, "GET", header, body);
+  return response.data;
+};
+
+export const getGridData = async (url) => {
+  const header = {
+    Accept: "application/json",
+    "Content-Type": "application/json",
+  };
+  const body = {};
+  let response = await fetchResponse(url, "GET", header, body);
+  return response.data;
 };
 
 export default getUsers;

src/setupTests.js

@@ -1,5 +1,17 @@
-// 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';
+import React from "react";
+
+global.React = React;
+
+Object.defineProperty(window, "matchMedia", {
+  writable: true,
+  value: jest.fn().mockImplementation((query) => ({
+    matches: false,
+    media: query,
+    onChange: null,
+    addListener: jest.fn(),
+    removeListener: jest.fn(),
+    addEventListener: jest.fn(),
+    removeEventListener: jest.fn(),
+    dispatchEvent: jest.fn(),
+  })),
+});