inital commit with ap setup

.gitignore

@@ -1,5 +1,8 @@
 # See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
 
+#IDEs
+/.idea
+
 # dependencies
 /node_modules
 /.pnp

.prettierrc

@@ -0,0 +1,8 @@
+{
+  "singleQuote": true,
+  "trailingComma": "es5",
+  "tabWidth": 2,
+  "bracketSpacing": true,
+  "arrowParens": "avoid",
+  "printWidth": 100
+}

package.json

@@ -10,9 +10,17 @@
     "@types/node": "^12.0.0",
     "@types/react": "^16.9.0",
     "@types/react-dom": "^16.9.0",
+    "@types/react-redux": "^7.1.7",
+    "@types/styled-components": "^5.0.1",
+    "configurable-redux-example": "git+ssh://git@github.com:shivamkantival/configurable-redux-example.git#master",
+    "lodash": "^4.17.15",
     "react": "^16.13.1",
     "react-dom": "^16.13.1",
+    "react-redux": "^7.2.0",
     "react-scripts": "3.4.1",
+    "redux": "^4.0.5",
+    "redux-saga": "^1.1.3",
+    "styled-components": "^5.0.1",
     "typescript": "~3.7.2"
   },
   "scripts": {
@@ -21,9 +29,6 @@
     "test": "react-scripts test",
     "eject": "react-scripts eject"
   },
-  "eslintConfig": {
-    "extends": "react-app"
-  },
   "browserslist": {
     "production": [
       ">0.2%",
@@ -35,5 +40,19 @@
       "last 1 firefox version",
       "last 1 safari version"
     ]
+  },
+  "devDependencies": {
+    "@typescript-eslint/eslint-plugin": "2.x",
+    "@typescript-eslint/parser": "2.x",
+    "babel-eslint": "10.x",
+    "eslint": "6.x",
+    "eslint-config-react-app": "^5.2.1",
+    "eslint-plugin-flowtype": "4.x",
+    "eslint-plugin-import": "2.x",
+    "eslint-plugin-jsx-a11y": "6.x",
+    "eslint-plugin-prettier": "^3.1.2",
+    "eslint-plugin-react": "7.x",
+    "eslint-plugin-react-hooks": "2.x",
+    "prettier": "^2.0.2"
   }
 }

src/App.tsx

@@ -1,25 +1,21 @@
 import React from 'react';
-import logo from './logo.svg';
-import './App.css';
+
+//components
+import Loader from 'components/Loader';
+import Header from 'components/Header';
+import { Provider } from 'react-redux';
+
+//store
+import createStore from 'helpers/createStore';
+
+const store = createStore();
 
 function App() {
   return (
-    <div className="App">
-      <header className="App-header">
-        <img src={logo} className="App-logo" alt="logo" />
-        <p>
-          Edit <code>src/App.tsx</code> and save to reload.
-        </p>
-        <a
-          className="App-link"
-          href="https://reactjs.org"
-          target="_blank"
-          rel="noopener noreferrer"
-        >
-          Learn React
-        </a>
-      </header>
-    </div>
+    <Provider store={store}>
+      <Header />
+      <Loader />
+    </Provider>
   );
 }
 

src/components/Header/index.tsx

@@ -0,0 +1,12 @@
+import React, {memo} from 'react';
+
+//components
+import StyledHeader from "./styles"
+
+interface HeaderProps {}
+
+const Header: React.FC<HeaderProps> = () => {
+  return <StyledHeader><h4>Users</h4></StyledHeader>
+};
+
+export default memo(Header);

src/components/Header/styles.ts

@@ -0,0 +1,11 @@
+import styled from 'styled-components';
+import { COLORS } from 'styles/theme';
+import { flexContainer } from 'styles/mixins';
+
+export default styled.header`
+  position: sticky;
+  top: 0;
+  background: ${COLORS.GAINS_BORO};
+  height: 50px;
+  ${flexContainer({ alignItems: 'center', justifyContent: 'center' })}
+`;

src/components/Loader/index.tsx

@@ -0,0 +1,22 @@
+import React, {memo} from "react";
+
+//typeDefs
+import {LoaderProps} from "./interfaces";
+
+//components
+import StyledLoader from "./styles"
+
+const Loader:React.FC<LoaderProps> = (props) => {
+  return <StyledLoader dimension={props.dimension}>
+    <div className="fixedCenter" />
+    <div className="outerExpandingConcentric" />
+    <div className="innerExpandingConcentric" />
+  </StyledLoader>
+}
+
+
+Loader.defaultProps = {
+  dimension: 100
+}
+
+export default memo(Loader);

src/components/Loader/interfaces.ts

@@ -0,0 +1,3 @@
+export interface LoaderProps {
+  dimension?: number;
+}

src/components/Loader/styles.ts

