Skip to content

Commit 78174e8

Browse files
Aksh-Bansal-devAksh-Bansal-dev
committed
refactor(frontend): improve code quality
- Changed variable names to improve readability. - Separated styles in `signupLoginStyle.ts` to make code more maintainable. - Moved club's social media urls and email to global.
1 parent bc8c608 commit 78174e8

15 files changed

Lines changed: 172 additions & 214 deletions

File tree

‎frontend/src/App.css‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -12,7 +12,7 @@ body {
1212
--svg-bg: #132d57;
1313
--primary-btn-color: #3e3d55;
1414
--nav-btn-background: #707070;
15-
--background-gradient: #00050b;
15+
--primary-bg: #00050b;
1616
--golden: #ffac2f;
1717
--dark-golden: #ff9c08;
1818
--light-golden: #ffd166;
@@ -26,7 +26,7 @@ body::-webkit-scrollbar {
2626
}
2727

2828
body::-webkit-scrollbar-track {
29-
background: var(--background-gradient); /* color of the tracking area */
29+
background: var(--primary-bg); /* color of the tracking area */
3030
}
3131

3232
body::-webkit-scrollbar-thumb {
@@ -39,5 +39,5 @@ body::-webkit-scrollbar-thumb {
3939
}
4040

4141
.App {
42-
background: var(--background-gradient);
42+
background: var(--primary-bg);
4343
}

‎frontend/src/App.test.tsx‎

Lines changed: 0 additions & 8 deletions
This file was deleted.

‎frontend/src/components/Cards/DomainCard_v2.tsx‎

Lines changed: 8 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -50,7 +50,7 @@ const useStyles = makeStyles((theme: Theme) =>
5050
border: "2px solid white",
5151
transform: "translateY(-6vh)",
5252
},
53-
icoCon: {
53+
iconsContainer: {
5454
transform: "translateY(-5vh)",
5555
display: "flex",
5656
justifyContent: "space-around",
@@ -66,19 +66,19 @@ const useStyles = makeStyles((theme: Theme) =>
6666
interface DomainCardInterface {
6767
name: string;
6868
team: string;
69-
github: string;
70-
linkedIn: string;
69+
githubProfileUrl: string;
70+
linkedInProfileUrl: string;
7171
email: string;
7272
profileImg: string;
7373
}
7474

7575
const DomainCard2: React.FC<DomainCardInterface> = ({
7676
name,
7777
team,
78-
github,
78+
githubProfileUrl,
7979
email,
8080
profileImg,
81-
linkedIn,
81+
linkedInProfileUrl,
8282
}) => {
8383
const classes = useStyles();
8484
return (
@@ -90,8 +90,8 @@ const DomainCard2: React.FC<DomainCardInterface> = ({
9090
/>
9191
<Typography className={classes.title}>{name}</Typography>
9292
<Typography className={classes.subTitle}>{team}</Typography>
93-
<div className={classes.icoCon}>
94-
<a href={github} target="_blank">
93+
<div className={classes.iconsContainer}>
94+
<a href={githubProfileUrl} target="_blank">
9595
<IconButton>
9696
<GitHub className={classes.icons} />
9797
</IconButton>
@@ -101,7 +101,7 @@ const DomainCard2: React.FC<DomainCardInterface> = ({
101101
<Email className={classes.icons} />
102102
</IconButton>
103103
</a>
104-
<a href={linkedIn} target="_blank">
104+
<a href={linkedInProfileUrl} target="_blank">
105105
<IconButton>
106106
<LinkedIn className={classes.icons} />
107107
</IconButton>

‎frontend/src/components/Cards/ProjectCardv3.tsx‎

Lines changed: 10 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -34,13 +34,13 @@ const useStyles = makeStyles(() =>
3434
fontSize: "1rem",
3535
fontFamily: "monospace",
3636
},
37-
body: {
37+
description: {
3838
marginTop: "5vh",
3939
fontSize: "1rem",
4040
width: "80%",
4141
fontFamily: "monospace",
4242
},
43-
owner: {
43+
createdBy: {
4444
marginTop: "5vh",
4545
fontSize: "1rem",
4646
opacity: 0.5,
@@ -57,37 +57,37 @@ interface ProjectCardv3Props {
5757
projectName: string;
5858
lang: string;
5959
description: string;
60-
dev: string;
60+
createdBy: string;
6161
url: string;
6262
image: string;
6363
}
6464
const ProjectCardv3: React.FC<ProjectCardv3Props> = ({
6565
projectName,
6666
lang,
6767
description,
68-
dev,
68+
createdBy,
6969
url,
7070
image,
7171
}) => {
7272
const classes = useStyles();
73-
const [display, setDisplay] = React.useState<string>("none");
73+
const [showInfo, setShowInfo] = React.useState<boolean>(false);
7474

7575
return (
7676
<Card className={classes.root}>
7777
<div
78-
style={{ display }}
79-
onMouseLeave={() => setDisplay("none")}
78+
style={{ display: showInfo ? "block" : "none" }}
79+
onMouseLeave={() => setShowInfo(false)}
8080
className={classes.info}
8181
>
8282
<a href={url} className={classes.title} target="_blank">
8383
<Typography className={classes.title}>{projectName}</Typography>
8484
</a>
8585
<Typography className={classes.lang}>{lang}</Typography>
86-
<Typography className={classes.body}>{description}</Typography>
87-
<Typography className={classes.owner}>{dev}</Typography>
86+
<Typography className={classes.description}>{description}</Typography>
87+
<Typography className={classes.createdBy}>{createdBy}</Typography>
8888
</div>
8989
<CardMedia
90-
onMouseEnter={() => setDisplay("block")}
90+
onMouseEnter={() => setShowInfo(true)}
9191
image={image}
9292
className={classes.media}
9393
/>

‎frontend/src/components/FormikDateTimeField.tsx‎

Lines changed: 0 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -20,10 +20,6 @@ const FormikDateTimeField: React.FC<FormikDateTimeFieldProps> = ({
2020
const [field, meta] = useField<any>(props);
2121
const { setFieldValue } = useFormikContext();
2222
const errorText = meta.error && meta.touched ? meta.error : "";
23-
// const obj = {
24-
// label,
25-
// type,
26-
// };
2723
return (
2824
<MuiPickersUtilsProvider utils={DateFnsUtils}>
2925
<Grid container direction="column" justify="center">

‎frontend/src/components/FormikTextField.tsx‎

Lines changed: 26 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,31 @@
11
import { TextField } from "@material-ui/core";
2+
import { createStyles, makeStyles } from "@material-ui/core/styles";
23
import { FieldHookConfig, useField } from "formik";
34
import React from "react";
4-
import { useSignupLoginStyles } from "./RegistrationForm/signupLoginStyle";
5+
6+
export const useStyles = makeStyles(() =>
7+
createStyles({
8+
cssLabel: {
9+
color: "#ededed",
10+
},
11+
12+
cssOutlinedInput: {
13+
"&$cssFocused $notchedOutline": {
14+
borderColor: `#ededed !important`,
15+
},
16+
color: "#ededed",
17+
},
18+
19+
cssFocused: {
20+
color: "#ededed",
21+
},
22+
23+
notchedOutline: {
24+
borderWidth: "1px",
25+
borderColor: "#ededed !important",
26+
},
27+
})
28+
);
529

630
type FormikTextFieldProps = {
731
className: string;
@@ -17,7 +41,7 @@ const FormikTextField: React.FC<FormikTextFieldProps> = ({
1741
...props
1842
}) => {
1943
// eslint-disable-next-line @typescript-eslint/ban-types
20-
const classes = useSignupLoginStyles();
44+
const classes = useStyles();
2145
const [field, meta] = useField<string>(props);
2246
const errorText = meta.error && meta.touched ? meta.error : "";
2347
const obj = {

‎frontend/src/components/HomeFooter/index.tsx‎

Lines changed: 10 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -1,23 +1,26 @@
11
import { Email, GitHub, Instagram, LinkedIn } from "@material-ui/icons";
22
import React from "react";
3+
import {
4+
bitbyteEmail,
5+
bitbyteGithubUrl,
6+
bitbyteInstaUrl,
7+
bitbyteLinkedInUrl,
8+
} from "src/store/global";
39
import styles from "./style.module.css";
410

511
const HomeFooter: React.FC = () => {
612
return (
713
<div className={styles.container}>
8-
<a href="https://www.instagram.com/bitbyte.tpc/" target="_blank">
14+
<a href={bitbyteInstaUrl} target="_blank">
915
<Instagram className={styles.icon} />
1016
</a>
11-
<a href="mailto:theprogclub@iiitdmj.ac.in" target="_blank">
17+
<a href={"mailto:" + bitbyteEmail} target="_blank">
1218
<Email className={styles.icon} />
1319
</a>
14-
<a
15-
href="https://www.linkedin.com/company/bitbyte-tpc/about/"
16-
target="_blank"
17-
>
20+
<a href={bitbyteLinkedInUrl} target="_blank">
1821
<LinkedIn className={styles.icon} />
1922
</a>
20-
<a href="https://github.com/BitByte-TPC" target="_blank">
23+
<a href={bitbyteGithubUrl} target="_blank">
2124
<GitHub className={styles.icon} />
2225
</a>
2326
</div>

‎frontend/src/components/Navs/Nav_v2/index.tsx‎

Lines changed: 23 additions & 22 deletions
Original file line numberDiff line numberDiff line change
@@ -53,11 +53,10 @@ const Nav2: React.FC = () => {
5353
const token = useTokenStore((state) => state.token);
5454
const setToken = useTokenStore((state) => state.setToken);
5555
const classes = useStyles();
56-
const [drawerOpen, setdrawerOpen] = React.useState(false);
56+
const [drawerOpen, setDrawerOpen] = React.useState(false);
5757

5858
const toggleDrawer = () => {
59-
setdrawerOpen(!drawerOpen);
60-
return undefined;
59+
setDrawerOpen(!drawerOpen);
6160
};
6261
const history = useHistory();
6362

@@ -68,33 +67,35 @@ const Nav2: React.FC = () => {
6867
}
6968
};
7069

71-
const drawerList = () => (
70+
const drawerList = (
7271
<div
7372
className={classes.drawerList}
7473
role="presentation"
7574
onClick={toggleDrawer}
7675
>
7776
<List>
78-
{linklist.map((e, key) => {
79-
if (e.loginReq) {
80-
if (!!token)
81-
return (
82-
<div
83-
className={classes.pseudolink}
84-
onClick={async () => await handleLogout(e.url)}
85-
key={key}
86-
>
87-
<ListItem button>
88-
<Typography className={classes.other}>{e.name}</Typography>
89-
</ListItem>
90-
</div>
91-
);
92-
else return null;
77+
{linklist.map((linkData, key) => {
78+
if (linkData.loginReq) {
79+
return !!token ? (
80+
<div
81+
className={classes.pseudolink}
82+
onClick={async () => await handleLogout(linkData.url)}
83+
key={key}
84+
>
85+
<ListItem button>
86+
<Typography className={classes.other}>
87+
{linkData.name}
88+
</Typography>
89+
</ListItem>
90+
</div>
91+
) : null;
9392
}
9493
return (
95-
<Link to={e.url} key={key}>
94+
<Link to={linkData.url} key={key}>
9695
<ListItem button>
97-
<Typography className={classes.other}>{e.name}</Typography>
96+
<Typography className={classes.other}>
97+
{linkData.name}
98+
</Typography>
9899
</ListItem>
99100
</Link>
100101
);
@@ -126,7 +127,7 @@ const Nav2: React.FC = () => {
126127
</Toolbar>
127128
</AppBar>
128129
<Drawer anchor={"right"} open={drawerOpen} onClose={toggleDrawer}>
129-
{drawerList()}
130+
{drawerList}
130131
</Drawer>
131132
</div>
132133
);

‎frontend/src/components/RegistrationForm/signupLoginStyle.ts‎

Lines changed: 0 additions & 19 deletions
Original file line numberDiff line numberDiff line change
@@ -12,25 +12,6 @@ export const useSignupLoginStyles = makeStyles(() =>
1212
width: "80%",
1313
background: "transparent",
1414
},
15-
cssLabel: {
16-
color: "#ededed",
17-
},
18-
19-
cssOutlinedInput: {
20-
"&$cssFocused $notchedOutline": {
21-
borderColor: `#ededed !important`,
22-
},
23-
color: "#ededed",
24-
},
25-
26-
cssFocused: {
27-
color: "#ededed",
28-
},
29-
30-
notchedOutline: {
31-
borderWidth: "1px",
32-
borderColor: "#ededed !important",
33-
},
3415
btn: {
3516
background: "var(--my-cyan)",
3617
margin: "2vh",

‎frontend/src/pages/Domains/domainList.ts‎

Lines changed: 0 additions & 37 deletions
This file was deleted.

0 commit comments

Comments
 (0)