├── .env ├── src ├── react-app-env.d.ts ├── config │ └── index.ts ├── assets │ ├── icons │ │ ├── logo.png │ │ ├── tether.png │ │ ├── avatar-blank.png │ │ ├── xmr.svg │ │ └── xrp.svg │ └── images │ │ └── sidebar-background.jpg ├── containers │ ├── 404 │ │ ├── 404.css │ │ └── index.tsx │ ├── sendout-history │ │ ├── styled.ts │ │ └── index.tsx │ ├── layout │ │ ├── main-layout │ │ │ ├── content │ │ │ │ ├── styled.ts │ │ │ │ └── index.tsx │ │ │ ├── footer │ │ │ │ ├── index.tsx │ │ │ │ └── styled.ts │ │ │ ├── styled.ts │ │ │ ├── header │ │ │ │ ├── index.tsx │ │ │ │ └── styled.ts │ │ │ ├── index.tsx │ │ │ └── sidebar │ │ │ │ ├── styled.ts │ │ │ │ └── index.tsx │ │ └── auth-layout │ │ │ ├── footer │ │ │ ├── index.tsx │ │ │ └── styled.ts │ │ │ ├── styled.ts │ │ │ ├── index.tsx │ │ │ └── header │ │ │ ├── index.tsx │ │ │ └── styled.ts │ ├── signup │ │ ├── styled.ts │ │ └── index.tsx │ ├── signin │ │ ├── styled.ts │ │ └── index.tsx │ ├── app │ │ └── index.tsx │ ├── add-funds │ │ ├── styled.ts │ │ └── index.tsx │ └── quick-sms │ │ ├── index.tsx │ │ └── styled.ts ├── validation │ ├── is-email.ts │ └── is-empty.ts ├── setupTests.ts ├── hooks │ ├── use-app-dispatch.ts │ └── use-app-seletecor.ts ├── components │ ├── form-input │ │ ├── styled.ts │ │ └── index.tsx │ ├── form-card │ │ ├── index.tsx │ │ └── styled.ts │ ├── loading │ │ ├── index.tsx │ │ └── styled.ts │ ├── toastr │ │ └── index.tsx │ ├── highlight-button │ │ ├── index.tsx │ │ └── styled.ts │ └── form-button │ │ ├── index.tsx │ │ └── styled.ts ├── styles │ ├── mq.ts │ ├── theme.ts │ ├── global.ts │ └── typography.ts ├── common │ ├── types │ │ └── auth-types.ts │ ├── services │ │ ├── auth-api-service.ts │ │ └── http-api-service.ts │ └── api │ │ └── auth.ts ├── hocs │ └── require-auth.tsx ├── features │ ├── menu-slice.ts │ └── auth-slice.ts ├── app │ ├── store.ts │ └── routes.ts ├── index.tsx ├── index.css └── serviceWorker.ts ├── public ├── robots.txt ├── logo.png ├── favicon.ico ├── logo192.png ├── logo512.png ├── manifest.json └── index.html ├── .prettierrc ├── .gitignore ├── tsconfig.paths.json ├── tsconfig.json ├── config-overrides.js ├── package.json └── README.md /.env: -------------------------------------------------------------------------------- 1 | NODE_PATH=./ -------------------------------------------------------------------------------- /src/react-app-env.d.ts: -------------------------------------------------------------------------------- 1 | /// 2 | -------------------------------------------------------------------------------- /public/robots.txt: -------------------------------------------------------------------------------- 1 | # https://www.robotstxt.org/robotstxt.html 2 | User-agent: * 3 | Disallow: 4 | -------------------------------------------------------------------------------- /public/logo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/devmad119/react-redux-typescript-axios-starter/HEAD/public/logo.png -------------------------------------------------------------------------------- /public/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/devmad119/react-redux-typescript-axios-starter/HEAD/public/favicon.ico -------------------------------------------------------------------------------- /public/logo192.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/devmad119/react-redux-typescript-axios-starter/HEAD/public/logo192.png -------------------------------------------------------------------------------- /public/logo512.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/devmad119/react-redux-typescript-axios-starter/HEAD/public/logo512.png -------------------------------------------------------------------------------- /src/config/index.ts: -------------------------------------------------------------------------------- 1 | export const config = { 2 | apiUrl: 'http://localhost:5000', 3 | tokenSuffix: 'Supremacy ', 4 | }; 5 | -------------------------------------------------------------------------------- /src/assets/icons/logo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/devmad119/react-redux-typescript-axios-starter/HEAD/src/assets/icons/logo.png -------------------------------------------------------------------------------- /src/assets/icons/tether.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/devmad119/react-redux-typescript-axios-starter/HEAD/src/assets/icons/tether.png -------------------------------------------------------------------------------- /src/assets/icons/avatar-blank.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/devmad119/react-redux-typescript-axios-starter/HEAD/src/assets/icons/avatar-blank.png -------------------------------------------------------------------------------- /src/assets/images/sidebar-background.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/devmad119/react-redux-typescript-axios-starter/HEAD/src/assets/images/sidebar-background.jpg -------------------------------------------------------------------------------- /src/containers/sendout-history/styled.ts: -------------------------------------------------------------------------------- 1 | import styled from 'styled-components'; 2 | 3 | export const StyledSendoutHistory = styled.div` 4 | display: flex; 5 | ` -------------------------------------------------------------------------------- /.prettierrc: -------------------------------------------------------------------------------- 1 | { 2 | "printWidth": 150, 3 | "tabWidth": 2, 4 | "singleQuote": true, 5 | "trailingComma": "all", 6 | "semi": true, 7 | "arrowParens": "avoid" 8 | } 9 | -------------------------------------------------------------------------------- /src/containers/layout/main-layout/content/styled.ts: -------------------------------------------------------------------------------- 1 | import styled from 'styled-components'; 2 | 3 | export const StyledContent = styled.div` 4 | min-height: calc(100vh - 120px); 5 | padding: 40px 30px; 6 | `; 7 | -------------------------------------------------------------------------------- /src/containers/sendout-history/index.tsx: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | 3 | const SenoutHistory: React.FC = () => { 4 | return ( 5 | <> 6 | Sendout History 7 | 8 | ); 9 | }; 10 | 11 | export default SenoutHistory; 12 | -------------------------------------------------------------------------------- /src/validation/is-email.ts: -------------------------------------------------------------------------------- 1 | export default function isEmail(email: string) { 2 | return email.match( 3 | /^(([^<>()[\]\\.,;:\s@\"]+(\.[^<>()[\]\\.,;:\s@\"]+)*)|(\".+\"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/, 4 | ); 5 | } 6 | -------------------------------------------------------------------------------- /src/setupTests.ts: -------------------------------------------------------------------------------- 1 | // jest-dom adds custom jest matchers for asserting on DOM nodes. 2 | // allows you to do things like: 3 | // expect(element).toHaveTextContent(/react/i) 4 | // learn more: https://github.com/testing-library/jest-dom 5 | import '@testing-library/jest-dom/extend-expect'; 6 | -------------------------------------------------------------------------------- /src/hooks/use-app-dispatch.ts: -------------------------------------------------------------------------------- 1 | import { useDispatch } from 'react-redux'; 2 | import type { AppDispatch } from 'app/store'; 3 | 4 | // Use throughout your app instead of plain `useDispatch` 5 | const useAppDispatch = () => useDispatch(); 6 | 7 | export default useAppDispatch; 8 | -------------------------------------------------------------------------------- /src/hooks/use-app-seletecor.ts: -------------------------------------------------------------------------------- 1 | import { TypedUseSelectorHook, useSelector } from 'react-redux'; 2 | import type { RootState } from 'app/store'; 3 | 4 | // Use throughout your app instead of plain `useSelector` 5 | const useAppSelector: TypedUseSelectorHook = useSelector; 6 | 7 | export default useAppSelector; 8 | -------------------------------------------------------------------------------- /src/components/form-input/styled.ts: -------------------------------------------------------------------------------- 1 | import styled from 'styled-components'; 2 | 3 | export const StyledInput = styled.input` 4 | font-size: 15px; 5 | letter-spacing: 1px; 6 | color: #3b3f5c; 7 | margin: 10px 0; 8 | padding: 12px 20px; 9 | outline: none; 10 | border: 1px solid #3b3f5c; 11 | width: 100%; 12 | `; 13 | -------------------------------------------------------------------------------- /src/styles/mq.ts: -------------------------------------------------------------------------------- 1 | export enum ScreenSize { 2 | SM = 375, 3 | MD = 768, 4 | LG = 1180, 5 | } 6 | 7 | const mq = { 8 | small: `@media (min-width: ${ScreenSize.SM / 16}em)`, 9 | medium: `@media (min-width: ${ScreenSize.MD / 16}em)`, 10 | large: `@media (min-width: ${ScreenSize.LG / 16}em)`, 11 | }; 12 | 13 | export default mq; 14 | -------------------------------------------------------------------------------- /src/containers/layout/auth-layout/footer/index.tsx: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import { StyledFooter } from './styled'; 3 | 4 | const Footer: React.FC = () => { 5 | return ( 6 | 7 | Copyright © All rights reserved ♡ by SupremacySMS 8 | 9 | ); 10 | }; 11 | 12 | export default Footer; 13 | -------------------------------------------------------------------------------- /src/containers/layout/main-layout/footer/index.tsx: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import { StyledFooter } from './styled'; 3 | 4 | const Footer: React.FC = () => { 5 | return ( 6 | 7 | Copyright © All rights reserved ♡ by SupremacySMS 8 | 9 | ); 10 | }; 11 | 12 | export default Footer; 13 | -------------------------------------------------------------------------------- /src/containers/layout/main-layout/content/index.tsx: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import { StyledContent } from './styled'; 3 | 4 | interface Props { 5 | children: any; 6 | } 7 | 8 | const Content: React.FC = props => { 9 | const { children } = props; 10 | 11 | return {children}; 12 | }; 13 | 14 | export default Content; 15 | -------------------------------------------------------------------------------- /src/validation/is-empty.ts: -------------------------------------------------------------------------------- 1 | export default function isEmpty(value: any) { 2 | let result: boolean = false; 3 | if ( 4 | value === undefined || 5 | value === null || 6 | (typeof value === 'object' && Object.keys(value).length === 0) || 7 | (typeof value === 'string' && value.trim().length === 0) 8 | ) 9 | result = true; 10 | return result; 11 | } 12 | -------------------------------------------------------------------------------- /src/containers/layout/auth-layout/styled.ts: -------------------------------------------------------------------------------- 1 | import styled from 'styled-components'; 2 | import theme from 'styles/theme'; 3 | 4 | export const AuthSection = styled.div` 5 | padding: 10vh 0; 6 | margin-top: 70px; 7 | background-color: ${theme.color.background.dark}; 8 | min-height: calc(100vh - 120px); 9 | display: flex; 10 | align-items: center; 11 | justify-content: center; 12 | `; 13 | -------------------------------------------------------------------------------- /src/components/form-card/index.tsx: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import { StyledCard } from './styled'; 3 | 4 | interface Props { 5 | children: any; 6 | onKeyDown: Function; 7 | } 8 | 9 | const FormCard: React.FC = props => { 10 | const { children, onKeyDown } = props; 11 | return onKeyDown(e)}>{children}; 12 | }; 13 | 14 | export default FormCard; 15 | -------------------------------------------------------------------------------- /src/components/form-card/styled.ts: -------------------------------------------------------------------------------- 1 | import styled from 'styled-components'; 2 | 3 | export const StyledCard = styled.div` 4 | display: flex; 5 | flex-direction: column; 6 | border-radius: 5px; 7 | padding: 24px 30px; 8 | box-shadow: 0 10px 34px -15px rgb(245 245 247); 9 | text-align: center; 10 | align-items: center; 11 | min-width: 350px; 12 | position: relative; 13 | z-index: 0; 14 | `; 15 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | # See https://help.github.com/articles/ignoring-files/ for more about ignoring files. 2 | 3 | # dependencies 4 | /node_modules 5 | /.pnp 6 | .pnp.js 7 | 8 | # testing 9 | /coverage 10 | 11 | # production 12 | /build 13 | 14 | # misc 15 | .DS_Store 16 | .env.local 17 | .env.development.local 18 | .env.test.local 19 | .env.production.local 20 | 21 | npm-debug.log* 22 | yarn-debug.log* 23 | yarn-error.log* 24 | -------------------------------------------------------------------------------- /src/components/loading/index.tsx: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import { CustomLoadingWrapper, CustomLoadingContent, Label } from './styled'; 3 | 4 | const Loading: React.FC = () => { 5 | return ( 6 | 7 | 8 | Loading 9 | 11 | 12 | ); 13 | }; 14 | 15 | export default Loading; 16 | -------------------------------------------------------------------------------- /src/common/types/auth-types.ts: -------------------------------------------------------------------------------- 1 | export type CreateUser = { 2 | email: string; 3 | password: string; 4 | userName: string; 5 | }; 6 | 7 | export type CheckAccount = { 8 | account: string; 9 | password: string; 10 | }; 11 | 12 | export type TokenResponse = { 13 | api_token: string; 14 | handle: string; 15 | }; 16 | 17 | export type CurrentUser = { 18 | _id: string; 19 | email: string; 20 | userName: string; 21 | }; 22 | -------------------------------------------------------------------------------- /src/containers/layout/main-layout/styled.ts: -------------------------------------------------------------------------------- 1 | import styled from 'styled-components'; 2 | import theme from 'styles/theme'; 3 | 4 | export const MainSection = styled.div` 5 | width: -webkit-fill-available; 6 | `; 7 | 8 | export const ContentSection = styled.div` 9 | overflow: auto; 10 | height: calc(100vh - 70px); 11 | `; 12 | 13 | export const StyledMainLayout = styled.div` 14 | display: flex; 15 | background-color: ${theme.color.background.main}; 16 | `; 17 | -------------------------------------------------------------------------------- /src/containers/layout/auth-layout/index.tsx: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import Header from './header'; 3 | import Footer from './footer'; 4 | import { AuthSection } from './styled'; 5 | 6 | interface Props { 7 | children: any; 8 | } 9 | 10 | const AuthLayout: React.FC = props => { 11 | const { children } = props; 12 | 13 | return ( 14 | <> 15 |
16 | {children} 17 |