-
Notifications
You must be signed in to change notification settings - Fork 0
/
.eslintcache
1 lines (1 loc) · 98.9 KB
/
.eslintcache
1
[{"D:\\Work\\reactjs\\TrainingReactJS\\src\\index.js":"1","D:\\Work\\reactjs\\TrainingReactJS\\src\\App.js":"2","D:\\Work\\reactjs\\TrainingReactJS\\src\\reportWebVitals.js":"3","D:\\Work\\reactjs\\TrainingReactJS\\src\\Common\\NavBar.js":"4","D:\\Work\\reactjs\\TrainingReactJS\\src\\Layout\\MyApp.js":"5","D:\\Work\\reactjs\\TrainingReactJS\\src\\Layout\\Home.js":"6","D:\\Work\\reactjs\\TrainingReactJS\\src\\Context\\GlobalContext.js":"7","D:\\Work\\reactjs\\TrainingReactJS\\src\\Layout\\MyAppLayout.js":"8","D:\\Work\\reactjs\\TrainingReactJS\\src\\Context\\HeaderContext.js":"9","D:\\Work\\reactjs\\TrainingReactJS\\src\\Context\\TransactionContext.js":"10","D:\\Work\\reactjs\\TrainingReactJS\\src\\Common\\Footer\\Footer.js":"11","D:\\Work\\reactjs\\TrainingReactJS\\src\\Component\\SetUpStanding\\SetUpStanding.js":"12","D:\\Work\\reactjs\\TrainingReactJS\\src\\Component\\PrivateBankingPayment\\PrivateBankingPayment.js":"13","D:\\Work\\reactjs\\TrainingReactJS\\src\\Component\\SendMoney\\SendMoney.js":"14","D:\\Work\\reactjs\\TrainingReactJS\\src\\Component\\StandingOrder\\StandingOrder.js":"15","D:\\Work\\reactjs\\TrainingReactJS\\src\\Component\\ManagePayee\\ManagePayee.js":"16","D:\\Work\\reactjs\\TrainingReactJS\\src\\Component\\MobileTopUp\\MobileTopUp.js":"17","D:\\Work\\reactjs\\TrainingReactJS\\src\\Component\\FutureDatedPayment\\FutureDatedPayment.js":"18","D:\\Work\\reactjs\\TrainingReactJS\\src\\Component\\DirectDebit\\DirectDebit.js":"19","D:\\Work\\reactjs\\TrainingReactJS\\src\\Component\\TransferMoney\\TransferMoney.js":"20","D:\\Work\\reactjs\\TrainingReactJS\\src\\Component\\Success\\AddedSuccess.js":"21","D:\\Work\\reactjs\\TrainingReactJS\\src\\Common\\Header\\Header.js":"22"},{"size":517,"mtime":1620378650864,"results":"23","hashOfConfig":"24"},{"size":4147,"mtime":1620625124958,"results":"25","hashOfConfig":"24"},{"size":375,"mtime":1620378650871,"results":"26","hashOfConfig":"24"},{"size":1047,"mtime":1620477779066,"results":"27","hashOfConfig":"24"},{"size":25766,"mtime":1620378650852,"results":"28","hashOfConfig":"24"},{"size":3216,"mtime":1620378650848,"results":"29","hashOfConfig":"24"},{"size":289,"mtime":1620378650833,"results":"30","hashOfConfig":"24"},{"size":9183,"mtime":1620378650858,"results":"31","hashOfConfig":"24"},{"size":913,"mtime":1620378650838,"results":"32","hashOfConfig":"24"},{"size":7550,"mtime":1620378650841,"results":"33","hashOfConfig":"24"},{"size":824,"mtime":1620378650641,"results":"34","hashOfConfig":"24"},{"size":2204,"mtime":1620378650805,"results":"35","hashOfConfig":"24"},{"size":2905,"mtime":1620378650793,"results":"36","hashOfConfig":"24"},{"size":2178,"mtime":1620378650799,"results":"37","hashOfConfig":"24"},{"size":2646,"mtime":1620378650811,"results":"38","hashOfConfig":"24"},{"size":939,"mtime":1620378650782,"results":"39","hashOfConfig":"24"},{"size":1890,"mtime":1620378650786,"results":"40","hashOfConfig":"24"},{"size":2669,"mtime":1620378650778,"results":"41","hashOfConfig":"24"},{"size":7744,"mtime":1620378650772,"results":"42","hashOfConfig":"24"},{"size":2838,"mtime":1620378650823,"results":"43","hashOfConfig":"24"},{"size":1007,"mtime":1620378650815,"results":"44","hashOfConfig":"24"},{"size":778,"mtime":1620378650648,"results":"45","hashOfConfig":"24"},{"filePath":"46","messages":"47","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0,"usedDeprecatedRules":"48"},"hr3lsd",{"filePath":"49","messages":"50","errorCount":0,"warningCount":7,"fixableErrorCount":0,"fixableWarningCount":0,"source":null},{"filePath":"51","messages":"52","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0,"usedDeprecatedRules":"48"},{"filePath":"53","messages":"54","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0,"usedDeprecatedRules":"48"},{"filePath":"55","messages":"56","errorCount":0,"warningCount":24,"fixableErrorCount":0,"fixableWarningCount":0,"source":"57","usedDeprecatedRules":"48"},{"filePath":"58","messages":"59","errorCount":0,"warningCount":3,"fixableErrorCount":0,"fixableWarningCount":0,"source":"60","usedDeprecatedRules":"48"},{"filePath":"61","messages":"62","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0,"usedDeprecatedRules":"48"},{"filePath":"63","messages":"64","errorCount":0,"warningCount":5,"fixableErrorCount":0,"fixableWarningCount":0,"source":"65","usedDeprecatedRules":"48"},{"filePath":"66","messages":"67","errorCount":0,"warningCount":1,"fixableErrorCount":0,"fixableWarningCount":0,"source":"68","usedDeprecatedRules":"48"},{"filePath":"69","messages":"70","errorCount":0,"warningCount":3,"fixableErrorCount":0,"fixableWarningCount":0,"source":"71","usedDeprecatedRules":"48"},{"filePath":"72","messages":"73","errorCount":0,"warningCount":2,"fixableErrorCount":0,"fixableWarningCount":0,"source":"74","usedDeprecatedRules":"48"},{"filePath":"75","messages":"76","errorCount":0,"warningCount":6,"fixableErrorCount":0,"fixableWarningCount":0,"source":"77","usedDeprecatedRules":"48"},{"filePath":"78","messages":"79","errorCount":0,"warningCount":8,"fixableErrorCount":0,"fixableWarningCount":0,"source":"80","usedDeprecatedRules":"48"},{"filePath":"81","messages":"82","errorCount":0,"warningCount":2,"fixableErrorCount":0,"fixableWarningCount":0,"source":"83","usedDeprecatedRules":"48"},{"filePath":"84","messages":"85","errorCount":0,"warningCount":6,"fixableErrorCount":0,"fixableWarningCount":0,"source":"86","usedDeprecatedRules":"48"},{"filePath":"87","messages":"88","errorCount":0,"warningCount":2,"fixableErrorCount":0,"fixableWarningCount":0,"source":"89","usedDeprecatedRules":"48"},{"filePath":"90","messages":"91","errorCount":0,"warningCount":2,"fixableErrorCount":0,"fixableWarningCount":0,"source":"92","usedDeprecatedRules":"48"},{"filePath":"93","messages":"94","errorCount":0,"warningCount":2,"fixableErrorCount":0,"fixableWarningCount":0,"source":"95","usedDeprecatedRules":"48"},{"filePath":"96","messages":"97","errorCount":0,"warningCount":11,"fixableErrorCount":0,"fixableWarningCount":0,"source":"98","usedDeprecatedRules":"48"},{"filePath":"99","messages":"100","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0,"usedDeprecatedRules":"48"},{"filePath":"101","messages":"102","errorCount":0,"warningCount":1,"fixableErrorCount":0,"fixableWarningCount":0,"source":"103","usedDeprecatedRules":"48"},{"filePath":"104","messages":"105","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0,"usedDeprecatedRules":"48"},"D:\\Work\\reactjs\\TrainingReactJS\\src\\index.js",[],["106","107"],"D:\\Work\\reactjs\\TrainingReactJS\\src\\App.js",["108","109","110","111","112","113","114"],"D:\\Work\\reactjs\\TrainingReactJS\\src\\reportWebVitals.js",[],"D:\\Work\\reactjs\\TrainingReactJS\\src\\Common\\NavBar.js",[],"D:\\Work\\reactjs\\TrainingReactJS\\src\\Layout\\MyApp.js",["115","116","117","118","119","120","121","122","123","124","125","126","127","128","129","130","131","132","133","134","135","136","137","138"],"import React, { useContext, useEffect } from 'react'\r\nimport { makeStyles } from '@material-ui/core/styles';\r\nimport AppBar from '@material-ui/core/AppBar';\r\nimport Toolbar from '@material-ui/core/Toolbar';\r\nimport Typography from '@material-ui/core/Typography';\r\nimport Button from '@material-ui/core/Button';\r\nimport IconButton from '@material-ui/core/IconButton';\r\nimport MenuIcon from '@material-ui/icons/Menu';\r\n\r\nimport CssBaseline from '@material-ui/core/CssBaseline';\r\nimport Paper from '@material-ui/core/Paper';\r\nimport List from '@material-ui/core/List';\r\nimport ListItem from '@material-ui/core/ListItem';\r\nimport ListItemAvatar from '@material-ui/core/ListItemAvatar';\r\nimport ListItemText from '@material-ui/core/ListItemText';\r\nimport ListSubheader from '@material-ui/core/ListSubheader';\r\nimport Avatar from '@material-ui/core/Avatar';\r\nimport { useState } from 'react';\r\nimport Toast from 'react-bootstrap/Toast'\r\nimport ToastHeader from 'react-bootstrap/ToastHeader';\r\nimport ToastBody from 'react-bootstrap/ToastBody';\r\n\r\nimport Table from 'react-bootstrap/Table'\r\n// import Form from 'react-bootstrap/Form'\r\n\r\n//Adding antd modules and style\r\nimport { Button as Button1, Modal, Form, Input, Radio, Dropdown, Menu, Select, Checkbox } from 'antd';\r\nimport \"antd/dist/antd.css\";\r\nimport { DownOutlined, UserOutlined, DeleteOutlined } from '@ant-design/icons';\r\n\r\nimport { TransactionContext, getAccounts, setAccount, deleteAccount, putAccount, getAccount, getTransactions, setTransaction } from \"../Context/TransactionContext\";\r\n\r\nimport { BrowserRouter, Route, Switch, useRouteMatch, useHistory, useParams } from 'react-router-dom';\r\n\r\n\r\nimport AddedSuccess from \"../Component/Success/AddedSuccess\";\r\n\r\n\r\nconst useStyles = makeStyles((theme) => ({\r\n root: {\r\n flexGrow: 1,\r\n },\r\n menuButton: {\r\n marginRight: theme.spacing(2),\r\n },\r\n title: {\r\n flexGrow: 1,\r\n },\r\n text: {\r\n padding: theme.spacing(2, 2, 0),\r\n },\r\n paper: {\r\n paddingBottom: 50,\r\n },\r\n list: {\r\n marginBottom: theme.spacing(2),\r\n },\r\n subheader: {\r\n backgroundColor: theme.palette.background.paper,\r\n },\r\n }));\r\n\r\n const messages = [\r\n {\r\n id: 1,\r\n primary: 'Brunch this week?',\r\n secondary: \"I'll be in the neighbourhood this week. Let's grab a bite to eat\",\r\n person: '/static/images/avatar/5.jpg',\r\n },\r\n {\r\n id: 2,\r\n primary: 'Birthday Gift',\r\n secondary: `Do you have a suggestion for a good present for John on his work\r\n anniversary. I am really confused & would love your thoughts on it.`,\r\n person: '/static/images/avatar/1.jpg',\r\n },\r\n {\r\n id: 3,\r\n primary: 'Recipe to try',\r\n secondary: 'I am try out this new BBQ recipe, I think this might be amazing',\r\n person: '/static/images/avatar/2.jpg',\r\n },\r\n {\r\n id: 4,\r\n primary: 'Yes!',\r\n secondary: 'I have the tickets to the ReactConf for this year.',\r\n person: '/static/images/avatar/3.jpg',\r\n },\r\n {\r\n id: 5,\r\n primary: \"Doctor's Appointment\",\r\n secondary: 'My appointment for the doctor was rescheduled for next Saturday.',\r\n person: '/static/images/avatar/4.jpg',\r\n },\r\n {\r\n id: 6,\r\n primary: 'Discussion',\r\n secondary: `Menus that are generated by the bottom app bar (such as a bottom\r\n navigation drawer or overflow menu) open as bottom sheets at a higher elevation\r\n than the bar.`,\r\n person: '/static/images/avatar/5.jpg',\r\n },\r\n {\r\n id: 7,\r\n primary: 'Summer BBQ',\r\n secondary: `Who wants to have a cookout this weekend? I just got some furniture\r\n for my backyard and would love to fire up the grill.`,\r\n person: '/static/images/avatar/1.jpg',\r\n },\r\n ];\r\n\r\n\r\n\r\n// TODO: jsPanel\r\nfunction MyAppComponent(props) {\r\n\r\n\r\n\r\n return (\r\n <div>\r\n {/* text-center */}\r\n <div className=\"container-fluid \"> \r\n <div className=\"row\">\r\n \r\n <div className=\"col-md-2\">\r\n <LeftSider />\r\n\r\n </div>\r\n <div className=\"col-md-8\">\r\n\r\n <MyAppBody />\r\n\r\n </div>\r\n\r\n <div className=\"col-md-2\">\r\n <RightSider />\r\n\r\n </div>\r\n\r\n {/* \r\n <TransactionCheck /> here\r\n\r\n */}\r\n\r\n \r\n\r\n\r\n \r\n </div>\r\n </div>\r\n \r\n </div>\r\n );\r\n}\r\n\r\n\r\n\r\nfunction TransactionCheck(props) {\r\n\r\n\r\n let { transactionstate, transactiondispatch } = useContext(TransactionContext);\r\n const history = useHistory();\r\n let { path, url } = useRouteMatch();\r\n const { accountId } = useParams();\r\n\r\n const getAccountData = async ()=> {\r\n await getAccounts(transactiondispatch);\r\n }\r\n\r\n const getTransactionData = async () => {\r\n await getTransactions(transactiondispatch)\r\n }\r\n\r\n\r\n let status = () => \r\n transactiondispatch({ \r\n type: \"ADD_CONTACT\",\r\n payload: { id: Math.floor(Math.random() * 100), name: \"newName\", email: \"newEmail\" } \r\n });\r\n\r\n\r\n\r\n const Testing = () => {\r\n\r\n let addTransaction = () => transactiondispatch({\r\n type: \"add-transaction\",\r\n payload: { id:\"0\", status:\"PENDING\", payee_name:\"abcd\", amount:1000.00, due_date:\"10/10/2020\", type:\"DEBITED\" }\r\n }); \r\n \r\n let addAccTransaction = () => transactiondispatch({\r\n type: \"add-account-transaction\",\r\n payload: {\r\n accountID: \"1\",\r\n transaction: { id:\"0\", status:\"PENDING\", payee_name:\"abcd\", amount:1000.00, due_date:\"10/10/2020\", type:\"DEBITED\" }\r\n }\r\n })\r\n\r\n\r\n return(\r\n <div>\r\n <button onClick={getAccountData}>Call axios getAccountData</button>\r\n <button onClick={getTransactionData}>Call axios getTransactionData</button>\r\n <button onClick={addTransaction}>Add New Dummy Transactions</button>\r\n <button onClick={addAccTransaction}>Add New Dummy Acc Transactions</button>\r\n\r\n\r\n <p>Accounts.length: { transactionstate.Accounts != null ? transactionstate.Accounts.length : 0 }</p>\r\n <p>Tranctions.length: { transactionstate.Accounts.map(t=>t.transactions != null ? t.transactions.length : 0 )}</p>\r\n \r\n <p><h5>transactionstate.transactions</h5>\r\n {transactionstate.transactions.map(t=>\r\n <div>\r\n amount is <b>{t.amount}</b> accountid is <b>{t.accountid}</b> payee_name is <b>{t.payee_name}</b> {/* status is {t.status} due_date is {t.due_date} type is {t.type}*/}\r\n </div> \r\n )}\r\n </p>\r\n <div>\r\n <h5>transactionstate.transactions.length:</h5> {transactionstate.transactions.length}\r\n </div>\r\n </div>\r\n )\r\n }\r\n\r\n return(\r\n\r\n <div>\r\n <button onClick={()=>{history.push(`${url}/testing`)}}>Testing</button>\r\n \r\n <button onClick={()=>{history.push(`${url}/addNewAccount`)}}>Add New Account</button>\r\n <button onClick={()=>{history.push(`${url}/userTable`)}}>User Table</button>\r\n <button onClick={()=>{history.push(`${url}/accountTable`)}}>Account Table</button>\r\n <div>\r\n <Switch>\r\n <Route exact path={path}>\r\n </Route>\r\n <Route path={`${path}/testing`}>\r\n <div>\r\n <Testing /> \r\n </div>\r\n </Route>\r\n <Route path={`${path}/addNewAccount`}>\r\n <div>\r\n <AddNewUser /> \r\n </div>\r\n </Route>\r\n <Route path={`${path}/userTable`}>\r\n <TransactionUserTable user={transactionstate.contacts}/>\r\n </Route>\r\n <Route path={`${path}/accountTable`}>\r\n <TransactionAccountTable user={transactionstate.Accounts}/>\r\n </Route>\r\n <Route path={`${path}/account/:accountId`} component={SingleAccount} />\r\n </Switch>\r\n </div>\r\n\r\n {/* \r\n \r\n <p>contacts length is: {state.contacts.length}</p> \r\n <h3>\r\n contacts name is {state.contacts.map(c=>c.name)}\r\n </h3> \r\n \r\n */}\r\n \r\n \r\n </div> \r\n\r\n )\r\n}\r\n\r\nfunction SingleAccount(props) {\r\n\r\n const { accountId } = useParams(); // got the clicked single Account id -> used in json call or data\r\n let { transactionstate, transactiondispatch } = useContext(TransactionContext);\r\n \r\n const [account, setAccount] = useState(null);\r\n const amount = 1000;\r\n\r\n useEffect(\r\n async ()=> {\r\n setAccount(await getAccount(transactiondispatch, accountId))\r\n console.log(account)\r\n },\r\n [] // to get call only once\r\n ) // fetch values from heroku, current context has only 1 Account value in initialState\r\n\r\n\r\n // 1st get value for current account thro useEffect -> collect old transaction in temp array -> .push new transaction -> PUT and update whole Account json data\r\n const putAccountData = async (values)=> {\r\n \r\n const newTransationArr = account.transactions; // useEffect hook helps to fetch values for current selected accountId\r\n \r\n newTransationArr.push({\r\n id: Math.floor(Math.random() * 100), status: \"SUCCESS\", payee_name: values.name, amount: values.amount, type: values.type \r\n });\r\n\r\n await putAccount(transactiondispatch,\r\n {\r\n id: account.id, name: account.name, balance: account.balance + values.amount, type: account.type, linked_accounts: [], \r\n transactions: newTransationArr\r\n }\r\n );\r\n }\r\n\r\n const setTransactionData = async (values) => {\r\n await setTransaction(transactiondispatch,\r\n {\r\n id: Math.floor(Math.random() * 100), AccountId: accountId, status: \"SUCCESS\", payee_name: values.name, amount: values.amount, type: values.type \r\n }\r\n )\r\n }\r\n\r\n const formRef = React.createRef();\r\n\r\n const { Option } = Select;\r\n\r\n var onFinish = values => {\r\n putAccountData(values); // put json inside account's transaction -> you need update transaction part only\r\n setTransactionData(values); // post transaction json -> every tranasction post inside it (array)\r\n };\r\n\r\n var onReset = () => {\r\n formRef.current.resetFields();\r\n };\r\n\r\n const layout = {\r\n labelCol: {\r\n span: 8\r\n },\r\n wrapperCol: {\r\n span: 16\r\n }\r\n };\r\n const tailLayout = {\r\n wrapperCol: {\r\n offset: 8,\r\n span: 16\r\n }\r\n };\r\n\r\n return(\r\n <div>\r\n Account {accountId} {console.log(account)}\r\n { account != null ? <div>id: {account.id} name: {account.name}</div> : null }\r\n {/* { account != null ? <button onClick={putAccountData} > Credit {amount}</button> : null } */}\r\n { account != null ? \r\n <div>\r\n <Form {...layout}\r\n ref={formRef}\r\n name=\"control-ref\"\r\n onFinish={onFinish}\r\n >\r\n <Form.Item\r\n name=\"name\"\r\n label=\"Name\"\r\n rules={[\r\n {\r\n required: true,\r\n message: 'Please input your Name!'\r\n }\r\n ]}\r\n >\r\n <Input />\r\n </Form.Item>\r\n <Form.Item name=\"type\" label=\"Transaction Type\" rules={[{ required: true,},]} >\r\n <Select\r\n placeholder=\"Select Your Transaction Type\"\r\n //onChange={onAccountTypeChange}\r\n allowClear\r\n >\r\n <Option value=\"CREDITED\">CREDITED</Option>\r\n <Option value=\"DEBITED\">DEBITED</Option>\r\n </Select>\r\n </Form.Item>\r\n <Form.Item name=\"amount\" label=\"Amount\" rules={[{ required: true,},]} >\r\n <Select\r\n placeholder=\"Select Your Amount\"\r\n //onChange={onAccountTypeChange}\r\n allowClear\r\n >\r\n <Option value={100}> 100 </Option>\r\n <Option value={500}> 500 </Option>\r\n <Option value={2000}> 2000 </Option>\r\n </Select>\r\n </Form.Item>\r\n <Form.Item {...tailLayout}>\r\n <Button1 type=\"primary\" htmlType=\"submit\">\r\n Submit\r\n </Button1>\r\n <Button1 htmlType=\"button\" onClick={onReset}>\r\n Reset\r\n </Button1>\r\n\r\n </Form.Item>\r\n </Form>\r\n </div>\r\n : null }\r\n </div>\r\n )\r\n\r\n}\r\n\r\n\r\n\r\n\r\nconst TransactionUserTable = (props) => {\r\n\r\n\r\n return(\r\n <Table striped bordered hover>\r\n <thead>\r\n <tr>\r\n <th>ID</th>\r\n <th>Name</th>\r\n <th>Email</th>\r\n <th>Account Type</th>\r\n </tr>\r\n </thead>\r\n <tbody>\r\n {\r\n props.user.map(u =>\r\n <tr key={Math.random()}>\r\n <td>{u.id}</td>\r\n <td>{u.name}</td>\r\n <td>{u.email}</td>\r\n <td>{u.accounttype}</td>\r\n </tr>\r\n )\r\n }\r\n </tbody>\r\n </Table>\r\n )\r\n}\r\nconst TransactionAccountTable = (props) => {\r\n\r\n let { transactionstate, transactiondispatch } = useContext(TransactionContext);\r\n \r\n const history = useHistory();\r\n let { path, url } = useRouteMatch();\r\n const { accountId } = useParams();\r\n\r\n\r\n // fetch values from heroku, current context has only 1 Account value in initialState\r\n useEffect(\r\n async ()=> {\r\n await getAccounts(transactiondispatch);\r\n },\r\n [] // to get call only once\r\n ) // fetch values from heroku, current context has only 1 Account value in initialState\r\n\r\n\r\n return(\r\n <Table striped bordered hover>\r\n <thead>\r\n <tr>\r\n <th>#</th>\r\n <th>ID</th>\r\n <th>Name</th>\r\n <th>Balance</th>\r\n <th>Account Type</th>\r\n <th>Transactions</th>\r\n </tr>\r\n </thead>\r\n <tbody>\r\n {\r\n transactionstate.Accounts.map(u =>\r\n <tr key={Math.random()}>\r\n <td onClick={()=>{deleteAccount(transactiondispatch, u.id)}} ><DeleteOutlined />Delete</td>\r\n <td onClick={()=>{history.push(`${url.replace('accountTable','account')}/`+u.id)}}>{u.id}</td>\r\n\r\n <td>{u.name}</td>\r\n <td>{u.balance}</td>\r\n <td>{u.type}</td>\r\n <td>\r\n <Table striped bordered hover>\r\n <thead>\r\n <tr>\r\n <th>Status</th>\r\n <th>Amount</th>\r\n <th>Due date</th>\r\n <th>Type</th>\r\n </tr>\r\n </thead>\r\n <tbody>\r\n {\r\n u.transactions != null ?\r\n\r\n u.transactions.map(t => \r\n <tr>\r\n <td>{t.status}</td>\r\n <td>{t.amount}</td>\r\n <td>{t.due_date}</td>\r\n <td>{t.type}</td>\r\n </tr>\r\n )\r\n : \r\n null\r\n }\r\n </tbody>\r\n </Table>\r\n </td>\r\n </tr>\r\n )\r\n }\r\n </tbody>\r\n </Table>\r\n )\r\n}\r\n\r\n\r\n\r\n\r\nfunction AddNewUser (props) {\r\n\r\n let { transactionstate, transactiondispatch } = useContext(TransactionContext);\r\n\r\n const [status, setStatus] = useState(null);\r\n \r\n\r\n const setAccountData = async (values) => {\r\n await setAccount(transactiondispatch, {\r\n id: Math.floor(Math.random() * 100), name: values.Name, balance: 0, type: values.accounttype, linked_accounts: [], transactions: []\r\n }); // sent json (Account obj) built from values \r\n }\r\n\r\n const formRef = React.createRef();\r\n\r\n\r\n const { Option } = Select;\r\n\r\n\r\n let addContact = (values) => transactiondispatch({ \r\n type: \"ADD_CONTACT\",\r\n payload: { id: Math.floor(Math.random() * 100), name: values.Name, email: values.Email, accounttype: values.accounttype } \r\n });\r\n\r\n let addAccount = (values) => transactiondispatch({\r\n type: \"add-account\", \r\n payload: { id: Math.floor(Math.random() * 100), name: values.Name, balance: 0, type: values.accounttype, linked_accounts: [], transactions: [] }\r\n })\r\n\r\n var onFinish = values => {\r\n // console.log(values);\r\n // addContact(values)\r\n addAccount(values);\r\n setAccountData(values);\r\n };\r\n var onReset = () => {\r\n formRef.current.resetFields();\r\n };\r\n\r\n const layout = {\r\n labelCol: {\r\n span: 8\r\n },\r\n wrapperCol: {\r\n span: 16\r\n }\r\n };\r\n const tailLayout = {\r\n wrapperCol: {\r\n offset: 8,\r\n span: 16\r\n }\r\n };\r\n const onAccountTypeChange = (value) => {\r\n //console.log(\"Account type selected is \"+ value);\r\n }\r\n\r\n return(\r\n <div>\r\n <Form {...layout}\r\n ref={formRef}\r\n name=\"control-ref\"\r\n onFinish={onFinish}\r\n >\r\n <Form.Item\r\n name=\"Name\"\r\n label=\"Name\"\r\n rules={[\r\n {\r\n required: true,\r\n message: 'Please input your Name!'\r\n }\r\n ]}\r\n >\r\n <Input />\r\n </Form.Item>\r\n <Form.Item\r\n name=\"Email\"\r\n label=\"Email\"\r\n rules={[\r\n {\r\n required: true,\r\n message: 'Please input your Email!',\r\n }\r\n ]}\r\n >\r\n \r\n <Input />\r\n </Form.Item>\r\n <Form.Item\r\n name=\"accounttype\" label=\"Account Type\" rules={[{ required: true,},]}\r\n >\r\n <Select\r\n placeholder=\"Select Your Account Type\"\r\n onChange={onAccountTypeChange}\r\n allowClear\r\n >\r\n <Option value=\"CURRENT\">CURRENT</Option>\r\n <Option value=\"SAVING\">SAVING</Option>\r\n <Option value=\"SALARY\">SALARY</Option>\r\n </Select>\r\n </Form.Item>\r\n <Form.Item {...tailLayout}>\r\n <Button1 type=\"primary\" htmlType=\"submit\">\r\n Submit\r\n </Button1>\r\n <Button1 htmlType=\"button\" onClick={onReset}>\r\n Reset\r\n </Button1>\r\n\r\n </Form.Item>\r\n </Form>\r\n <h1>{transactionstate.success_message != null ? <AddedSuccess setStatus={setStatus} /> : null} </h1>\r\n </div>\r\n )\r\n\r\n}\r\n\r\n\r\nfunction MyAppBody (props) {\r\n\r\n const classes = useStyles();\r\n\r\n return(\r\n <div className={classes.root}>\r\n <NavBar />\r\n <div className=\"row\">\r\n <div className=\"col-md-1\"></div>\r\n <div className=\"col-md-10\">\r\n {/* <Chatting /> Adding chat only after login sucess */} \r\n {/* <Login /> */}\r\n <NavBody />\r\n </div>\r\n <div className=\"col-md-1\"></div>\r\n </div>\r\n \r\n </div>\r\n )\r\n}\r\n\r\n\r\nconst NavBar = () => {\r\n\r\n const classes = useStyles();\r\n const history = useHistory();\r\n let { path, url } = useRouteMatch();\r\n\r\n return(\r\n <div>\r\n <AppBar position=\"static\">\r\n <Toolbar>\r\n <IconButton edge=\"start\" className={classes.menuButton} color=\"inherit\" aria-label=\"menu\">\r\n <MenuIcon />\r\n </IconButton>\r\n <Typography variant=\"h6\" className={classes.title}>\r\n News\r\n </Typography>\r\n <Button color=\"inherit\" onClick={()=>{history.push(`${url}/myAccount`)}}>My Account</Button>\r\n <Button color=\"inherit\" onClick={()=>{history.push(`${url}/login`)}}>Login</Button>\r\n <Button color=\"inherit\">Sign Up</Button>\r\n </Toolbar>\r\n </AppBar>\r\n </div>\r\n )\r\n};\r\n\r\nconst NavBody = () => {\r\n\r\n const history = useHistory();\r\n let { path, url } = useRouteMatch();\r\n\r\n return(\r\n <div>\r\n <Switch>\r\n <Route exact path={path}>\r\n </Route>\r\n <Route path={`${path}/myAccount`}>\r\n <div>\r\n <TransactionCheck />\r\n </div>\r\n </Route>\r\n <Route path={`${path}/login`}>\r\n <Login />\r\n </Route>\r\n </Switch>\r\n </div>\r\n )\r\n\r\n}\r\n\r\nconst Chatting = () => {\r\n\r\n const classes = useStyles();\r\n\r\n return(\r\n <React.Fragment>\r\n <CssBaseline />\r\n <Paper square className={classes.paper}>\r\n <Typography className={classes.text} variant=\"h5\" gutterBottom>\r\n Inbox\r\n </Typography>\r\n <List className={classes.list}>\r\n {messages.map(({ id, primary, secondary, person }) => (\r\n <React.Fragment key={id}>\r\n {id === 1 && <ListSubheader className={classes.subheader}>Today</ListSubheader>}\r\n {id === 3 && <ListSubheader className={classes.subheader}>Yesterday</ListSubheader>}\r\n <ListItem button>\r\n <ListItemAvatar>\r\n <Avatar alt=\"Profile Picture\" src={person} />\r\n </ListItemAvatar>\r\n <ListItemText primary={primary} secondary={secondary} />\r\n </ListItem>\r\n </React.Fragment>\r\n ))}\r\n </List>\r\n </Paper>\r\n </React.Fragment>\r\n )\r\n};\r\n\r\n\r\nfunction Login(props) {\r\n\r\n const [username, setUsername] = useState(\"a\"); // Matching username\r\n const [password, setPassword] = useState(\"a\"); // Matching pwd\r\n\r\n const [isLoggedIn, setIsLoggedIn] = useState(false); // Login or Sucess Message\r\n\r\n const [show, setShow] = useState(false); // ToastMsg\r\n\r\n const CollectionCreateForm = ({ visible, onCreate, onCancel }) => {\r\n const [form] = Form.useForm();\r\n return (\r\n <Modal\r\n visible={visible}\r\n title=\"Login\"\r\n okText=\"Login\"\r\n cancelText=\"Cancel\"\r\n onCancel={onCancel}\r\n onOk={() => {\r\n form\r\n .validateFields()\r\n .then((values) => {\r\n form.resetFields();\r\n onCreate(values);\r\n })\r\n .catch((info) => {\r\n console.log('Validate Failed:', info);\r\n });\r\n }}\r\n >\r\n <Form\r\n form={form}\r\n layout=\"vertical\"\r\n name=\"form_in_modal\"\r\n initialValues={{\r\n modifier: 'public',\r\n }}\r\n >\r\n <Form.Item\r\n name=\"username\"\r\n label=\"User Name\"\r\n rules={[\r\n {\r\n required: true,\r\n message: 'Please enter username!',\r\n },\r\n ]}\r\n >\r\n <Input />\r\n </Form.Item>\r\n <Form.Item name=\"password\" label=\"Password\"\r\n rules={[\r\n {\r\n required: true,\r\n message: 'Please enter password!',\r\n },\r\n ]}\r\n >\r\n <Input type=\"password\" />\r\n </Form.Item>\r\n \r\n </Form>\r\n </Modal>\r\n );\r\n };\r\n\r\n\r\n const ToastMsg = () => {\r\n\r\n\r\n return(\r\n <Toast onClose={() => setShow(false)} show={show} delay={2000} autohide>\r\n <ToastHeader>\r\n <strong className=\"mr-auto\">Try Again</strong>\r\n <small>few mins ago</small>\r\n </ToastHeader>\r\n <ToastBody>Wrong credentials ... ... ...</ToastBody>\r\n </Toast>\r\n )\r\n }\r\n\r\n const CollectionsPage = () => {\r\n const [visible, setVisible] = useState(false);\r\n \r\n const onCreate = (values) => {\r\n console.log('Received values of form: ', values);\r\n // console.log('values.username ', values.username);\r\n // console.log('values.password ', values.password);\r\n \r\n // \r\n\r\n if(values.username === username && values.password === password){\r\n console.log(\"Login success\");\r\n setIsLoggedIn(true); // dont show login again\r\n }\r\n else{\r\n setShow(true); // trigger ToastMsg default initialise True\r\n\r\n }\r\n\r\n \r\n setVisible(false); // trigger pre existing logic of modal\r\n };\r\n \r\n return (\r\n <div>\r\n <Button1\r\n type=\"primary\"\r\n onClick={() => {\r\n setVisible(true);\r\n }}\r\n >\r\n Login\r\n </Button1>\r\n <CollectionCreateForm\r\n visible={visible}\r\n onCreate={onCreate}\r\n onCancel={() => {\r\n setVisible(false);\r\n }}\r\n />\r\n </div>\r\n );\r\n };\r\n\r\nconst LoggedIn = () => {\r\n return(\r\n <div>\r\n <div>Logged In</div>\r\n <Button1\r\n type=\"primary\"\r\n onClick={() => setIsLoggedIn(false)}\r\n >\r\n Log Out\r\n </Button1>\r\n </div>\r\n )\r\n}\r\n\r\n\r\n return(\r\n <div className=\"MainDiv\">\r\n <div className=\"jumbotron text-center\">\r\n <div className=\"container\">\r\n {isLoggedIn ? <div><LoggedIn /><Chatting /></div> : <CollectionsPage />} \r\n <ToastMsg />\r\n </div> \r\n </div>\r\n\r\n </div>\r\n );\r\n}\r\n\r\nconst LeftSider = () => {\r\n return(\r\n <div>\r\n {/* <div>Left Sider Func</div> */}\r\n </div>\r\n )\r\n}\r\nconst RightSider = () => {\r\n return(\r\n <div>\r\n {/* <div>Right Sider Func</div> */}\r\n </div>\r\n )\r\n}\r\n\r\nexport default MyAppComponent;\r\n\r\n\r\n\r\n","D:\\Work\\reactjs\\TrainingReactJS\\src\\Layout\\Home.js",["139","140","141"],"import './Home.css';\r\nimport React, { Component } from 'react'\r\n//import { ListGroup, Container } from 'react-bootstrap';\r\n//import Carousel from 'react-bootstrap/Carousel';\r\n//import SendMoney from \"../Component/SendMoney\";\r\n//import 'bootstrap/dist/css/bootstrap.css';\r\nimport Header from \"../Common/Header/Header\";\r\nimport { Route, Switch, useHistory } from 'react-router-dom';\r\n\r\n\r\n\r\nfunction HomeComponent(props) {\r\n return (\r\n <div className=\"Payments\">\r\n <Header name={\"Payments\"} isBack={false}/>\r\n <Operations />\r\n\r\n </div>\r\n );\r\n}\r\n\r\n \r\nexport default HomeComponent;\r\n\r\n\r\n\r\nexport function Operations() {\r\n\r\n let history = useHistory();\r\n\r\n return ( \r\n \r\n <div className=\"operations-outer\">\r\n <div className=\"Operations\">\r\n <ul className=\"Services\">\r\n <li onClick={() => history.push(\"/sendMoney\")}><i className='send-money'></i>Send Money or pay a bill<i className=' next'></i> </li>\r\n <li onClick={() => history.push(\"/transferMoney\")}><i className='transfer-money'></i>Transfer between my accounts<i className=' next'></i></li>\r\n <li onClick={() => history.push(\"/standingOrders\")}>Standing orders<i className='next'></i></li>\r\n <li onClick={() => history.push(\"/managePayees\")}>Manage payees<i className=' next'></i></li>\r\n <li onClick={() => history.push(\"/mobileTopup\")}>Mobile top up<i className=' next'></i></li>\r\n <li onClick={() => history.push(\"/directDebits\")}>Direct debits<i className=' next'></i></li>\r\n <li onClick={() => history.push(\"/futureDatedPayments\")}>Future dated payments<i className=' next'></i></li>\r\n <li onClick={() => history.push(\"/privateBankingPayment\")}>Private banking payment<i className=' next'></i></li>\r\n </ul> \r\n </div>\r\n </div>\r\n );\r\n}\r\n\r\n\r\n/*\r\n\r\n<li><a href=\"/transferMoney\"><i className='fa fa-exchange fa-lg transfer-money'></i>Transfer between my accounts<i className='fa fa-angle-right next'></i></a></li>\r\n<li><a href=\"/standingOrders\">Standing orders<i className='fa fa-angle-right next'></i></a></li>\r\n<li><a href=\"/managePayees\">Manage payees<i className='fa fa-angle-right next'></i></a></li>\r\n<li><a href=\"/mobileTopup\">Mobile top up<i className='fa fa-angle-right next'></i></a></li>\r\n<li><a href=\"/directDebits\">Direct debits<i className='fa fa-angle-right next'></i></a></li>\r\n<li><a href=\"/futureDatedPayments\">Future dated payments<i className='fa fa-angle-right next'></i></a></li>\r\n\r\n\r\n\r\n\r\n\r\n\r\nclass HomeComponent extends Component {\r\n constructor(props) {\r\n super(props);\r\n this.state = { \r\n //name:\"Payments\",//\"Transfer Between\", //\"Send Money\",\r\n //isBack: false \r\n }\r\n \r\n //this.props.setName('Payments')\r\n }\r\n render() { \r\n return ( \r\n\r\n <div className=\"Payments\">\r\n <Header name={this.props.name} isBack={this.props.isBack}/>\r\n <Operations />\r\n\r\n </div>\r\n \r\n );\r\n }\r\n}\r\n \r\nexport default HomeComponent;\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n*/","D:\\Work\\reactjs\\TrainingReactJS\\src\\Context\\GlobalContext.js",[],"D:\\Work\\reactjs\\TrainingReactJS\\src\\Layout\\MyAppLayout.js",["142","143","144","145","146"],"import React, { useEffect, useState }from 'react';\r\nimport { BrowserRouter, Route, Switch, useHistory, useRouteMatch } from 'react-router-dom';\r\n\r\n\r\nimport { Layout, Menu, Breadcrumb, Switch as Switch1 } from 'antd';\r\nimport { DesktopOutlined, PieChartOutlined, FileOutlined, TeamOutlined, UserOutlined, HomeOutlined } from '@ant-design/icons';\r\n\r\nimport \"./MyAppLayout.css\";\r\n\r\nconst { Header, Content, Footer, Sider } = Layout;\r\nconst { SubMenu } = Menu;\r\n\r\nvar siderLayoutArray = [\r\n \"option1\", \"option2\", \"user\", \"team\", \"files\"\r\n]\r\n\r\nvar siderJson = {\r\n option1: \"Option 1\", option2: \"Option 2\"\r\n}\r\n\r\nfunction MyAppLayout(){\r\n\r\n const history = useHistory();\r\n let { path, url } = useRouteMatch();\r\n\r\n const[collapsed, setCollapsed] = useState(false);\r\n var onCollapse = collapsed => {\r\n console.log(collapsed);\r\n setCollapsed(collapsed);\r\n };\r\n const[theme, setTheme] = useState('dark');\r\n var changeTheme = value => {\r\n value ? setTheme('dark') : setTheme('light');\r\n };\r\n\r\n const[location, setLocation] = useState(\"\");\r\n useEffect(\r\n ()=>{setLocation(history.location.pathname)}, [history.location.pathname]\r\n );\r\n\r\n return(\r\n <Layout style={{ minHeight: '100vh' }} >\r\n <Sider collapsible collapsed={collapsed} onCollapse={onCollapse} className={theme==='dark'? \"ant-layout-sider-dark\": \"ant-layout-sider-light\"}>\r\n <div className=\"logo\" />\r\n <Switch1 checked = { theme === \"dark\" } onChange = {changeTheme} checkedChildren= \"Dark\" unCheckedChildren= \"Light\" />\r\n <br />\r\n <br />\r\n <Menu theme = {theme} defaultSelectedKeys={['1']} mode=\"inline\">\r\n \r\n <Menu.Item key=\"1\" icon={<DesktopOutlined />} onClick={()=>{history.push(`${url}/option1`)}}> \r\n {/* <Menu.Item key=\"1\" icon={<PieChartOutlined />} onClick={()=>{history.push(`${url}/`+siderLayoutArray[0])}}> */}\r\n {/* {siderJson[siderLayoutArray[0]]} */}\r\n Option 1\r\n </Menu.Item>\r\n {/* <Menu.Item key=\"2\" icon={<DesktopOutlined />} onClick={()=>{history.push(`${url}/option2`)}}> */}\r\n <Menu.Item key=\"2\" icon={<DesktopOutlined />} onClick={()=>{history.push(`${url}/option2`)}}>\r\n Option 2\r\n </Menu.Item>\r\n <SubMenu key=\"sub1\" icon={<UserOutlined /> } title=\"User\" >\r\n <Menu.Item key=\"3\" onClick={()=>{history.push(`${url}/user/tom`)}}>Tom</Menu.Item>\r\n <Menu.Item key=\"4\" onClick={()=>{history.push(`${url}/user/bill`)}}>Bill</Menu.Item>\r\n <Menu.Item key=\"5\" onClick={()=>{history.push(`${url}/user/alex`)}}>Alex</Menu.Item>\r\n </SubMenu>\r\n <SubMenu key=\"sub2\" icon={<TeamOutlined />} title=\"Team\">\r\n <Menu.Item key=\"6\" onClick={()=>{history.push(`${url}/team/team1`)}}>Team 1</Menu.Item>\r\n <Menu.Item key=\"8\" onClick={()=>{history.push(`${url}/team/team2`)}}>Team 2</Menu.Item>\r\n </SubMenu>\r\n <Menu.Item key=\"9\" icon={<FileOutlined />} onClick={()=>{history.push(`${url}/files`)}}>\r\n Files \r\n </Menu.Item>\r\n </Menu>\r\n </Sider>\r\n <Layout className=\"site-layout\">\r\n <Header className=\"site-layout-background\" style={{ padding: 0 }} />\r\n <Content style={{ margin: '0 16px' }}>\r\n <Breadcrumb style={{ margin: '16px 0' }}>\r\n\r\n <Breadcrumb.Item href=\"/\">\r\n <HomeOutlined /> \r\n </Breadcrumb.Item> \r\n\r\n <Breadcrumb.Item><a href=\"/myAppLayout\">MyAppLayout</a></Breadcrumb.Item> \r\n\r\n { \r\n location.includes(\"user\") ? \r\n <Breadcrumb.Item><a onClick={()=>history.go(\"/myAppLayout/user\")}>User</a></Breadcrumb.Item> : null \r\n }\r\n {\r\n location.includes(\"tom\") ? \r\n <Breadcrumb.Item><a href=\"/myAppLayout/user/tom\">Tom</a></Breadcrumb.Item> : null\r\n }\r\n {\r\n location.includes(\"alex\") ? \r\n <Breadcrumb.Item><a href=\"/myAppLayout/user/alex\">Alex</a></Breadcrumb.Item> : null\r\n }\r\n {\r\n location.includes(\"bill\") ? \r\n <Breadcrumb.Item><a href=\"/myAppLayout/user/bill\">Bill</a></Breadcrumb.Item> : null\r\n }\r\n {\r\n location.includes(\"option1\") ? \r\n <Breadcrumb.Item><a href=\"/myAppLayout/option1\">Option1</a></Breadcrumb.Item> : null\r\n }\r\n {\r\n location.includes(\"option2\") ? \r\n <Breadcrumb.Item><a href=\"/myAppLayout/option2\">Option2</a></Breadcrumb.Item> : null\r\n }\r\n {\r\n location.includes(\"team\") ? \r\n <Breadcrumb.Item><a href=\"/myAppLayout/team\">Team</a></Breadcrumb.Item> : null\r\n }\r\n {\r\n location.includes(\"team1\") ? \r\n <Breadcrumb.Item><a href=\"/myAppLayout/team/team1\">Team1</a></Breadcrumb.Item> : null\r\n }\r\n {\r\n location.includes(\"team2\") ? \r\n <Breadcrumb.Item><a href=\"/myAppLayout/team/team2\">Team2</a></Breadcrumb.Item> : null\r\n }\r\n {\r\n location.includes(\"files\") ? \r\n <Breadcrumb.Item><a href=\"/myAppLayout/files\">Files</a></Breadcrumb.Item> : null\r\n }\r\n \r\n </Breadcrumb>\r\n <div className=\"site-layout-background\" style={{ padding: 24, minHeight: 360 }}>\r\n <Switch>\r\n <Route exact path={path}>\r\n </Route>\r\n <Route path={`${path}/option1`}>\r\n <div>\r\n Option1 \r\n </div>\r\n </Route>\r\n <Route path={`${path}/option2`}>\r\n <div>\r\n Option2 \r\n </div>\r\n </Route>\r\n <Route path={`${path}/files`}>\r\n <div>\r\n Files \r\n </div>\r\n </Route>\r\n <Route path={`${path}/user`}>\r\n <div>\r\n <h3>Option3 Users</h3>\r\n <Switch>\r\n <Route exact path={path}>\r\n </Route>\r\n <Route path={`${path}/user/tom`}>\r\n <div>\r\n Hello Tom\r\n </div>\r\n </Route>\r\n <Route path={`${path}/user/bill`}>\r\n <div>\r\n Hello Bill\r\n </div>\r\n </Route>\r\n <Route path={`${path}/user/alex`}>\r\n <div>\r\n Hello Alex\r\n </div>\r\n </Route>\r\n </Switch>\r\n </div>\r\n </Route>\r\n <Route path={`${path}/team`}>\r\n <div>\r\n <h3>Option4 Teams</h3>\r\n <Switch>\r\n <Route exact path={path}>\r\n </Route>\r\n <Route path={`${path}/team/team1`}>\r\n <div>\r\n Hello Team1\r\n </div>\r\n </Route>\r\n <Route path={`${path}/team/team2`}>\r\n <div>\r\n Hello Team2\r\n </div>\r\n </Route>\r\n </Switch>\r\n </div>\r\n </Route>\r\n </Switch>\r\n </div>\r\n </Content>\r\n <Footer style={{ textAlign: 'center' }}>Ant Design Layout Footer</Footer>\r\n </Layout>\r\n </Layout>\r\n )\r\n}\r\n\r\n\r\nexport default MyAppLayout;","D:\\Work\\reactjs\\TrainingReactJS\\src\\Context\\HeaderContext.js",["147"],"import React from 'react';\r\n\r\n\r\nconst HeaderContext = React.createContext();\r\n\r\nlet initialState = {\r\n count: 10,\r\n color: \"green\"\r\n}\r\n\r\nlet reducer = (state, action) => {\r\n\r\n switch(action.type) {\r\n case \"reset\":\r\n return initialState;\r\n case \"increment\":\r\n return { ...state, count: state.count + 1 };\r\n case \"decrement\":\r\n return { ...state, count: state.count - 1 };\r\n case \"set-color\":\r\n return { ...state, color: action.payload };\r\n }\r\n};\r\n\r\nfunction HeaderProvider(props) {\r\n \r\n let [state, dispatch] = React.useReducer( reducer, initialState );\r\n let value = { state, dispatch };\r\n\r\n return (\r\n <HeaderContext.Provider value= {value}> { props.children } </HeaderContext.Provider>\r\n );\r\n\r\n}\r\n\r\nlet HeaderConsumer = HeaderContext.Consumer;\r\n\r\n\r\nexport { HeaderProvider, HeaderConsumer, HeaderContext }","D:\\Work\\reactjs\\TrainingReactJS\\src\\Context\\TransactionContext.js",["148","149","150"],"import React from 'react';\r\nimport axios from \"axios\";\r\n\r\nimport AddedSuccess from \"../Component/Success/AddedSuccess\";\r\n\r\nconst TransactionContext = React.createContext();\r\n\r\nlet initialState = {\r\n id: \"99\",\r\n status: \"NONE\",\r\n payee_name: \"NONE\",\r\n amount: 0.00,\r\n due_date: \"10/10/1970\",\r\n type: \"NONE\",\r\n success_message: null,\r\n Account: null,\r\n transactions : [\r\n {\r\n id: \"0\", \r\n accountid: null,\r\n status: \"PENDING\",\r\n payee_name: \"abcd\",\r\n amount: 1000.00,\r\n due_date: \"10/10/2020\",\r\n type: \"DEBITED\",\r\n }\r\n ],\r\n contacts: [\r\n {\r\n id: \"098\",\r\n name: \"Diana Prince\",\r\n email: \"[email protected]\",\r\n accounttype: \"CURRENT\"\r\n },\r\n {\r\n id: \"099\",\r\n name: \"Bruce Wayne\",\r\n email: \"[email protected]\",\r\n accounttype: \"CURRENT\"\r\n },\r\n {\r\n id: \"100\",\r\n name: \"Clark Kent\",\r\n email: \"[email protected]\",\r\n accounttype: \"CURRENT\"\r\n }\r\n ],\r\n Accounts: [\r\n {\r\n id: \"1\",\r\n name: \"1111\",\r\n balance: 10000,\r\n type: \"CURRENT\",\r\n linked_accounts: [\r\n \"1234\",\r\n \"1478\",\r\n \"1598\"\r\n ],\r\n transactions: [\r\n {\r\n id: \"0\",\r\n status: \"PENDING\",\r\n payee_name: \"abcd\",\r\n amount: 1000.00,\r\n due_date: \"10/10/2020\",\r\n type: \"DEBITED\"\r\n\r\n },\r\n {\r\n id: \"0\",\r\n status: \"PENDING\",\r\n payee_name: \"abcd\",\r\n amount: 1000.00,\r\n due_date: \"10/10/2020\",\r\n type: \"DEBITED\"\r\n\r\n }\r\n ]\r\n }\r\n ]\r\n}\r\n\r\nlet reducer = (state, action) => {\r\n\r\n switch(action.type) {\r\n case \"reset\":\r\n return initialState;\r\n case \"set-status\":\r\n return { ...state, status: action.payload };\r\n case \"set-payee_name\":\r\n return { ...state, payee_name: action.payload };\r\n case \"set-amount\":\r\n return { ...state, amount: action.payload };\r\n case \"set-due_date\":\r\n return { ...state, due_date: action.payload };\r\n case \"set-type\":\r\n return { ...state, type: action.payload }; \r\n case \"add-transaction\":\r\n const newTransationArr = [...state.transactions]; // const newArr = [...state.transactions, action.payload];\r\n newTransationArr.push(action.payload);\r\n return { ...state, transactions: newTransationArr}; \r\n \r\n case \"ADD_CONTACT\":\r\n return {\r\n contacts: [...state.contacts, action.payload]\r\n }; \r\n\r\n case \"add-account-transaction\":\r\n const Arr = [...state.Accounts];\r\n const ID = action.payload.accountID; // passing ID from MyApp.js\r\n const Acc = Arr.find(a => a.id == ID);\r\n if (Acc != null){\r\n Acc.transactions.push(action.payload.transaction) // passing transaction from MyApp.js\r\n }\r\n //console.log(action.payload.transaction);\r\n //console.log(Acc);\r\n return {\r\n ...state, Accounts: Arr\r\n };\r\n \r\n case \"add-account\":\r\n const AccArr = [...state.Accounts];\r\n AccArr.push(action.payload);\r\n\r\n return {\r\n ...state, Accounts: AccArr\r\n }\r\n\r\n case \"FETCH-ACCOUNTS\":\r\n return {\r\n ...state, Accounts: action.payload\r\n }\r\n\r\n // case \"FETCH-ACCOUNT-ByID\":\r\n // return {\r\n // ...state, Accounts: action.payload\r\n // } \r\n\r\n case \"FETCH-TRANSACTIONS\":\r\n return {\r\n ...state, transactions: action.payload\r\n }\r\n\r\n case \"show-success-toast\":\r\n return { ...state, success_message: action.payload }; \r\n }\r\n};\r\n\r\nfunction TransactionProvider(props) {\r\n \r\n let [transactionstate, transactiondispatch] = React.useReducer( reducer, initialState );\r\n let value = { transactionstate, transactiondispatch };\r\n\r\n return (\r\n <TransactionContext.Provider value= {value}> { props.children } </TransactionContext.Provider>\r\n );\r\n\r\n}\r\n\r\n\r\n\r\n\r\nexport const getAccounts = async dispatch => {\r\n // get user info handler (HOW TO USE)\r\n // const getUserInfoHandler = async () => {\r\n // await getUser(userDispatch);\r\n // setLoading(userDispatch, false);\r\n // };\r\n await axios\r\n .get(`https://my-banking-json-server.herokuapp.com/Accounts`) \r\n .then(res => {\r\n const result = res.data;\r\n console.log(result);\r\n dispatch({\r\n type: \"FETCH-ACCOUNTS\",\r\n payload: result \r\n })\r\n })\r\n\r\n}\r\n\r\nexport const getAccount = async ( dispatch, id ) => {\r\n return await axios\r\n .get(`https://my-banking-json-server.herokuapp.com/Accounts/`+id)\r\n .then( res => res.data )\r\n}\r\n\r\nexport const setAccount = async ( dispatch, account ) => {\r\n await axios\r\n .post(`https://my-banking-json-server.herokuapp.com/Accounts`, account)\r\n .then(res => {\r\n console.log(res);\r\n // getting error for this dispatch only contacts coming, not Accounts, not setting all values correctly\r\n // dispatch({\r\n // type: \"add-account\",\r\n // payload: res.data\r\n // })\r\n dispatch({\r\n type: \"show-success-toast\",\r\n payload: res.status\r\n })\r\n //return res.status;\r\n })\r\n}\r\n\r\nexport const deleteAccount = async (dispatch, id ) => {\r\n await axios\r\n .delete(`https://my-banking-json-server.herokuapp.com/Accounts/`+ id )\r\n .then(res => {\r\n console.log(res);\r\n getAccounts(dispatch);\r\n })\r\n}\r\n\r\nexport const putAccount = async ( dispatch, account ) => {\r\n await axios\r\n .put(`https://my-banking-json-server.herokuapp.com/Accounts/`+account.id, account)\r\n .then(res => {\r\n console.log(res);\r\n getAccounts(dispatch);\r\n })\r\n}\r\n\r\n\r\n\r\nexport const getTransactions = async dispatch => {\r\n await axios\r\n .get(`https://my-banking-json-server.herokuapp.com/Transactions`) \r\n .then(res => {\r\n const result = res.data;\r\n console.log(result);\r\n dispatch({\r\n type: \"FETCH-TRANSACTIONS\",\r\n payload: result \r\n })\r\n })\r\n\r\n}\r\n\r\nexport const setTransaction = async ( dispatch, transaction ) => { // /Transactions with -> new accountId field\r\n await axios\r\n .post(`https://my-banking-json-server.herokuapp.com/Transactions`, transaction)\r\n .then(res => {\r\n console.log(res);\r\n })\r\n}\r\n\r\n\r\n\r\n\r\n\r\n\r\nlet TransactionConsumer = TransactionContext.Consumer;\r\n\r\n\r\nexport { TransactionProvider, TransactionConsumer, TransactionContext }","D:\\Work\\reactjs\\TrainingReactJS\\src\\Common\\Footer\\Footer.js",["151","152"],"\r\nimport React from 'react';\r\n\r\nimport Container from 'react-bootstrap/Container';\r\n\r\n\r\nimport { useHistory } from \"react-router-dom\";\r\n\r\n\r\nconst Footer = (props) => {\r\n\r\n let history = useHistory();\r\n // history.goBack()\r\n // history.push(path);\r\n\r\n return ( \r\n <div>\r\n \r\n <div className=\"container-fluid text-center\">\r\n <div className=\"row\">\r\n <div className=\"col-md-2\">\r\n <div>Left Sider</div>\r\n\r\n </div>\r\n <div className=\"col-md-8 \">\r\n Footer\r\n </div>\r\n <div className=\"col-md-2\">\r\n <div>Right Sider</div>\r\n\r\n </div>\r\n </div>\r\n </div>\r\n \r\n </div>\r\n );\r\n}\r\n \r\nexport default Footer;","D:\\Work\\reactjs\\TrainingReactJS\\src\\Component\\SetUpStanding\\SetUpStanding.js",["153","154","155","156","157","158"],"import React, {useEffect, useState, useContext } from 'react';\r\nimport Header from \"../../Common/Header/Header\";\r\n\r\n\r\nimport { Link, Route, Switch, useRouteMatch } from \"react-router-dom\";\r\n\r\nimport { GlobalContext } from \"../../Context/GlobalContext\";\r\nimport \"./SetUpStanding.css\";\r\n\r\n\r\nfunction SetUpStanding(props) {\r\n return(\r\n <div>\r\n <Header name={'Set up Standing...'} isBack={true}/>\r\n <SetUpStandingBody />\r\n \r\n </div>\r\n\r\n )\r\n}\r\n\r\n\r\nfunction SetUpStandingBody(props) {\r\n\r\n const globalContext = useContext(GlobalContext);\r\n let match = useRouteMatch();\r\n\r\n const [value,setValue] = useState('');\r\n const handleSelect= (e) =>{\r\n setValue(e)\r\n }\r\n\r\n\r\n\r\n return(\r\n <div className=\"Send\">\r\n <div className=\"set-up-standing-title\">\r\n <div>\r\n <p className=\"time-info\">\r\n <i className=\"fa fa-clock-o\" ></i> \r\n It takes a minimum of \r\n <span className=\"info-middle\"><strong> 1 working day to </strong></span>\r\n set up your standing order.\r\n </p>\r\n </div>\r\n </div>\r\n <div className=\"set-up-standing-order-body\">\r\n <ul>\r\n <label > Your Account </label>\r\n <div className=\"account-info\">\r\n You can set up a standing order online from your current account to another account in the same country.\r\n </div>\r\n <div className=\"pay-from\">\r\n <strong className=\"pay-from-text\">Pay from</strong>\r\n </div>\r\n <select onChange={(event) => handleSelect(event.target.value)}>\r\n <option value=\"\">Select an account</option>\r\n {\r\n globalContext.Global.Accounts.map(i => (\r\n <option value={i.id} key={i.id}>{i.type} - {i.name}</option>\r\n ))\r\n }\r\n </select>\r\n\r\n\r\n </ul>\r\n </div>\r\n </div>\r\n )\r\n}\r\n\r\n\r\n\r\nexport default SetUpStanding;","D:\\Work\\reactjs\\TrainingReactJS\\src\\Component\\PrivateBankingPayment\\PrivateBankingPayment.js",["159","160","161","162","163","164","165","166"],"import React, {useEffect, useState, useContext } from 'react';\r\n\r\nimport Header from \"../../Common/Header/Header\";\r\n\r\nimport { useHistory } from \"react-router-dom\";\r\n\r\nimport { Link, Route, Switch, useRouteMatch } from \"react-router-dom\";\r\n\r\nimport { GlobalContext } from \"../../Context/GlobalContext\";\r\nimport './PrivateBankingPayment.css';\r\n\r\n\r\nfunction PrivateBankingPayment(props) {\r\n return(\r\n <div>\r\n <Header name={'Private Banking Payment'} isBack={true}/>\r\n <PrivateBankingPaymentBody />\r\n \r\n </div>\r\n\r\n )\r\n}\r\n\r\n\r\nfunction PrivateBankingPaymentBody(props) {\r\n\r\n const globalContext = useContext(GlobalContext);\r\n let match = useRouteMatch();\r\n \r\n let history = useHistory();\r\n\r\n const [value,setValue] = useState('');\r\n const handleSelect= (e) =>{\r\n setValue(e)\r\n }\r\n\r\n\r\n\r\n return(\r\n <div className=\"Send\">\r\n <div className=\"private-banking-title\">\r\n <div>\r\n <div className=\"text-center\">\r\n <i className=\"private-logo\" >\r\n </i>\r\n </div>\r\n\r\n <p className=\"top-message\">\r\n If your payment cannot be made on 365 online you cannot make a separate payment throu the req payment option below\r\n </p>\r\n <p className=\"font-weight-bold\">\r\n when for example:\r\n </p>\r\n <ul className=\"borderless\">\r\n <li>Amount exceeded the 365 total working day limit.</li>\r\n <li>You want to send money to courriers or in currencies that are not included in 365 online.</li>\r\n <li>You want to send money from currency account in global market.</li>\r\n </ul>\r\n\r\n </div>\r\n </div>\r\n <div className=\"private-banking-note\">\r\n <p>Please Note:</p>\r\n <ul className=\"borderless\">\r\n <li>Amount exceeded the 365 total working day limit.</li>\r\n <li>You want to send money to courriers or in currencies that are not included in 365 online.</li>\r\n <li>You want to send money from currency account in global market.</li>\r\n <li>You want to send money to courriers or in currencies that are not included in 365 online.</li>\r\n </ul>\r\n </div>\r\n <div className=\"private-banking-footer\">\r\n <div className=\"d-flex justify-content-between\">\r\n <button class=\"go-back-button\" onClick={() => history.goBack()}>Go back</button>\r\n <button class=\"req-payment-button\">Request payment</button>\r\n </div>\r\n </div>\r\n </div>\r\n )\r\n}\r\n\r\n\r\n\r\nexport default PrivateBankingPayment;","D:\\Work\\reactjs\\TrainingReactJS\\src\\Component\\SendMoney\\SendMoney.js",["167","168"],"import React, {useEffect, useState, useContext } from 'react';\r\nimport Header from \"./../../Common/Header/Header\";\r\n\r\nimport './SendMoney.css'\r\n\r\nimport { GlobalContext } from \"./../../Context/GlobalContext\";\r\n\r\nimport { HeaderContext } from \"./../../Context/HeaderContext\";\r\n\r\nfunction SendMoney(props) {\r\n\r\n const globalContext = useContext(GlobalContext);\r\n\r\n let { state, dispatch } = useContext(HeaderContext);\r\n\r\n let inc = () => dispatch({ type: \"increment\" });\r\n\r\n\r\n useEffect(()=>{\r\n //props.setName('Send Money');\r\n })\r\n \r\n\r\n return ( \r\n \r\n <div className=\"Payments\">\r\n <Header name={'Send Money'} isBack={true}/>\r\n <SendBody />\r\n\r\n {state.color}\r\n <p>\r\n Current count: <b>{state.count}</b>\r\n </p>\r\n <button onClick={inc}>Increment!</button>\r\n\r\n\r\n {\r\n /* <GlobalConsumer>\r\n {\r\n (accounts)=>{\r\n return <div>Acc {accounts.length}</div>\r\n }\r\n }\r\n </GlobalConsumer> \r\n Acc length {globalContext.Global.Accounts.length}// works syntax\r\n <SendBody {...props} />\r\n */\r\n }\r\n \r\n </div>\r\n\r\n );\r\n}\r\n \r\nexport default SendMoney;\r\n\r\n\r\nfunction SendBody(props) {\r\n\r\n const globalContext = useContext(GlobalContext);\r\n\r\n \r\n const [value,setValue] = useState('');\r\n const handleSelect= (e) =>{\r\n setValue(e)\r\n }\r\n\r\n return(\r\n <div className=\"Send\">\r\n <div className=\"SendHeader\">\r\n <p>Pay from</p>\r\n <ul>\r\n <label >Account </label>\r\n <select onChange={(event) => handleSelect(event.target.value)}>\r\n <option value=\"\">Select account</option>\r\n {\r\n globalContext.Global.Accounts.map(i => (\r\n <option value={i.id} key={i.id}>{i.name}</option>\r\n ))\r\n }\r\n </select>\r\n </ul>\r\n </div>\r\n </div>\r\n )\r\n}","D:\\Work\\reactjs\\TrainingReactJS\\src\\Component\\StandingOrder\\StandingOrder.js",["169","170","171","172","173","174"],"import React, {useEffect, useState, useContext } from 'react';\r\nimport Header from \"../../Common/Header/Header\";\r\nimport { Link, Route, Switch, useRouteMatch } from \"react-router-dom\";\r\n\r\nimport './StandingOrder.css'\r\n\r\nimport { GlobalContext } from \"../../Context/GlobalContext\";\r\n\r\nfunction StandingOrder(props) {\r\n\r\n const globalContext = useContext(GlobalContext);\r\n let match = useRouteMatch();\r\n\r\n\r\n\r\n useEffect(()=>{\r\n //props.setName('Send Money');\r\n })\r\n\r\n\r\n return (\r\n\r\n <div className=\"Payments\">\r\n <Header name={'Standing Orders'} isBack={true}/>\r\n <StandingOrderBody />\r\n\r\n {/* <Switch>\r\n <Route path={`${match.url}/setUpNewOrder`}>\r\n <SetUpStanding />\r\n </Route>\r\n </Switch> */}\r\n\r\n </div>\r\n\r\n );\r\n}\r\n\r\n\r\n\r\nfunction StandingOrderBody(props) {\r\n\r\n const globalContext = useContext(GlobalContext);\r\n let match = useRouteMatch();\r\n\r\n const [value,setValue] = useState('');\r\n const handleSelect= (e) =>{\r\n setValue(e)\r\n }\r\n\r\n return(\r\n <div className=\"Send\">\r\n <div className=\"standing-order-title\">\r\n <p>To view your standing orders select an account</p>\r\n </div>\r\n <div className=\"standing-order-body\">\r\n <ul>\r\n <label >Account </label>\r\n <select onChange={(event) => handleSelect(event.target.value)}>\r\n <option value=\"\">Select account</option>\r\n {\r\n globalContext.Global.Accounts.map(i => (\r\n <option value={i.id} key={i.id}>{i.name}</option>\r\n ))\r\n }\r\n </select>\r\n\r\n <p className=\"standing-order-or\"><span>Or</span></p>\r\n\r\n <div className=\"set-up-button\">\r\n <button ><Link to={\"/setUpNewOrder\"}><i className=\"plus-logo\"></i><div>Set up new standing order</div></Link></button>\r\n </div>\r\n\r\n <div className=\"info-msg\">\r\n <span className=\"info-logo\">\r\n </span>\r\n <div>\r\n <p className=\"info-msg-text\">\r\n Standing order can be set up online to transfer funds from your current account to another account in the same country. (max limit €3,000 / £3,000).\r\n </p>\r\n </div>\r\n </div>\r\n\r\n\r\n </ul>\r\n </div>\r\n </div>\r\n )\r\n}\r\n\r\n\r\n\r\nexport default StandingOrder;\r\n","D:\\Work\\reactjs\\TrainingReactJS\\src\\Component\\ManagePayee\\ManagePayee.js",["175","176"],"import React, {useEffect, useState, useContext } from 'react';\r\nimport Header from \"../../Common/Header/Header\";\r\n\r\nimport './../SendMoney/SendMoney.css'\r\n\r\nimport { GlobalContext } from \"../../Context/GlobalContext\";\r\n\r\nimport { HeaderContext } from \"../../Context/HeaderContext\";\r\n\r\nfunction ManagePayee(props) {\r\n\r\n const globalContext = useContext(GlobalContext);\r\n\r\n let { state, dispatch } = useContext(HeaderContext);\r\n\r\n let inc = () => dispatch({ type: \"increment\" });\r\n\r\n\r\n useEffect(()=>{\r\n //props.setName('Send Money');\r\n })\r\n \r\n\r\n return ( \r\n \r\n <div className=\"Payments\">\r\n <Header name={'Manage Payee'} isBack={true}/>\r\n\r\n {state.color}\r\n <p>\r\n Current count: <b>{state.count}</b>\r\n </p>\r\n <button onClick={inc}>Increment!</button>\r\n\r\n\r\n \r\n </div>\r\n\r\n );\r\n}\r\n \r\nexport default ManagePayee;\r\n\r\n","D:\\Work\\reactjs\\TrainingReactJS\\src\\Component\\MobileTopUp\\MobileTopUp.js",["177","178"],"import React, {useEffect, useState, useContext } from 'react';\r\nimport Header from \"../../Common/Header/Header\";\r\n\r\nimport './../SendMoney/SendMoney.css'\r\n\r\nimport { GlobalContext } from \"../../Context/GlobalContext\";\r\n\r\nfunction MobileTopUp(props) {\r\n\r\n const globalContext = useContext(GlobalContext);\r\n\r\n\r\n useEffect(()=>{\r\n //props.setName('Send Money');\r\n })\r\n \r\n\r\n return ( \r\n \r\n <div className=\"Payments\">\r\n <Header name={'Mobile Top Up'} isBack={true}/>\r\n <MobileTopUpBody />\r\n {\r\n /* <GlobalConsumer>\r\n {\r\n (accounts)=>{\r\n return <div>Acc {accounts.length}</div>\r\n }\r\n }\r\n </GlobalConsumer> \r\n Acc length {globalContext.Global.Accounts.length}// works syntax\r\n <SendBody {...props} />\r\n */\r\n }\r\n \r\n </div>\r\n\r\n );\r\n}\r\n \r\n\r\n\r\nfunction MobileTopUpBody(props) {\r\n\r\n const globalContext = useContext(GlobalContext);\r\n\r\n\r\n const [value,setValue] = useState('');\r\n const handleSelect= (e) =>{\r\n setValue(e)\r\n }\r\n\r\n return(\r\n <div className=\"Send\">\r\n <div className=\"SendHeader\">\r\n <p>Pay from</p>\r\n <ul>\r\n <label ><strong>Account</strong> </label>\r\n <select onChange={(event) => handleSelect(event.target.value)}>\r\n <option value=\"\">Select account</option>\r\n {\r\n globalContext.Global.Accounts.map(i => (\r\n <option value={i.id} key={i.id}>{i.type} - {i.name}</option>\r\n ))\r\n }\r\n </select>\r\n </ul>\r\n </div>\r\n </div>\r\n )\r\n}\r\n\r\n\r\n\r\n\r\n\r\nexport default MobileTopUp;\r\n","D:\\Work\\reactjs\\TrainingReactJS\\src\\Component\\FutureDatedPayment\\FutureDatedPayment.js",["179","180"],"import React, {useEffect, useState, useContext } from 'react';\r\nimport Header from \"../../Common/Header/Header\";\r\nimport { Table } from \"react-bootstrap\";\r\n\r\nimport './FutureDatedPayment.css'\r\n\r\nimport { GlobalContext } from \"../../Context/GlobalContext\";\r\n\r\n\r\n\r\n\r\nfunction FutureDatedPayment(props) {\r\n return(\r\n <div>\r\n <Header name={'Future Dated Payments'} isBack={true}/>\r\n <FutureDatedPaymentBody />\r\n\r\n </div>\r\n )\r\n}\r\n\r\n\r\nfunction FutureDatedPaymentBody(props) {\r\n\r\n \r\n const globalContext = useContext(GlobalContext);\r\n let transactions = globalContext.Global.Accounts[0].transactions // take transactions arr for account 1\r\n\r\n \r\n\r\n return(\r\n <div className=\"Send\">\r\n <div className=\"d-flex justify-content-around\">\r\n \r\n <Table striped borderless hover className=\"payment-table \">\r\n <thead>\r\n <tr>\r\n {/* <th>#</th> */}\r\n <th>Status</th>\r\n <th>Payee Name</th>\r\n <th>Amount</th>\r\n <th>Due Date</th>\r\n </tr>\r\n </thead>\r\n <tbody>\r\n { \r\n transactions.map(i=>{\r\n return( \r\n <tr key={i.id}>\r\n {/* <td>{i.id}</td> */}\r\n <td className={getStyleStatus(i.status)}>\r\n {i.status}\r\n </td>\r\n <td>{i.payee_name}</td>\r\n <td className=\"text-center\">{i.amount}</td>\r\n <td>{i.due_date}</td>\r\n </tr> \r\n )\r\n })\r\n }\r\n </tbody>\r\n </Table>\r\n \r\n \r\n </div>\r\n </div>\r\n )\r\n}\r\n\r\n\r\n// working of this function depends on JSON transaction status data should match\r\nfunction getStyleStatus(status) {\r\n if(status===\"PENDING\")\r\n return \"payment-pending-status\"\r\n else if(status===\"UNSUCCESSFUL\")\r\n return \"payment-unsuccess-status\" \r\n else if(status===\"SUCCESSFUL\")\r\n return \"payment-success-status\" \r\n else if(status===\"CANCELLED\")\r\n return \"payment-cancel-status\"\r\n return \"\" \r\n}\r\n\r\nexport default FutureDatedPayment;","D:\\Work\\reactjs\\TrainingReactJS\\src\\Component\\DirectDebit\\DirectDebit.js",["181","182","183","184","185","186","187","188","189","190","191"],"import React, {useEffect, useState, useContext } from 'react';\r\nimport Header from \"../../Common/Header/Header\";\r\nimport { Accordion, Card, Button } from 'react-bootstrap'\r\n\r\n\r\nimport { Link, Route, Switch, useRouteMatch } from \"react-router-dom\";\r\n\r\nimport { GlobalContext } from \"../../Context/GlobalContext\";\r\nimport \"./DirectDebit.css\";\r\n\r\n\r\nfunction DirectDebit(props) {\r\n\r\n\r\n \r\n return(\r\n <div className=\"Payments\">\r\n <Header name={'SEPA Direct Debit Services'} isBack={true}/>\r\n <DirectDebitBody />\r\n\r\n </div>\r\n )\r\n}\r\n\r\n\r\n\r\nfunction DirectDebitBody(props) {\r\n return(\r\n <div>\r\n <div className=\"top-heading\">\r\n <div className=\"help-info\">\r\n <p><i className=\"fa fa-question\"></i>\r\n Need a hand?\r\n </p>\r\n </div> \r\n <div className=\"next-arrow\">\r\n <i className=\"fa fa-chevron-right\"></i>\r\n </div>\r\n </div> \r\n <div className=\"Send\">\r\n <AccordionList />\r\n\r\n\r\n </div>\r\n </div>\r\n )\r\n}\r\n\r\n\r\nfunction chgStyle(e) {\r\n //console.log(\"clikkk chg\" +e.target.classList);\r\n\r\n\r\n if(e.target.classList.contains(\"card-header\")){\r\n e.target.classList.remove(\"card-header\");\r\n e.target.classList.add(\"new-card-header\");\r\n }else{\r\n e.target.classList.remove(\"new-card-header\");\r\n e.target.classList.add(\"card-header\"); \r\n }\r\n \r\n \r\n}\r\n\r\nfunction AccordionList(props) {\r\n\r\n \r\n\r\n const [Accordion,setAccordion] = useState(\r\n [\r\n {\r\n \"id\":\"0\",\r\n \"title\":\"Cancel direct debit mandate\",\r\n \"body\":\"\"\r\n },\r\n {\r\n \"id\":\"1\",\r\n \"title\":\"Refuse next/all direct debits\",\r\n \"body\":\"\"\r\n },\r\n {\r\n \"id\":\"2\",\r\n \"title\":\"Reactivate next/all direct debits\",\r\n \"body\":\"\"\r\n },\r\n {\r\n \"id\":\"3\",\r\n \"title\":\"block/unblock direct debits\",\r\n \"body\":\"\"\r\n }\r\n ]\r\n );\r\n\r\n return(\r\n <div>\r\n {Accordion.map(i=>{\r\n return(\r\n <Accord key={i.id} id={i.id} title={i.title} body={getBodies(i.id)} />\r\n )\r\n })}\r\n\r\n </div>\r\n )\r\n}\r\n\r\nfunction Accord({id, title, body}) {\r\n return(\r\n <div key={id}>\r\n <Accordion defaultActiveKey=\"\">\r\n <Card >\r\n <Accordion.Toggle as={Card.Header} variant=\"link\" eventKey={id} onClick={(e)=>chgStyle(e)}>\r\n {title}\r\n </Accordion.Toggle>\r\n\r\n <Accordion.Collapse eventKey={id}>\r\n <Card.Body>\r\n {\r\n \r\n body //getBodies(id) // id == \"0\" ? <Body1/>: id == \"1\" ? <Body2/>: id == \"2\" ? <Body3/>: <Body4/> \r\n \r\n }\r\n </Card.Body>\r\n </Accordion.Collapse>\r\n </Card>\r\n </Accordion>\r\n </div>\r\n )\r\n}\r\n\r\n\r\n\r\nexport default DirectDebit;\r\n\r\n\r\n// just binds Accord Body with respective Accord Card header id\r\n//id == \"0\" ? <Body1/>: id == \"1\" ? <Body2/>: id == \"2\" ? <Body3/>: <Body4/>\r\nfunction getBodies(id) {\r\n\r\n if(id===\"0\")\r\n return <Body1 />\r\n else if(id===\"1\")\r\n return <Body2 /> \r\n else if(id===\"2\")\r\n return <Body3 />\r\n else if(id===\"3\")\r\n return <Body4 /> \r\n else\r\n return \"ERR!!! BODY DOENT EXIST LETS CREATE NEW BODY\"\r\n\r\n}\r\n\r\nfunction Body1(props) {\r\n return(\r\n <div>\r\n <div className=\"body-1\">\r\n <p>\r\n <span><i className=\"fa fa-check\" style={{color:\"blue\",paddingRight: '1%'}}></i></span>\r\n\t\t\t\t <span>This means the bank will permenantly cancel all SEPA direct debit payments for this mandate.</span>\r\n\t\t\t\t</p>\r\n\t\t\t\t<p>\r\n <span><i className=\"fa fa-check\" style={{color:\"blue\",paddingRight: '1%'}}></i></span>\r\n\t\t\t\t <span>Once this request is processed it cannot be reversed.</span>\r\n\t\t\t </p>\r\n\t\t\t <p>\r\n <span><i className=\"fa fa-check\" style={{color:\"blue\",paddingRight: '1%'}}></i></span>\r\n\t\t\t\t <span>You need to submit your request by 3pm, one working day before the next payment is due.</span>\r\n\t\t\t\t</p>\r\n\t\t\t\t\r\n\t\t\t\t<h6>Request form...</h6>\r\n\t\t\t <h6 style={{color:\"blue\"}}>You'll need:</h6>\r\n\t\t\t\t\r\n\t\t\t\t<p><i className=\"fa fa-check-circle\" style={{color:\"blue\",paddingRight: '1%'}}></i>\r\n\t\t\t\t Creditor name and ID\r\n\t\t\t\t <a href=\"#\" style={{float:\"right\"}}><em><u>What is a creditor ID?</u></em></a></p>\r\n\t\t\t\r\n\t\t\t\r\n\t\t\t <p><i className=\"fa fa-check-circle\" style={{color:\"blue\", paddingRight: '1%'}}></i>\r\n\t\t\t\tUnique mandate reference (UMR)\r\n\t\t\t\t<a href=\"#\" style={{float:\"right\"}}><em><u>Where's my UMR?</u></em></a></p>\r\n\t\t\t\t\r\n <div className=\"d-flex justify-content-center\">\r\n <button className=\"req-payment-button\">Continue</button>\r\n </div>\r\n\t\t\t\r\n </div>\r\n </div>\r\n )\r\n}\r\nfunction Body2(props) {\r\n return(\r\n <div>\r\n <div className=\"body-2\">\r\n <p>Make a selection</p>\r\n <div className=\"d-flex justify-content-center\">\r\n <button className=\"\" style={{width:\"40%\"}}>Refuse Next</button>\r\n <button className=\"\" style={{width:\"40%\"}}>Refuse All</button>\r\n </div>\r\n </div>\r\n </div>\r\n )\r\n}\r\nfunction Body3(props) {\r\n return(\r\n <div>\r\n <div className=\"body-3\">\r\n <p>Body 3</p>\r\n </div>\r\n </div>\r\n )\r\n}\r\nfunction Body4(props) {\r\n return(\r\n <div>\r\n <div className=\"body-4\">\r\n <p>Make a selection</p>\r\n <div className=\"d-flex justify-content-center\">\r\n <button className=\"\" style={{width:\"40%\"}}>Block</button>\r\n <button className=\"\" style={{width:\"40%\"}}>Unblock</button>\r\n </div>\r\n </div>\r\n </div>\r\n )\r\n}\r\n// function AccordionList(props) {\r\n// return(\r\n// <div> \r\n// <Accordion defaultActiveKey=\"\">\r\n// <Card>\r\n// {/* <Card.Header className=\"\"> */}\r\n// <Accordion.Toggle as={Card.Header} variant=\"link\" eventKey=\"0\" onClick={(e)=>chgStyle(e)}>\r\n// Cancel direct debit mandate\r\n// </Accordion.Toggle>\r\n// {/* </Card.Header> */}\r\n\r\n// <Accordion.Collapse eventKey=\"0\">\r\n// <Card.Body>Body content for panel 1</Card.Body>\r\n// </Accordion.Collapse>\r\n// </Card>\r\n// </Accordion>\r\n\r\n// <Accordion defaultActiveKey=\"\">\r\n// <Card >\r\n// {/* <Card.Header className=\"\"> */}\r\n// <Accordion.Toggle as={Card.Header} variant=\"link\" eventKey=\"1\" onClick={(e)=>chgStyle(e)}>\r\n// Refuse next/all direct debits\r\n// </Accordion.Toggle>\r\n// {/* </Card.Header> */}\r\n\r\n// <Accordion.Collapse eventKey=\"1\">\r\n// <Card.Body>Body content for panel 2</Card.Body>\r\n// </Accordion.Collapse>\r\n// </Card>\r\n// </Accordion>\r\n\r\n\r\n// </div>\r\n// )\r\n// }","D:\\Work\\reactjs\\TrainingReactJS\\src\\Component\\TransferMoney\\TransferMoney.js",[],"D:\\Work\\reactjs\\TrainingReactJS\\src\\Component\\Success\\AddedSuccess.js",["192"],"import React, { useState, useContext } from 'react'\r\n\r\nimport { TransactionContext } from \"../../Context/TransactionContext\"\r\nimport Toast from 'react-bootstrap/Toast'\r\nimport ToastHeader from 'react-bootstrap/ToastHeader';\r\nimport ToastBody from 'react-bootstrap/ToastBody';\r\n\r\n\r\n\r\nfunction AddedSuccess (props) {\r\n\r\n const [show, setShow] = useState(true); // ToastMsg\r\n let { transactionstate, transactiondispatch } = useContext(TransactionContext);\r\n\r\nfunction doWork(){\r\n console.log(\"click\")\r\n setShow(false);\r\n transactiondispatch({type:\"show-success-toast\", payload: null})\r\n}\r\n\r\n return(\r\n <div>\r\n <Toast onClose={ doWork } show={show} autohide>\r\n <ToastHeader>\r\n <strong className=\"mr-auto\">Success</strong>\r\n <small>few mins ago</small>\r\n </ToastHeader>\r\n <ToastBody>Account added Success</ToastBody>\r\n </Toast>\r\n </div>\r\n )\r\n};\r\n\r\n\r\nexport default AddedSuccess;\r\n","D:\\Work\\reactjs\\TrainingReactJS\\src\\Common\\Header\\Header.js",[],{"ruleId":"193","replacedBy":"194"},{"ruleId":"195","replacedBy":"196"},{"ruleId":"197","severity":1,"message":"198","line":7,"column":17,"nodeType":"199","messageId":"200","endLine":7,"endColumn":26},{"ruleId":"197","severity":1,"message":"201","line":27,"column":22,"nodeType":"199","messageId":"200","endLine":27,"endColumn":35},{"ruleId":"197","severity":1,"message":"202","line":37,"column":10,"nodeType":"199","messageId":"200","endLine":37,"endColumn":20},{"ruleId":"197","severity":1,"message":"203","line":37,"column":21,"nodeType":"199","messageId":"200","endLine":37,"endColumn":34},{"ruleId":"197","severity":1,"message":"204","line":38,"column":10,"nodeType":"199","messageId":"200","endLine":38,"endColumn":16},{"ruleId":"197","severity":1,"message":"205","line":38,"column":17,"nodeType":"199","messageId":"200","endLine":38,"endColumn":26},{"ruleId":"197","severity":1,"message":"206","line":39,"column":16,"nodeType":"199","messageId":"200","endLine":39,"endColumn":23},{"ruleId":"197","severity":1,"message":"207","line":27,"column":49,"nodeType":"199","messageId":"200","endLine":27,"endColumn":54},{"ruleId":"197","severity":1,"message":"208","line":27,"column":56,"nodeType":"199","messageId":"200","endLine":27,"endColumn":64},{"ruleId":"197","severity":1,"message":"209","line":27,"column":66,"nodeType":"199","messageId":"200","endLine":27,"endColumn":70},{"ruleId":"197","severity":1,"message":"210","line":27,"column":80,"nodeType":"199","messageId":"200","endLine":27,"endColumn":88},{"ruleId":"197","severity":1,"message":"211","line":29,"column":10,"nodeType":"199","messageId":"200","endLine":29,"endColumn":22},{"ruleId":"197","severity":1,"message":"212","line":29,"column":24,"nodeType":"199","messageId":"200","endLine":29,"endColumn":36},{"ruleId":"197","severity":1,"message":"201","line":33,"column":10,"nodeType":"199","messageId":"200","endLine":33,"endColumn":23},{"ruleId":"197","severity":1,"message":"213","line":164,"column":11,"nodeType":"199","messageId":"200","endLine":164,"endColumn":20},{"ruleId":"197","severity":1,"message":"214","line":175,"column":7,"nodeType":"199","messageId":"200","endLine":175,"endColumn":13},{"ruleId":"197","severity":1,"message":"215","line":274,"column":9,"nodeType":"199","messageId":"200","endLine":274,"endColumn":25},{"ruleId":"197","severity":1,"message":"216","line":277,"column":9,"nodeType":"199","messageId":"200","endLine":277,"endColumn":15},{"ruleId":"217","severity":1,"message":"218","line":280,"column":5,"nodeType":"219","endLine":283,"endColumn":6},{"ruleId":"217","severity":1,"message":"220","line":284,"column":5,"nodeType":"221","endLine":284,"endColumn":7,"suggestions":"222"},{"ruleId":"197","severity":1,"message":"223","line":439,"column":9,"nodeType":"199","messageId":"200","endLine":439,"endColumn":13},{"ruleId":"197","severity":1,"message":"213","line":440,"column":11,"nodeType":"199","messageId":"200","endLine":440,"endColumn":20},{"ruleId":"217","severity":1,"message":"218","line":445,"column":5,"nodeType":"219","endLine":447,"endColumn":6},{"ruleId":"217","severity":1,"message":"224","line":448,"column":5,"nodeType":"221","endLine":448,"endColumn":7,"suggestions":"225"},{"ruleId":"197","severity":1,"message":"214","line":517,"column":10,"nodeType":"199","messageId":"200","endLine":517,"endColumn":16},{"ruleId":"197","severity":1,"message":"226","line":532,"column":7,"nodeType":"199","messageId":"200","endLine":532,"endColumn":17},{"ruleId":"197","severity":1,"message":"223","line":658,"column":11,"nodeType":"199","messageId":"200","endLine":658,"endColumn":15},{"ruleId":"197","severity":1,"message":"227","line":681,"column":9,"nodeType":"199","messageId":"200","endLine":681,"endColumn":16},{"ruleId":"197","severity":1,"message":"228","line":682,"column":15,"nodeType":"199","messageId":"200","endLine":682,"endColumn":18},{"ruleId":"197","severity":1,"message":"229","line":736,"column":22,"nodeType":"199","messageId":"200","endLine":736,"endColumn":33},{"ruleId":"197","severity":1,"message":"230","line":737,"column":22,"nodeType":"199","messageId":"200","endLine":737,"endColumn":33},{"ruleId":"197","severity":1,"message":"231","line":2,"column":17,"nodeType":"199","messageId":"200","endLine":2,"endColumn":26},{"ruleId":"197","severity":1,"message":"232","line":8,"column":10,"nodeType":"199","messageId":"200","endLine":8,"endColumn":15},{"ruleId":"197","severity":1,"message":"233","line":8,"column":17,"nodeType":"199","messageId":"200","endLine":8,"endColumn":23},{"ruleId":"197","severity":1,"message":"201","line":2,"column":10,"nodeType":"199","messageId":"200","endLine":2,"endColumn":23},{"ruleId":"197","severity":1,"message":"234","line":6,"column":27,"nodeType":"199","messageId":"200","endLine":6,"endColumn":43},{"ruleId":"197","severity":1,"message":"235","line":13,"column":5,"nodeType":"199","messageId":"200","endLine":13,"endColumn":21},{"ruleId":"197","severity":1,"message":"236","line":17,"column":5,"nodeType":"199","messageId":"200","endLine":17,"endColumn":14},{"ruleId":"237","severity":1,"message":"238","line":86,"column":46,"nodeType":"239","endLine":86,"endColumn":95},{"ruleId":"240","severity":1,"message":"241","line":13,"column":5,"nodeType":"242","messageId":"243","endLine":22,"endColumn":6},{"ruleId":"197","severity":1,"message":"244","line":4,"column":8,"nodeType":"199","messageId":"200","endLine":4,"endColumn":20},{"ruleId":"240","severity":1,"message":"241","line":85,"column":5,"nodeType":"242","messageId":"243","endLine":146,"endColumn":6},{"ruleId":"245","severity":1,"message":"246","line":111,"column":44,"nodeType":"247","messageId":"248","endLine":111,"endColumn":46},{"ruleId":"197","severity":1,"message":"249","line":4,"column":8,"nodeType":"199","messageId":"200","endLine":4,"endColumn":17},{"ruleId":"197","severity":1,"message":"227","line":12,"column":9,"nodeType":"199","messageId":"200","endLine":12,"endColumn":16},{"ruleId":"197","severity":1,"message":"198","line":1,"column":16,"nodeType":"199","messageId":"200","endLine":1,"endColumn":25},{"ruleId":"197","severity":1,"message":"250","line":5,"column":10,"nodeType":"199","messageId":"200","endLine":5,"endColumn":14},{"ruleId":"197","severity":1,"message":"232","line":5,"column":16,"nodeType":"199","messageId":"200","endLine":5,"endColumn":21},{"ruleId":"197","severity":1,"message":"233","line":5,"column":23,"nodeType":"199","messageId":"200","endLine":5,"endColumn":29},{"ruleId":"197","severity":1,"message":"251","line":26,"column":9,"nodeType":"199","messageId":"200","endLine":26,"endColumn":14},{"ruleId":"197","severity":1,"message":"252","line":28,"column":12,"nodeType":"199","messageId":"200","endLine":28,"endColumn":17},{"ruleId":"197","severity":1,"message":"198","line":1,"column":16,"nodeType":"199","messageId":"200","endLine":1,"endColumn":25},{"ruleId":"197","severity":1,"message":"250","line":7,"column":10,"nodeType":"199","messageId":"200","endLine":7,"endColumn":14},{"ruleId":"197","severity":1,"message":"232","line":7,"column":16,"nodeType":"199","messageId":"200","endLine":7,"endColumn":21},{"ruleId":"197","severity":1,"message":"233","line":7,"column":23,"nodeType":"199","messageId":"200","endLine":7,"endColumn":29},{"ruleId":"197","severity":1,"message":"253","line":27,"column":11,"nodeType":"199","messageId":"200","endLine":27,"endColumn":24},{"ruleId":"197","severity":1,"message":"251","line":28,"column":9,"nodeType":"199","messageId":"200","endLine":28,"endColumn":14},{"ruleId":"197","severity":1,"message":"252","line":32,"column":12,"nodeType":"199","messageId":"200","endLine":32,"endColumn":17},{"ruleId":"197","severity":1,"message":"254","line":33,"column":11,"nodeType":"199","messageId":"200","endLine":33,"endColumn":23},{"ruleId":"197","severity":1,"message":"253","line":12,"column":11,"nodeType":"199","messageId":"200","endLine":12,"endColumn":24},{"ruleId":"197","severity":1,"message":"252","line":63,"column":12,"nodeType":"199","messageId":"200","endLine":63,"endColumn":17},{"ruleId":"197","severity":1,"message":"232","line":3,"column":16,"nodeType":"199","messageId":"200","endLine":3,"endColumn":21},{"ruleId":"197","severity":1,"message":"233","line":3,"column":23,"nodeType":"199","messageId":"200","endLine":3,"endColumn":29},{"ruleId":"197","severity":1,"message":"253","line":11,"column":11,"nodeType":"199","messageId":"200","endLine":11,"endColumn":24},{"ruleId":"197","severity":1,"message":"251","line":12,"column":9,"nodeType":"199","messageId":"200","endLine":12,"endColumn":14},{"ruleId":"197","severity":1,"message":"251","line":43,"column":9,"nodeType":"199","messageId":"200","endLine":43,"endColumn":14},{"ruleId":"197","severity":1,"message":"252","line":45,"column":12,"nodeType":"199","messageId":"200","endLine":45,"endColumn":17},{"ruleId":"197","severity":1,"message":"255","line":1,"column":27,"nodeType":"199","messageId":"200","endLine":1,"endColumn":35},{"ruleId":"197","severity":1,"message":"253","line":12,"column":11,"nodeType":"199","messageId":"200","endLine":12,"endColumn":24},{"ruleId":"197","severity":1,"message":"253","line":10,"column":11,"nodeType":"199","messageId":"200","endLine":10,"endColumn":24},{"ruleId":"197","severity":1,"message":"252","line":48,"column":12,"nodeType":"199","messageId":"200","endLine":48,"endColumn":17},{"ruleId":"197","severity":1,"message":"198","line":1,"column":16,"nodeType":"199","messageId":"200","endLine":1,"endColumn":25},{"ruleId":"197","severity":1,"message":"255","line":1,"column":27,"nodeType":"199","messageId":"200","endLine":1,"endColumn":35},{"ruleId":"197","severity":1,"message":"198","line":1,"column":16,"nodeType":"199","messageId":"200","endLine":1,"endColumn":25},{"ruleId":"197","severity":1,"message":"256","line":1,"column":37,"nodeType":"199","messageId":"200","endLine":1,"endColumn":47},{"ruleId":"197","severity":1,"message":"257","line":3,"column":27,"nodeType":"199","messageId":"200","endLine":3,"endColumn":33},{"ruleId":"197","severity":1,"message":"250","line":6,"column":10,"nodeType":"199","messageId":"200","endLine":6,"endColumn":14},{"ruleId":"197","severity":1,"message":"232","line":6,"column":16,"nodeType":"199","messageId":"200","endLine":6,"endColumn":21},{"ruleId":"197","severity":1,"message":"233","line":6,"column":23,"nodeType":"199","messageId":"200","endLine":6,"endColumn":29},{"ruleId":"197","severity":1,"message":"258","line":6,"column":31,"nodeType":"199","messageId":"200","endLine":6,"endColumn":44},{"ruleId":"197","severity":1,"message":"259","line":8,"column":10,"nodeType":"199","messageId":"200","endLine":8,"endColumn":23},{"ruleId":"197","severity":1,"message":"260","line":69,"column":22,"nodeType":"199","messageId":"200","endLine":69,"endColumn":34},{"ruleId":"237","severity":1,"message":"261","line":174,"column":8,"nodeType":"239","endLine":174,"endColumn":44},{"ruleId":"237","severity":1,"message":"261","line":179,"column":5,"nodeType":"239","endLine":179,"endColumn":41},{"ruleId":"197","severity":1,"message":"215","line":13,"column":11,"nodeType":"199","messageId":"200","endLine":13,"endColumn":27},"no-native-reassign",["262"],"no-negated-in-lhs",["263"],"no-unused-vars","'useEffect' is defined but never used.","Identifier","unusedVar","'BrowserRouter' is defined but never used.","'HeaderName' is assigned a value but never used.","'setHeaderName' is assigned a value but never used.","'IsBack' is assigned a value but never used.","'setIsBack' is assigned a value but never used.","'setData' is assigned a value but never used.","'Radio' is defined but never used.","'Dropdown' is defined but never used.","'Menu' is defined but never used.","'Checkbox' is defined but never used.","'DownOutlined' is defined but never used.","'UserOutlined' is defined but never used.","'accountId' is assigned a value but never used.","'status' is assigned a value but never used.","'transactionstate' is assigned a value but never used.","'amount' is assigned a value but never used.","react-hooks/exhaustive-deps","Effect callbacks are synchronous to prevent race conditions. Put the async function inside:\n\nuseEffect(() => {\n async function fetchData() {\n // You can await here\n const response = await MyAPI.getData(someId);\n // ...\n }\n fetchData();\n}, [someId]); // Or [] if effect doesn't need props or state\n\nLearn more about data fetching with Hooks: https://reactjs.org/link/hooks-data-fetching","ArrowFunctionExpression","React Hook useEffect has missing dependencies: 'account', 'accountId', and 'transactiondispatch'. Either include them or remove the dependency array.","ArrayExpression",["264"],"'path' is assigned a value but never used.","React Hook useEffect has a missing dependency: 'transactiondispatch'. Either include it or remove the dependency array.",["265"],"'addContact' is assigned a value but never used.","'history' is assigned a value but never used.","'url' is assigned a value but never used.","'setUsername' is assigned a value but never used.","'setPassword' is assigned a value but never used.","'Component' is defined but never used.","'Route' is defined but never used.","'Switch' is defined but never used.","'PieChartOutlined' is defined but never used.","'siderLayoutArray' is assigned a value but never used.","'siderJson' is assigned a value but never used.","jsx-a11y/anchor-is-valid","The href attribute is required for an anchor to be keyboard accessible. Provide a valid, navigable address as the href value. If you cannot provide an href, but still need the element to resemble a link, use a button and change it with appropriate styles. Learn more: https://github.com/evcohen/eslint-plugin-jsx-a11y/blob/master/docs/rules/anchor-is-valid.md","JSXOpeningElement","default-case","Expected a default case.","SwitchStatement","missingDefaultCase","'AddedSuccess' is defined but never used.","eqeqeq","Expected '===' and instead saw '=='.","BinaryExpression","unexpected","'Container' is defined but never used.","'Link' is defined but never used.","'match' is assigned a value but never used.","'value' is assigned a value but never used.","'globalContext' is assigned a value but never used.","'handleSelect' is assigned a value but never used.","'useState' is defined but never used.","'useContext' is defined but never used.","'Button' is defined but never used.","'useRouteMatch' is defined but never used.","'GlobalContext' is defined but never used.","'setAccordion' is assigned a value but never used.","The href attribute requires a valid value to be accessible. Provide a valid, navigable address as the href value. If you cannot provide a valid href, but still need the element to resemble a link, use a button and change it with appropriate styles. Learn more: https://github.com/evcohen/eslint-plugin-jsx-a11y/blob/master/docs/rules/anchor-is-valid.md","no-global-assign","no-unsafe-negation",{"desc":"266","fix":"267"},{"desc":"268","fix":"269"},"Update the dependencies array to be: [account, accountId, transactiondispatch]",{"range":"270","text":"271"},"Update the dependencies array to be: [transactiondispatch]",{"range":"272","text":"273"},[8741,8743],"[account, accountId, transactiondispatch]",[13398,13400],"[transactiondispatch]"]