\r\n );\r\n};\r\n\r\nexport default CustomizedTables;\r\n","/**\r\n * LinkRoute is just any name for all the Link tags you will use throughout the app.\r\n * It is recommended to keep the styling and other stuff consistant.\r\n * All Link tags that are pointing to routes within this app should be improted from react-router-dom.\r\n * All Link tags that are pointing to an external public address should be improted from material-ui.\r\n */\r\nimport React from 'react'\r\nimport PropTypes from 'prop-types'\r\nimport {Link} from 'react-router-dom'\r\nimport {makeStyles} from '@material-ui/core'\r\n\r\nconst useStyles = makeStyles(theme => ({\r\n linkWrapper: {\r\n margin: theme.spacing(2),\r\n display: \"inline-block\"\r\n }\r\n}))\r\n\r\nexport const LinkRoute = props => {\r\n const classes = useStyles();\r\n return (\r\n \r\n {props.children}\r\n \r\n )\r\n}\r\n\r\nLinkRoute.propTypes = {\r\n to: PropTypes.string.isRequired\r\n}\r\n","import React from \"react\";\r\nimport { Typography } from \"@material-ui/core\";\r\nimport { LinkRoute } from \"components/LinkRoute\";\r\nimport { ROOT } from \"./CONSTANTS\";\r\n\r\nexport const NotFound = () => {\r\n return (\r\n <>\r\n {/* Page Not Found! */}\r\n Login\r\n Invalid login details\r\n \r\n );\r\n};\r\n","/**\r\n * Context API used for Auth related information and methods.\r\n */\r\nimport React, { createContext, useContext } from 'react';\r\nimport { useProvideAuth } from './useProvideAuth';\r\n\r\n// Context API used for Auth related information and methods.\r\nconst authContext = createContext();\r\n\r\n// Context Provider to wrap the whole app within and make auth information available.\r\nexport function ProvideAuth({ children }) {\r\n const auth = useProvideAuth();\r\n return (\r\n \r\n {children}\r\n \r\n );\r\n}\r\n\r\n// Custom hook to access auth related data and methods.\r\n// Most important hook to be used throughout\r\nexport function useAuth() {\r\n return useContext(authContext);\r\n}\r\n","import React, { useState } from \"react\";\r\n\r\nexport function useProvideAuth() {\r\n const [user, setUser] = useState(null);\r\n\r\n // signin method: It can either return a promise or execute a callback function.\r\n // You can prefer to keep this in userServices.js\r\n // const signin = (id) => {\r\n // console.log(\"SS:: PrivateRoute > useProviderAuth > signin() called...\");\r\n // return new Promise((resolve, reject) => {\r\n // try {\r\n // // do db call or API endpoint axios call here and return the promise.\r\n // getUserDetails(2)\r\n // .then((res) => {\r\n // console.log(\"useProvideAuth > signin > getUserDetails > res=\", res);\r\n // setUser(res);\r\n // resolve(res);\r\n // })\r\n // .catch((err) => {\r\n // console.log(\"useProvideAuth > signin > getUserDetails > err=\", err);\r\n // setUser([]);\r\n // reject(\"signin error!\");\r\n // });\r\n // } catch (error) {\r\n // console.error(\"signin error!==\", error);\r\n // reject(\"signin error!\");\r\n // }\r\n // });\r\n //};\r\n const signout = () => {\r\n return new Promise((resolve, reject) => {\r\n try {\r\n // do API endpoint axios call here and return the promise.\r\n setUser(null);\r\n resolve(true);\r\n } catch (error) {\r\n console.error(\"signout error!==\", error);\r\n reject(\"signout error!\");\r\n }\r\n });\r\n };\r\n\r\n return {\r\n user,\r\n //signin,\r\n signout,\r\n };\r\n}\r\n","import React from \"react\";\r\nimport makeStyles from \"@material-ui/core/styles/makeStyles\";\r\nimport PropTypes from \"prop-types\";\r\n// MUI Stuff\r\nimport CircularProgress from \"@material-ui/core/CircularProgress\";\r\nimport Button from \"@material-ui/core/Button\";\r\nimport { Typography } from \"@material-ui/core\";\r\n\r\nconst useStyles = makeStyles((theme) => ({\r\n padLoading: {\r\n paddingLeft:8\r\n }\r\n}));\r\n\r\nfunction LoadingButton(props) {\r\n const {\r\n children,\r\n isLoading,\r\n ...rest\r\n } = props;\r\n const classes = useStyles();\r\n return (\r\n <>\r\n \r\n {isLoading && }\r\n {/* You can add your required styling to the button text/children */}\r\n {children}\r\n {/* {children} */}\r\n \r\n \r\n );\r\n}\r\n\r\nLoadingButton.propTypes = {\r\n children: PropTypes.string.isRequired,\r\n isLoading: PropTypes.bool.isRequired,\r\n btnVariant: PropTypes.string,\r\n btnClass: PropTypes.string,\r\n btnColor: PropTypes.string,\r\n btnType: PropTypes.string,\r\n onClickHandle: PropTypes.func,\r\n};\r\n\r\nexport default LoadingButton;\r\n","import React, { useState } from \"react\";\r\nimport { useHistory, useLocation } from \"react-router-dom\";\r\nimport { useAuth } from \"./ProvideAuth\";\r\nimport { LinkRoute } from \"components/LinkRoute\";\r\nimport { ROOT } from \"navigation/CONSTANTS\";\r\nimport { Button, Typography } from \"@material-ui/core\";\r\nimport LoadingButton from \"components/LoadingButton\";\r\n\r\nexport default function Login() {\r\n let history = useHistory();\r\n let location = useLocation();\r\n let auth = useAuth();\r\n const [isLoading, setIsLoading] = useState(false);\r\n\r\n let { from } = location.state || { from: { pathname: \"/\" } };\r\n console.log(\"SS:: req came from:\", from);\r\n let login = () => {\r\n setIsLoading(true);\r\n console.log(\"SS:: login btn clicked...\");\r\n auth.signin().then((res) => {\r\n // history.replace(from);\r\n // setIsLoading(false);\r\n setTimeout(()=>{\r\n history.replace(from);\r\n setIsLoading(false);\r\n },2000);\r\n console.log(\"SS:: logged in successfully by:\", res);\r\n });\r\n };\r\n\r\n return (\r\n <>\r\n Home\r\n Login Page\r\n \r\n
\r\n {/* \r\n I don't know my Loan number{\" \"}\r\n */}\r\n \r\n I know my Loan number\r\n \r\n \r\n \r\n I don't know my Loan number\r\n \r\n \r\n {/* \r\n or search borrowers by loan{\" \"}\r\n */}\r\n
\r\n\r\n \r\n \r\n\r\n Back to home\r\n \r\n\r\n \r\n\r\n
\r\n\r\n\r\n
\r\n \r\n \r\n\r\n\r\n\r\n \r\n\r\n \r\n \r\n )\r\n}\r\n\r\nexport default PaymentSuccessPage;","import React, { useEffect, useState } from \"react\";\r\nimport Container from \"@material-ui/core/Container\";\r\nimport CssBaseline from \"@material-ui/core/CssBaseline\";\r\nimport { Link } from \"react-router-dom\";\r\nimport { ROOT } from \"navigation/CONSTANTS\";\r\nimport { CircularProgress, Typography } from \"@material-ui/core\";\r\nimport { getLoanDetails } from \"services\";\r\n\r\nimport { getData } from \"../../services/Fetch_Service\";\r\nimport Paymentform from \"./paymentform\";\r\nimport Header from '../CommonComponents/Header'\r\nimport Footer from '../CommonComponents/Footer'\r\n\r\nexport const PaymentformContainer = () => {\r\n\r\n useEffect(() => {\r\n\r\n // TODO: get the values from the form on click of submit\r\n return () => {\r\n console.log(\"axios cleanup.\");\r\n };\r\n }, []);\r\n\r\n return (\r\n \r\n \r\n \r\n \r\n\r\n \r\n\r\n \r\n );\r\n};\r\n","import React from \"react\";\r\nimport { Switch, Route } from \"react-router-dom\";\r\nimport LoanLookup from \"pages/LoanLookup\";\r\nimport LoanLookupShow from \"pages/LoanLookup/LoanLookupShowData\";\r\n\r\nimport { NotFound } from \"navigation/NotFound\";\r\nimport {\r\n ROOT,\r\n LOAN_LOOKUP,\r\n LoanLookupShowData,\r\n Login_PAGE1,\r\n HEADER,\r\n FOOTER,\r\n PAYMENTRESULT,\r\n} from \"navigation/CONSTANTS\";\r\nimport Login from \"./Auth/Login\";\r\nimport Paymentform from \"pages/PaymentForm/paymentform\";\r\nimport LoginPage from \"pages/LoginScreen/LoginPage\";\r\nimport CheckRedux from \"pages/LoginScreen/checkRedux\";\r\n\r\nimport Header from \"pages/CommonComponents/Header\";\r\nimport Footer from \"pages/CommonComponents/Footer\";\r\nimport PaymentSuccessPage from \"pages/PaymentForm/PaymentSuccessPage\";\r\nimport { PaymentformContainer } from \"pages/PaymentForm/PaymentformContainer\";\r\n\r\nexport const RouterConfig = (props) => {\r\n return (\r\n
\r\n \r\n {/* List all public routes here */}\r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n\r\n \r\n\r\n \r\n \r\n \r\n \r\n \r\n \r\n\r\n \r\n \r\n \r\n {/* List all private/auth routes here */}\r\n {/* \r\n \r\n */}\r\n {/* Do not hesitate to play around by moving some routes from public to private and vice-versa */}\r\n {/* \r\n \r\n */}\r\n\r\n {/* List a generic 404-Not Found route here */}\r\n \r\n \r\n \r\n \r\n
\r\n );\r\n};\r\n","// You can use CONSTANTS.js file for below definitions of constants and import here.\r\nexport const INCREMENT = \"INCREMENT\";\r\nexport const DECREMENT = \"DECREMENT\";\r\n\r\n// Without THUNK MIDDLEWARE only actions can be dispatched.\r\nexport const incrementAction = (payload) => ({\r\n type: INCREMENT,\r\n payload\r\n});\r\n\r\nexport const decrementAction = () => ({\r\n type: DECREMENT,\r\n});\r\n\r\n// THUNK MIDDLEWARE enables dispatch within action function's return method.\r\nexport const increment = (step) => {\r\n return (dispatch) => {\r\n dispatch(incrementAction(step));\r\n };\r\n};\r\n","import { DECREMENT, INCREMENT } from \"redux/actions/appActions\";\r\n\r\nconst initialState = {\r\n counter: 0,\r\n};\r\n\r\nexport const appReducer = (state=initialState, action) => {\r\n switch (action.type) {\r\n case INCREMENT:\r\n return {\r\n ...state,\r\n counter: state.counter + (action.payload || 1),\r\n };\r\n case DECREMENT:\r\n return {\r\n ...state,\r\n counter: state.counter - 1,\r\n };\r\n default:\r\n return state;\r\n }\r\n};\r\n","// You can use CONSTANTS.js file for below definitions of constants and import here.\r\nexport const UPDATE_USER = 'UPDATE_USER'\r\n\r\nexport const updateUser = (user) => ({\r\n type: UPDATE_USER,\r\n payload: {...user}\r\n})\r\n","import { UPDATE_USER } from \"redux/actions/userActions\";\r\n\r\nconst initialState = {\r\n uid: \"\",\r\n firstName: \"\",\r\n lastName: \"\",\r\n email: \"\",\r\n phone: \"\",\r\n };\r\n \r\n export const userReducer = (state=initialState, action) => {\r\n switch (action.type) {\r\n case UPDATE_USER:\r\n return {\r\n ...state,\r\n ...action.payload\r\n };\r\n default:\r\n return state;\r\n }\r\n };\r\n ","const initialState = {\r\n userDetails: {},\r\n loanAndBorrowers: {},\r\n borrowerAndLoans: {},\r\n};\r\n\r\nexport const loginReducer = (state = initialState, action) => {\r\n switch (action.type) {\r\n case \"USER_LOGIN_SUCCESS\":\r\n return {\r\n ...state,\r\n userDetails: action.payload,\r\n };\r\n case \"GET_LOAN_AND_BORROWERS\":\r\n return {\r\n ...state,\r\n loanAndBorrowers: action.payload,\r\n borrowerAndLoans: {},\r\n };\r\n case \"GET_BORROWER_AND_LOANS\":\r\n return {\r\n ...state,\r\n loanAndBorrowers: {},\r\n borrowerAndLoans: action.payload,\r\n };\r\n default:\r\n return state;\r\n }\r\n};\r\n","/**\r\n * We purposely added 2 reducers for the example of combineReducers method.\r\n * There can be only 1 or even more than 2 reducers.\r\n * combineReducers defines the structure of the store object.\r\n */\r\nimport { combineReducers } from \"redux\";\r\nimport { appReducer } from \"./appReducer\";\r\nimport { userReducer } from \"./userReducer\";\r\nimport { loginReducer } from \"./loginReducer\";\r\n\r\nexport const rootReducer = combineReducers({\r\n app: appReducer,\r\n user: userReducer,\r\n loginUser: loginReducer,\r\n});\r\n","import { applyMiddleware, compose, createStore } from \"redux\";\r\nimport thunk from \"redux-thunk\";\r\nimport { rootReducer } from \"./reducers\";\r\n\r\n\r\n// devtools for debugging in dev environment.\r\nconst devTools =\r\n // eslint-disable-next-line no-undef\r\n process.env.NODE_ENV !== \"production\" && window.__REDUX_DEVTOOLS_EXTENSION__\r\n ? window.__REDUX_DEVTOOLS_EXTENSION__ &&\r\n window.__REDUX_DEVTOOLS_EXTENSION__()\r\n : (a) => a;\r\n\r\nexport const store = createStore(\r\n rootReducer,\r\n compose(applyMiddleware(thunk), devTools)\r\n);\r\n","import React, { Fragment, useState } from \"react\";\r\n// Handle console logs\r\nimport \"utils/dropConsole\";\r\n// Styles\r\nimport \"fontsource-roboto\";\r\n// ROUTER\r\nimport { BrowserRouter } from \"react-router-dom\";\r\nimport { RouterConfig } from \"navigation/RouterConfig\";\r\n// MUI Theme\r\nimport { ThemeProvider } from \"@material-ui/core\";\r\nimport { dark, light } from \"styles/muiTheme\";\r\nimport \"./App.css\";\r\nimport { ProvideAuth } from \"navigation/Auth/ProvideAuth\";\r\n// Redux\r\nimport { Provider } from \"react-redux\";\r\nimport { store } from \"redux/store\";\r\nrequire(\"dotenv\").config();\r\n\r\nfunction App() {\r\n const [darkState, setDarkState] = useState(false);\r\n //setDarkState(darkState);\r\n // const handleThemeChange = () => {\r\n // setDarkState(!darkState);\r\n // console.log(\"theme=\", darkState ? \"dark\" : \"light\");\r\n // };\r\n console.log(\"process.env.REACT_APP_URL_LINK\", process.env.REACT_APP_URL_LINK);\r\n return (\r\n \r\n
![\"\"](\"/logo.png\"){kind=logo}
\r\n ![\"\"](\"/logosmall.png\")
\r\n