Skip to content

Commit

Permalink
Browse files Browse the repository at this point in the history
- removed redundant code in react code
sricharan200 committed Nov 22, 2023
1 parent 85bd240 commit 289ac9f
Showing 12 changed files with 205 additions and 324 deletions.
114 changes: 52 additions & 62 deletions ui/src/components/AccountDisclosure.jsx
Original file line number Diff line number Diff line change
@@ -2,68 +2,58 @@ import Card from "react-bootstrap/Card";

const AccountDisclosure = () => {
return (
<Card
style={{
marginTop: "1.5vh",
}}
>
<Card.Body>
<Card.Text style={{ fontSize: "1vh" }}>
<Card.Body className="text-muted">
<span>
<strong>Account Disclosures</strong>
</span>
<br />
<br />
<span>Investment and Insurance Products are:</span>
<br />
<ul>
<li>
Not Insured by the MFIC (Martian Financial Institutions
Commission) or Any Martian Government Agency
</li>
<li>
Not a Deposit or Other Obligation of, or Guaranteed by, the Bank
or Any Bank Affiliate
</li>
<li>
Subject to Investment Risks, Including Possible Loss of the
Principal Amount Invested
</li>
</ul>
<span>
Investment products and services are offered through Martian Bank
Advisors. Martian Bank Advisors is a trade name used by Martian
Clearing Services, LLC (MCSC) and Martian Bank Advisors Financial
Network, LLC, Members MPIC (Martian Planetary Investment
Commission), separate registered broker-dealers and non-bank
affiliates of Martian Bank Corporation.
</span>
<br />
<span>
Deposit products offered by Martian Bank, M.A. Member MFDIC
(Martian Financial Deposit Insurance Corporation).
</span>
<br />
<span>Equal Planetary Habitat Lender</span>
<br />
<span>
At Martian Bank, we are committed to promoting sustainability and
supporting environmental initiatives across our operations. Join
us in our mission to build a greener and more sustainable future
for all Martian inhabitants.
</span>
<br />
<span>
For inquiries regarding our products and services or to learn more
about our commitment to environmental sustainability, please visit
our website or contact our customer support team.
</span>
<br />
<br />
<span>© 2023 Martian Bank. All rights reserved.</span>
</Card.Body>
</Card.Text>
<Card style={{ marginTop: "1.5vh" }}>
<Card.Body className="text-muted">
<strong>Account Disclosures</strong>
<br />
<br />
<span>Investment and Insurance Products are:</span>
<br />
<ul>
<li>
Not Insured by the MFIC (Martian Financial Institutions
Commission) or Any Martian Government Agency
</li>
<li>
Not a Deposit or Other Obligation of, or Guaranteed by, the Bank
or Any Bank Affiliate
</li>
<li>
Subject to Investment Risks, Including Possible Loss of the
Principal Amount Invested
</li>
</ul>
<span>
Investment products and services are offered through Martian Bank
Advisors. Martian Bank Advisors is a trade name used by Martian
Clearing Services, LLC (MCSC) and Martian Bank Advisors Financial
Network, LLC, Members MPIC (Martian Planetary Investment
Commission), separate registered broker-dealers and non-bank
affiliates of Martian Bank Corporation.
</span>
<br />
<span>
Deposit products offered by Martian Bank, M.A. Member MFDIC
(Martian Financial Deposit Insurance Corporation).
</span>
<br />
<span>Equal Planetary Habitat Lender</span>
<br />
<span>
At Martian Bank, we are committed to promoting sustainability and
supporting environmental initiatives across our operations. Join
us in our mission to build a greener and more sustainable future
for all Martian inhabitants.
</span>
<br />
<span>
For inquiries regarding our products and services or to learn more
about our commitment to environmental sustainability, please visit
our website or contact our customer support team.
</span>
<br />
<br />
<span>© 2023 Martian Bank. All rights reserved.</span>
</Card.Body>
</Card>
);
81 changes: 35 additions & 46 deletions ui/src/components/Footer.jsx
Original file line number Diff line number Diff line change
@@ -9,54 +9,42 @@ import "../index.css";

const Footer = () => {
return (
<div className="bg-dark" style={{flex: 2}}>
<Row style={{ marginTop: "2vh", width: "100vw" }}>
<div className="bg-dark footer-container">
<Row className="footer-row">
<Col md={12}>
<Card
className="bg-dark text-white border-0"
style={{
marginTop: "1.5vh",
position: "absolute",
bottom: 0,
width: "100%",
}}
>
<Card className="bg-dark text-white border-0 footer-card">
<Card.Body>
<Card.Text style={{ fontSize: "1.25vh" }}>
<Card.Body>
<span>
<strong>Account Disclosures</strong>
</span>
<br />
<br />
<span>Investment and Insurance Products are: </span>
1. Not Insured by the MFIC (Martian Financial Institutions
Commission) or Any Martian Government Agency 2. Not a Deposit
or Other Obligation of, or Guaranteed by, the Bank or 3. Any
Bank Affiliate Subject to Investment Risks, Including Possible
Loss of the Principal Amount Invested
<span>
Investment products and services are offered through Martian
Bank Advisors. Martian Bank Advisors is a trade name used by
Martian Clearing Services, LLC (MCSC) and Martian Bank
Advisors Financial Network, LLC, Members MPIC (Martian
Planetary Investment Commission), separate registered
broker-dealers and non-bank affiliates of Martian Bank
Corporation.
</span>
<br />
<span>
Deposit products offered by Martian Bank, M.A. Member MFDIC
(Martian Financial Deposit Insurance Corporation).
</span>
<br />
<span>Equal Planetary Habitat Lender</span>
<br />
<span>
MFICO is a registered trademark of Martian Isaac Corporation
in Mars and other celestial bodies.
</span>
</Card.Body>
<Card.Text className="footer-text">
<strong>Account Disclosures</strong>
<br />
<br />
<span>Investment and Insurance Products are: </span>
<ul>
<li>Not Insured by the MFIC (Martian Financial Institutions Commission) or Any Martian Government Agency</li>
<li>Not a Deposit or Other Obligation of, or Guaranteed by, the Bank</li>
<li>Any Bank Affiliate Subject to Investment Risks, Including Possible Loss of the Principal Amount Invested</li>
</ul>
<span>
Investment products and services are offered through Martian
Bank Advisors. Martian Bank Advisors is a trade name used by
Martian Clearing Services, LLC (MCSC) and Martian Bank
Advisors Financial Network, LLC, Members MPIC (Martian
Planetary Investment Commission), separate registered
broker-dealers and non-bank affiliates of Martian Bank
Corporation.
</span>
<br />
<span>
Deposit products offered by Martian Bank, M.A. Member MFDIC
(Martian Financial Deposit Insurance Corporation).
</span>
<br />
<span>Equal Planetary Habitat Lender</span>
<br />
<span>
MFICO is a registered trademark of Martian Isaac Corporation
in Mars and other celestial bodies.
</span>
</Card.Text>
</Card.Body>
</Card>
@@ -67,3 +55,4 @@ const Footer = () => {
};

export default Footer;

60 changes: 26 additions & 34 deletions ui/src/components/FormContainer.jsx
Original file line number Diff line number Diff line change
@@ -5,46 +5,37 @@
*/

import { Container, Row, Col } from "react-bootstrap";
import "../styles/FormContainer.css"; // assuming you have a CSS file for styles

This comment has been minimized.

Copy link
@jashmehta3300

jashmehta3300 Nov 25, 2023

We do not have separate CSS files for styling each component. Importing a non-existent file is breaking the code. You can either create a styles folder with separate CSS files for each component or use in-line styling.


const FormContainer = ({ children, position }) => {
return (
<Container>
{position === "left" ? (
<>
<Row className="justify-content-md bg-light" style={{ margin: "5vh"}}>
<Col
md={5}
className="rounded border p-5"
style={{ margin: "5vh" }}
>
{children}
</Col>
<Row className="justify-content-md bg-light form-row">
<Col md={5} className="form-col">
{children}
</Col>

<Col
md={6}
className="rounded p-5"
style={{ margin: "5vh" }}
>
<Row>
<Col md={12} className="p-5">
<h1 className="text-center">$100 bonus on us!</h1>
<p className="text-center">
Open an eligible account with qualifying electronic deposits and get $100 bonus.
</p>
</Col>
</Row>
<Row>
<Col md={12} className="p-5">
<img
src="./src/assets/card.png"
alt="card"
className="img-fluid"
/>
</Col>
</Row>
</Col>
</Row>
</>
<Col md={6} className="rounded p-5">
<Row>
<Col md={12} className="p-5">
<h1 className="text-center">$100 bonus on us!</h1>
<p className="text-center">
Open an eligible account with qualifying electronic deposits and get $100 bonus.
</p>
</Col>
</Row>
<Row>
<Col md={12} className="p-5">
<img
src="./src/assets/card.png"
alt="card"
className="img-fluid"
/>
</Col>
</Row>
</Col>
</Row>
) : (
<Row className="justify-content-md-center mt-5">
<Col md={6} className="card p-5">
@@ -57,3 +48,4 @@ const FormContainer = ({ children, position }) => {
};

export default FormContainer;

40 changes: 19 additions & 21 deletions ui/src/components/Header.jsx
Original file line number Diff line number Diff line change
@@ -4,35 +4,33 @@
* license that can be found in the LICENSE file.
*/

import { Navbar, Nav, Container, NavDropdown } from "react-bootstrap";
import { toast } from "react-toastify";
import { LinkContainer } from "react-router-bootstrap";
import { useSelector, useDispatch } from "react-redux";
import { useNavigate } from "react-router-dom";
import { useLogoutMutation } from "../slices/usersApiSlice";
import { logout } from "../slices/authSlice";
import "../index.css";
import React from 'react';
import { Navbar, Nav, Container, NavDropdown } from 'react-bootstrap';
import { toast } from 'react-toastify';
import { LinkContainer } from 'react-router-bootstrap';
import { useSelector, useDispatch } from 'react-redux';
import { useNavigate } from 'react-router-dom';
import { useLogoutMutation } from '../slices/usersApiSlice';
import { logout } from '../slices/authSlice';
import '../index.css';

const CustomNavItems = ({ name, link }) => {
return (
<Nav.Item style={{ marginRight: 20 }}>
<LinkContainer to={link}>
<Nav.Link className="text-white">
<span style={{ fontSize: "2vh" }}>{name}</span>
</Nav.Link>
</LinkContainer>
</Nav.Item>
);
};
const CustomNavItems = ({ name, link }) => (
<Nav.Item style={{ marginRight: 20 }}>
<LinkContainer to={link}>
<Nav.Link className="text-white">
<span style={{ fontSize: '2vh' }}>{name}</span>
</Nav.Link>
</LinkContainer>
</Nav.Item>
);

const Header = () => {
const { userInfo } = useSelector((state) => state.auth);

const dispatch = useDispatch();
const navigate = useNavigate();

const [logoutApiCall] = useLogoutMutation();


const logoutHandler = async () => {
try {
// const jwtCookie = Cookies.get("jwt");
24 changes: 12 additions & 12 deletions ui/src/components/Hero.jsx
Original file line number Diff line number Diff line change
@@ -12,39 +12,38 @@ import {
faShieldAlt,
faRocket,
} from "@fortawesome/free-solid-svg-icons";
import "../styles/Hero.css"; // assuming you have a CSS file for styles

const Hero = () => {
return (
<div className="py-5">
<Container className="d-flex justify-content-center">
<Card className="p-5 d-flex flex-column align-items-center hero-card w-75">
<h1 className="text-center mb-4">
<span style={{ fontSize: "4vh", fontWeight: "bold" }}>
Welcome to Martian Bank
</span>
<h1 className="text-center mb-4 hero-heading">
Welcome to Martian Bank
</h1>
<p style={{ fontSize: "2vh", textAlign: "center" }}>
<p className="hero-text">

This comment has been minimized.

Copy link
@jashmehta3300

jashmehta3300 Nov 25, 2023

I see that you have removed the inline styling (which is being repeated multiple times in the code) and added a common className, which is great. But I can't find the styling for the custom className anywhere. This will break the styling in the frontend.

Secure your Martian finances with Red Planet Bank - your trusted
financial partner on the Red Planet. Explore our innovative banking
solutions, enjoy top-notch security measures, and fuel your Martian
ventures with our competitive loans and investment opportunities.
</p>
<div className="d-flex mt-4 mb-4">
<LinkContainer to="/login">
<Button variant="dark" className="me-5 px-5 py-2">
<span style={{ fontSize: "2vh" }}>Login</span>
<Button variant="dark" className="hero-button">
Login
</Button>
</LinkContainer>
<LinkContainer to="/register">
<Button variant="dark" className="me-5 px-5 py-2">
<span style={{ fontSize: "2vh" }}>Signup</span>
<Button variant="dark" className="hero-button">
Signup
</Button>
</LinkContainer>
</div>
<div className="d-flex justify-content-around mt-5">
<Row>
<Col md={4}>
<Card className="text-center border-0">
<Card className="feature-card">
<FontAwesomeIcon
icon={faMoneyBillWave}
className="display-3 my-3"
@@ -59,7 +58,7 @@ const Hero = () => {
</Card>
</Col>
<Col md={4}>
<Card className="text-center border-0">
<Card className="feature-card">
<FontAwesomeIcon
icon={faShieldAlt}
className="display-3 my-3"
@@ -74,7 +73,7 @@ const Hero = () => {
</Card>
</Col>
<Col md={4}>
<Card className="text-center border-0">
<Card className="feature-card">
<FontAwesomeIcon icon={faRocket} className="display-3 my-3" />
<Card.Body>
<Card.Title>Martian Ventures</Card.Title>
@@ -94,3 +93,4 @@ const Hero = () => {
};

export default Hero;

15 changes: 3 additions & 12 deletions ui/src/components/Loader.jsx
Original file line number Diff line number Diff line change
@@ -5,20 +5,11 @@
*/

import { Spinner } from "react-bootstrap";
import "../styles/Loader.css"; // Assuming you have a CSS file for styles

const Loader = () => {
return (
<Spinner
animation="border"
role="status"
style={{
width: "100px",
height: "100px",
margin: "auto",
display: "block",
}}
></Spinner>
);
return <Spinner animation="border" role="status" className="loader"></Spinner>;
};

export default Loader;

3 changes: 2 additions & 1 deletion ui/src/main.jsx
Original file line number Diff line number Diff line change
@@ -35,7 +35,7 @@ import ApplyLoan from "./screens/ApplyLoanScreen.jsx";
const router = createBrowserRouter(
createRoutesFromElements(
<Route path="/" element={<App />}>
<Route index={true} path="/" element={<HomeScreen />} />
<Route path="/" element={<HomeScreen />} />
<Route path="/login" element={<LoginScreen />} />
<Route path="/register" element={<RegisterScreen />} />
<Route path="/find-atm" element={<AtmScreen />} />
@@ -59,3 +59,4 @@ ReactDOM.createRoot(document.getElementById("root")).render(
</React.StrictMode>
</Provider>
);

27 changes: 7 additions & 20 deletions ui/src/screens/AccInfoScreen.jsx
Original file line number Diff line number Diff line change
@@ -49,18 +49,8 @@ const AccInfoScreen = () => {

return (
<FormContainer>
<h4
className="bg-light mx-3"
style={{
textAlign: "center",
paddingTop: "2vh",
paddingBottom: "2vh",
marginBottom: "3vh",
}}
>
Account Information
</h4>

<h4 className="acc-info-heading">Account Information</h4>

<Form>
<Row>
<Col md={4}>
@@ -168,24 +158,21 @@ const AccInfoScreen = () => {
<Row className="my-4">
<Col md={6}>
<Button
disabled={isLoading}
style={{ width: "100%" }}
// Remove disabled={isLoading} if isLoading is not being used
className="wide-button mt-3 mr-3"
type="submit"
onClick={submitHandler}
variant="dark"
className="mt-3 mr-3"
>
Submit
</Button>
</Col>
<Col md={6}>
<Link to="/">
<Button
disabled={isLoading}
style={{ width: "100%" }}
type="submit"
className="wide-button mt-3 mr-3"
type="button" // Changed from 'submit' to 'button'
variant="dark"
className="mt-3 mr-3"
>
Go Back
</Button>
@@ -194,7 +181,7 @@ const AccInfoScreen = () => {
</Row>
</Form>

{isLoading && <Loader />}
{/* isLoading && <Loader /> */}
</FormContainer>
);
};
17 changes: 3 additions & 14 deletions ui/src/screens/ApplyLoanScreen.jsx
Original file line number Diff line number Diff line change
@@ -170,16 +170,7 @@ const ApplyLoan = () => {

return (
<FormContainer>
<h4
className="bg-light mx-3"
style={{
textAlign: "center",
paddingTop: "2vh",
paddingBottom: "2vh",
}}
>
Loan Application
</h4>
<h4 className="loan-application-heading">Loan Application</h4>
{isLoading ? (
<Loader />
) : (
@@ -473,20 +464,18 @@ const ApplyLoan = () => {
<Row>
<Col md={6}>
<Button
style={{ width: "100%" }}
className="wide-button mt-5 mr-3"
type="submit"
variant="dark"
className="mt-5 mr-3"
>
Apply
</Button>
</Col>
<Col md={6}>
<Link to="/loan">
<Button
style={{ width: "100%" }}
className="wide-button mt-5"
variant="dark"
className="mt-5"
>
Cancel
</Button>
68 changes: 20 additions & 48 deletions ui/src/screens/ProfileScreen.jsx
Original file line number Diff line number Diff line change
@@ -23,67 +23,39 @@ const ProfileScreen = () => {

const dispatch = useDispatch();
const navigate = useNavigate();

const { userInfo } = useSelector((state) => state.auth);

const [updateProfile, { isLoading }] = useUpdateUserMutation();

useEffect(() => {
setName(userInfo.name);
setEmail(userInfo.email);
}, [userInfo.email, userInfo.name]);
if (userInfo) {
setName(userInfo.name);
setEmail(userInfo.email);
}
}, [userInfo]);

const submitHandler = async (e) => {
e.preventDefault();
if (password !== confirmPassword) {
toast.error("Passwords do not match");
} else {
try {
const res = await updateProfile({
name: name,
email: email,
password: password,
// token: Cookies.get("jwt"),
}).unwrap();
dispatch(setCredentials(res));
toast.success("Your profile has been updated", {
className: "toast-container-custom",
autoClose: 500,
hideProgressBar: true,
closeOnClick: true,
pauseOnHover: true,
draggable: true,
progress: undefined,
theme: "dark",
});
navigate("/");
} catch (err) {
toast.error(err?.data?.message || err.error, {
className: "toast-container-custom",
autoClose: 500,
hideProgressBar: true,
closeOnClick: true,
pauseOnHover: true,
draggable: true,
progress: undefined,
theme: "dark",
});
}
return;
}

try {
const res = await updateProfile({
name,
email,
password,
}).unwrap();
dispatch(setCredentials(res));
toast.success("Your profile has been updated");
navigate("/");
} catch (err) {
toast.error(err?.data?.message || err.error);
}
};
return (
<FormContainer>
<h4
className="bg-light mx-3"
style={{
textAlign: "center",
paddingTop: "1.5vh",
paddingBottom: "1.5vh",
}}
>
UPDATE &nbsp; DETAILS
</h4>

<h4 className="profile-header">UPDATE &nbsp; DETAILS</h4>
<Form onSubmit={submitHandler}>
<Form.Group className="my-4" controlId="name">
<Form.Label>Name</Form.Label>
42 changes: 10 additions & 32 deletions ui/src/screens/RegisterScreen.jsx
Original file line number Diff line number Diff line change
@@ -40,38 +40,16 @@ const RegisterScreen = () => {

if (password !== confirmPassword) {
toast.error("Passwords do not match");
} else {
try {
const res = await register({ name, email, password }).unwrap();
console.log(res);
dispatch(setCredentials({ ...res }));
toast.success(
"Congratulations! Your account with Martian Bank has been created.",
{
className: "toast-container-custom",
autoClose: 500,
hideProgressBar: true,
closeOnClick: true,
pauseOnHover: true,
draggable: true,
progress: undefined,
theme: "dark",
}
);
navigate("/login");
} catch (err) {
console.log(err);
toast.error(err?.data?.message || err.error, {
className: "toast-container-custom",
autoClose: 500,
hideProgressBar: true,
closeOnClick: true,
pauseOnHover: true,
draggable: true,
progress: undefined,
theme: "dark",
});
}
return;
}

try {
const res = await register({ name, email, password }).unwrap();
dispatch(setCredentials({ ...res }));
toast.success("Congratulations! Your account has been created.");
navigate("/login");
} catch (err) {
toast.error(err?.data?.message || err.error);
}
};
return (
38 changes: 16 additions & 22 deletions ui/src/screens/TransactionScreen.jsx
Original file line number Diff line number Diff line change
@@ -23,26 +23,25 @@ import "../index.css";

const TransactionScreen = () => {
const dispatch = useDispatch();

const { userInfo } = useSelector((state) => state.auth);

const [allAccounts, setAllAccounts] = useState([]);

const [selectedAccount, setSelectedAccount] = useState("");
const [history, setHistory] = useState([]);

const [getTransactions, { isLoading }] = useGetTransactionsMutation();
const [getAllAccounts, { isLoading: isLoading1 }] =
useGetAllAccountsMutation();
const [getAllAccounts, { isLoading: isLoading1 }] = useGetAllAccountsMutation();

useEffect(() => {
fetchAccounts();
}, []);

const fetchHistory = async (e) => {
setSelectedAccount(e.target.value);
e.preventDefault();
const accountNumber = e.target.value;
setSelectedAccount(accountNumber);
if (!accountNumber || accountNumber === "Select Account") return;

try {
const data = new FormData();
data.append("account_number", e.target.value);
data.append("account_number", accountNumber);
const res = await getTransactions(data).unwrap();
console.log(res)
dispatch(storeTransaction(res));
setHistory(res.response);
} catch (err) {
@@ -60,18 +59,13 @@ const TransactionScreen = () => {
};

const fetchAccounts = async () => {
const acc_data = new FormData();
acc_data.append("email_id", userInfo.email);
const res = await getAllAccounts(acc_data).unwrap();
dispatch(getAccounts(res));
setAllAccounts(res.response);
};

useEffect(() => {
try {
fetchAccounts();
const acc_data = new FormData();
acc_data.append("email_id", userInfo.email);
const res = await getAllAccounts(acc_data).unwrap();
dispatch(getAccounts(res));
setAllAccounts(res.response);
} catch (err) {
console.log(err);
toast.error("Error in fetching accounts!", {
className: "toast-container-custom",
autoClose: 500,
@@ -83,7 +77,7 @@ const TransactionScreen = () => {
theme: "dark",
});
}
}, []);
};

return (
<Container fluid style={{ overflowY: "auto", marginTop: "10vh" }}>

0 comments on commit 289ac9f

Please sign in to comment.