Setup redux

.eslintrc.js

@@ -18,5 +18,22 @@ module.exports = {
     'react',
   ],
   rules: {
+    'no-unused-vars': [
+      'error',
+      {
+        vars: 'local',
+        args: 'none',
+      },
+    ],
+    'no-plusplus': 'off',
+    'import/no-named-as-default': 0,
+    'no-underscore-dangle': 'off',
+    'global-require': 0,
+    'no-nested-ternary': 'off',
+    'react/prop-types': 0,
+    'react/jsx-filename-extension': 0,
+    'no-tabs': 0,
+    'react/jsx-indent': 0,
+    'react/jsx-props-no-spreading': 'off'
   },
 };

.gitignore

@@ -14,6 +14,7 @@
 # misc
 .DS_Store
 .env.local
+.env
 .env.development.local
 .env.test.local
 .env.production.local

jest.config.js

@@ -0,0 +1,12 @@
+const config = {
+    verbose: true,
+};
+
+module.exports = config;
+
+// Or async function
+module.exports = async () => {
+return {
+    verbose: true,
+};
+};

package.json

@@ -3,13 +3,25 @@
   "version": "0.1.0",
   "private": true,
   "dependencies": {
+    "@material-ui/core": "^4.12.0",
+    "@material-ui/icons": "^4.11.2",
+    "@material-ui/lab": "^4.0.0-alpha.59",
     "@testing-library/jest-dom": "^5.11.4",
     "@testing-library/react": "^11.1.0",
     "@testing-library/user-event": "^12.1.10",
+    "axios": "^0.21.1",
+    "dotenv": "^8.2.0",
+    "enzyme": "^3.11.0",
+    "jest": "^27.0.6",
     "prettier": "^2.3.1",
     "react": "^17.0.2",
     "react-dom": "^17.0.2",
+    "react-redux": "^7.2.4",
+    "react-router-dom": "^5.2.0",
     "react-scripts": "4.0.3",
+    "redux": "^4.1.0",
+    "redux-logger": "^3.0.6",
+    "redux-thunk": "^2.3.0",
     "web-vitals": "^1.0.1"
   },
   "scripts": {

src/axios/apiRoutes.js

@@ -0,0 +1,12 @@
+import baseApiConfig from './baseConfig';
+
+const Api = {
+  users(data) {
+    return baseApiConfig.get(`/search/users?q=${data.query}&order=${data.order}&sort=${data.sortParam}&page=${data.page}&per_page=10`);
+  },
+  getUsersData(userEndpoint) {
+    return baseApiConfig.get(userEndpoint);
+  },
+};
+
+export default Api;

src/axios/baseConfig.js

@@ -0,0 +1,13 @@
+import axios from 'axios';
+
+const axiosBaseConfig = axios.create({
+  baseURL: 'https://api.github.com',
+  // timeout: 10000,
+  headers: {
+    Accept: 'application/vnd.github.v3+json',
+    Authorization: `Bearer ${process.env.REACT_APP_GITHUB_TOKEN}`,
+    'Content-Type': 'application/json',
+  },
+});
+
+export default axiosBaseConfig;

src/common/Theme/Theme.js

@@ -0,0 +1,11 @@
+const Theme = {
+  primaryColor: '',
+  accent: '',
+  button: '',
+  applicationLight: '',
+  fontFamily: '',
+  fontSize: '',
+  fontWeight: '',
+  buttonHover: '',
+};
+export default Theme;

src/common/constants/constants.js

@@ -0,0 +1,11 @@
+const searchUsersContants = {
+  SUCCESSFUL_SEARCH: 'SUCCESSFUL_SEARCH',
+  FAILED_SEARCH: 'FAILED_SEARCH',
+};
+
+const loaderContants = {
+  LOADING: 'LOADING',
+  STOP_LOADING: 'STOP_LOADING',
+};
+export { loaderContants };
+export default searchUsersContants;

src/common/loader/Loader.js

@@ -0,0 +1,10 @@
+import React from 'react';
+
+const styles = {
+  searchStyle: {
+    textAlign: 'center',
+    marginTop: '20%',
+  },
+};
+const Loader = () => <div style={styles.searchStyle}>Searching ...</div>;
+export default Loader;

src/common/loader/LoaderAction.js

@@ -0,0 +1,15 @@
+const { loaderContants } = require('../constants/constants');
+
+const startLoaderAction = () => (
+  {
+    type: loaderContants.LOADING,
+  }
+);
+
+const stopLoaderAction = () => (
+  {
+    type: loaderContants.STOP_LOADING,
+  }
+);
+
+export { startLoaderAction, stopLoaderAction };

src/common/loader/LoaderReducer.js

@@ -0,0 +1,18 @@
+const { loaderContants } = require('../constants/constants');
+
+const initialState = { loading: false };
+const LoaderReducer = (state = initialState, action) => {
+  switch (action.type) {
+    case (loaderContants.LOADING):
+      return {
+        loading: true,
+      };
+    case (loaderContants.STOP_LOADING):
+      return {
+        loading: false,
+      };
+    default:
+      return state;
+  }
+};
+export default LoaderReducer;

src/common/pageNotFound/NotFound.js

@@ -0,0 +1,24 @@
+import React from 'react';
+
+const styles = {
+  container: {
+    flex: 1,
+    display: 'flex',
+    justifyContent: 'center',
+    alignItems: 'center',
+    textAlign: 'center',
+    backgroundColor: 'aliceblue',
+    alignSelf: 'center',
+    width: '80%',
+    marginLeft: '10%',
+    marginTop: '10%',
+  },
+};
+
+const NotFound = () => (
+	<div style={styles.container}>
+		<h1 style={{ fontSize: 70, color: 'grey' }}>Page Not Found</h1>
+	</div>
+);
+
+export default NotFound;

src/common/pagination/Pagination.js

@@ -0,0 +1,55 @@
+import React from 'react';
+import { makeStyles } from '@material-ui/core/styles';
+import Typography from '@material-ui/core/Typography';
+import Pagination from '@material-ui/lab/Pagination';
+import { useDispatch } from 'react-redux';
+import { Chip } from '@material-ui/core';
+import searchService from '../../components/searchBar/searchService';
+
+const useStyles = makeStyles((theme) => ({
+  root: {
+    '& > * + *': {
+      marginTop: theme.spacing(2),
+      justifyContent: 'center',
+      alignItems: 'center',
+      display: 'flex',
+    },
+  },
+}));
+
+const countTotalPages = (count) => {
+  let actualCount = 0;
+  if (count > 1000) {
+    actualCount = (1000 / 10);
+  }
+  if (count < 1000) {
+    actualCount = Math.ceil(count / 10);
+  }
+  return actualCount;
+};
+
+export default function PaginationOutlined({ count, query }) {
+  const classes = useStyles();
+  const dispatch = useDispatch();
+  const [page, setPage] = React.useState(1);
+  const handleChange = (event, value) => {
+    dispatch(searchService({ query: query.trim(), page: value }));
+    setPage(value);
+  };
+  const styles = {
+    chipStyle: {
+      marginTop: 12,
+    },
+  };
+  return (
+    <div className={classes.root}>
+      <Typography>
+      {countTotalPages(count) ? <Chip label={`Page ${page} of ${countTotalPages(count)} pages`} style={styles.chipStyle} /> : null}
+      </Typography>
+      <div>
+      {countTotalPages(count)
+        ? <Pagination count={countTotalPages(count)} page={page} onChange={handleChange} /> : null}
+      </div>
+    </div>
+  );
+}

src/components/app/App.js

@@ -0,0 +1,69 @@
+import React from 'react';
+import { useSelector } from 'react-redux';
+import SortMenu from '../dropDownMenu/SortButton';
+import './App.css';
+import SearchResultTileContainer from '../searchTile/SearchTileContainer';
+import PaginationOutlined from '../../common/pagination/Pagination';
+import SearchBanner from './NoticeBanner';
+import Loader from '../../common/loader/Loader';
+
+const styles = {
+  container: {
+    padding: '1rem',
+    backgroundColor: '#fafbfc',
+    justifyContent: 'center',
+    alignItems: 'center',
+    alignSelf: 'center',
+  },
+  sortBar: {
+    width: '80%',
+    padding: '2%',
+    marginLeft: '10%',
+    flexDirection: 'row',
+    display: 'flex',
+    borderBottom: '1px solid lightgrey',
+  },
+  sortBarSubContainer: {
+    flex: 1,
+    flexDirection: 'column',
+    display: 'flex',
+  },
+  resultsCount: {
+    fontSize: 'x-large',
+    fontWeight: 'bolder',
+  },
+};
+function AppComponent() {
+  const searchResults = useSelector((centralState) => centralState.searchUsersReducer);
+  const loading = useSelector((state) => state.LoaderReducer.loading);
+  return (
+    <div className="App" style={styles.container}>
+      {/* This is the GitHub Search */}
+      <section style={styles.sortBar}>
+        <div style={styles.sortBarSubContainer}>
+          <span style={styles.resultsCount}>
+            {searchResults.currentQuery && searchResults.count ? `${searchResults.count} results found.` : null}
+          </span>
+        </div>
+        <span style={styles.sortBarSubContainer}>
+          {searchResults.currentQuery && searchResults.count > 0 && <SortMenu />}
+        </span>
+      </section>
+      {
+        loading ? <Loader />
+          : (
+<>
+          {searchResults.currentQuery ? <SearchResultTileContainer /> : <SearchBanner />}
+          {searchResults.currentQuery && searchResults.count < 1 && <SearchBanner text={`We couldn’t find any users matching ${searchResults.currentQuery}`} />}
+          <PaginationOutlined
+            query={searchResults?.currentQuery}
+            count={searchResults?.count}
+          />
+</>
+          )
+      }
+    </div>
+  );
+}
+
+export default AppComponent;

src/components/app/AppContainer.js

@@ -0,0 +1,12 @@
+import React from 'react';
+import AppComponent from './App';
+
+function AppContainer() {
+  return (
+    <>
+      <AppComponent />
+    </>
+  );
+}
+
+export default AppContainer;