@@ -0,0 +1,64 @@
+//styles
+import { circular, centerToParent } from 'styles/mixins';
+import { COLORS } from 'styles/theme';
+
+import styled from 'styled-components';
+import { LoaderProps } from './interfaces';
+
+const ANIMATION_NAME = 'slowExpand',
+  ANIMATION_PARAMS = `
+    animation-name: ${ANIMATION_NAME};
+    animation-duration: 2s;
+    animation-timing-function: linear;
+    animation-iteration-count: infinite;
+    animation-fill-mode: backwards;
+  `,
+  INITIAL_DIMENSIONS_FOR_EXPANDING_CONCENTRICS = `
+    width: 0;
+    height: 0;
+  `,
+  LOADER_COLOR: string = COLORS.PARROT_GREEN;
+
+export default styled.div`
+  width: ${(props: LoaderProps) => `${props.dimension}px`};
+  height: ${(props: LoaderProps) => `${props.dimension}px`};
+  position: relative;
+
+  @keyframes ${ANIMATION_NAME} {
+    from {
+      width: 30%;
+      height: 30%;
+      opacity: 0.3;
+    }
+    to {
+      width: 100%;
+      height: 100%;
+      opacity: 0;
+    }
+  }
+
+  .fixedCenter {
+    width: 20%;
+    height: 20%;
+    background: ${LOADER_COLOR};
+    ${circular()}
+    ${centerToParent()}
+  }
+
+  .outerExpandingConcentric {
+    background: ${LOADER_COLOR};
+    ${INITIAL_DIMENSIONS_FOR_EXPANDING_CONCENTRICS}
+    ${ANIMATION_PARAMS}
+    ${circular()}
+    ${centerToParent()}
+  }
+
+  .innerExpandingConcentric {
+    background: ${LOADER_COLOR};
+    animation-delay: 0.7s;
+    ${INITIAL_DIMENSIONS_FOR_EXPANDING_CONCENTRICS}
+    ${ANIMATION_PARAMS}
+    ${circular()}
+    ${centerToParent()}
+  }
+`;

src/config/constants/actionTypes.ts

@@ -0,0 +1 @@
+export const USER_DATA = 'USER_DATA';

src/config/constants/index.ts

@@ -0,0 +1,5 @@
+export * from './actionTypes';
+
+export const STATE_KEYS = {
+  USERS: 'users',
+};

src/config/interfaces.ts

@@ -0,0 +1,14 @@
+export interface UserData {
+  name: string;
+  profileImage: string;
+}
+
+export interface UserDataState {
+  data: Array<UserData>;
+  error: boolean;
+  hasError: boolean;
+  hasMore: boolean;
+  isLoading: boolean;
+  loaded: boolean;
+  total: number;
+}

src/helpers/createStore.ts

@@ -0,0 +1,6 @@
+import { createStore, applyMiddleware } from 'redux';
+
+//reducers
+import appReducer from 'reducers';
+
+export default () => createStore(appReducer);

src/index.css

@@ -1,4 +1,7 @@
 body {
+  height: 100vh;
+  width: 100vw;
+  overflow: hidden;
   margin: 0;
   font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',
     'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue',
@@ -7,6 +10,12 @@ body {
   -moz-osx-font-smoothing: grayscale;
 }
 
+#root {
+  height: 100vh;
+  width: 100vw;
+  overflow: hidden;
+}
+
 code {
   font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New',
     monospace;

src/reducers/index.ts

@@ -0,0 +1,26 @@
+//utils
+import { combineReducers } from 'redux';
+
+//constants
+import { STATE_KEYS, USER_DATA } from 'config/constants';
+
+//typeDefs
+import { UserData as UserDataType, UserDataState as UserDataStateType } from 'config/interfaces';
+
+// @ts-ignore
+import { createReducer } from 'configurable-redux-example/src/utils/index';
+
+const userDataReducer: (
+  state: UserDataStateType,
+  action: object
+) => UserDataStateType = createReducer({
+  name: USER_DATA,
+  options: {
+    async: true,
+    initialState: { data: [], hasMore: false, total: null },
+  },
+});
+
+export default combineReducers({
+  [STATE_KEYS.USERS]: userDataReducer,
+});

src/styles/mixins/index.ts

@@ -0,0 +1,34 @@
+//typeDefs
+import { FlexContainerOptions } from './interfaces';
+
+export function centerToParent(): string {
+  return `
+    position: absolute;
+    left: 50%;
+    top: 50%;
+    transform: translate(-50%, -50%);
+  `;
+}
+
+export function circular(): string {
+  return `border-radius: 50%;`;
+}
+
+export function flexContainer({
+  flexDirection = 'row',
+  alignItems = 'flex-start',
+  justifyContent = 'flex-start',
+  flexWrap = 'nowrap',
+}: FlexContainerOptions) {
+  return `
+    display: flex;
+    flex-direction: ${flexDirection};
+    align-items: ${alignItems};
+    justify-content: ${justifyContent};
+    flex-wrap: ${flexWrap}
+  `;
+}
+
+export function centerContent() {
+  return `${flexContainer({ alignItems: 'center', justifyContent: 'center' })}`;
+}

src/styles/mixins/interfaces.ts

@@ -0,0 +1,6 @@
+export interface FlexContainerOptions {
+  flexDirection?: 'row' | 'column';
+  alignItems?: 'center' | 'flex-start' | 'flex-end';
+  justifyContent?: 'flex-start' | 'center' | 'space-around' | 'space-between' | 'flex-end';
+  flexWrap?: 'wrap' | 'nowrap';
+}

src/styles/theme.ts

@@ -0,0 +1,6 @@
+export const COLORS: {
+  readonly [index: string]: string;
+} = {
+  PARROT_GREEN: '#ace600',
+  GAINS_BORO: 'gainsboro',
+};