Frontend updates

[AbhinavReddy-Dev]

This PR is to merge all the updates from frontend to main with the following features :

• Donor page UI improvements - @prasannarajezzzy
• Linter for frontend - @shmansa @AbhinavReddy-Dev
• Moved .eslintrc.cjs from root to backend directory to resolve plugin issues. - @shmansa @AbhinavReddy-Dev
• Summary page @decoles @abhilashSreenivasa
• mirageJS support to mock API @sathyanarayanan-v
• Linter error fix @hardikpatil @jayrevolinskyjr

[ysiddhapura]

Just want to make sure the json file is up to date, since it didn't pass all the checks for frontend, otherwise it looks good to me.

[AbhinavReddy-Dev]

Just want to make sure the json file is up to date, since it didn't pass all the checks for frontend, otherwise it looks good to me.

Yeah, thanks! I just updated the package-lock locally, need to resolve the lint errors, working on it.

[hardikpatil]

Looks good on both docker and locally

[jayrevolinskyjr]

The old linter README instructions are now outdated. We should change them to include the steps shown in the updated linter.yml file.

[AbhinavReddy-Dev]

The old linter README instructions are now outdated. We should change them to include the steps shown in the updated linter.yml file.

I have updated the root README as well, please check and let us know if we can go ahead and merge this.

[jayrevolinskyjr]

It builds on my system but then miragejs seems to be tossing errors, even when I run a fresh docker build.

Compiled with problems:

ERROR in ./src/Components/Summary/BarChart.tsx 5:0-108

Module not found: Error: Can't resolve 'recharts' in '/app/frontend/src/Components/Summary'

ERROR in ./src/mirage/index.ts 3:0-40

Module not found: Error: Can't resolve 'miragejs' in '/app/frontend/src/mirage'

ERROR in src/Components/Summary/BarChart.tsx:2:98

TS2307: Cannot find module 'recharts' or its corresponding type declarations.
1 | import React from "react";

2 | import { BarChart, Bar, XAxis, YAxis, CartesianGrid, Tooltip, Legend, ResponsiveContainer } from "recharts";
| ^^^^^^^^^^
3 |
4 | interface DataProps {
5 | name: string;

ERROR in src/mirage/auth.ts:1:34

TS2307: Cannot find module 'miragejs' or its corresponding type declarations.

1 | import { Registry, Server } from "miragejs";
| ^^^^^^^^^^
2 | import { AnyFactories, AnyModels } from "miragejs/-types";
3 |
4 | export const getAuthRoutes = (

ERROR in src/mirage/auth.ts:2:41

TS2307: Cannot find module 'miragejs/-types' or its corresponding type declarations.
1 | import { Registry, Server } from "miragejs";

2 | import { AnyFactories, AnyModels } from "miragejs/-types";
| ^^^^^^^^^^^^^^^^^
3 |
4 | export const getAuthRoutes = (
5 | mirage: Server<Registry<AnyModels, AnyFactories>>

ERROR in src/mirage/feed.ts:1:34

TS2307: Cannot find module 'miragejs' or its corresponding type declarations.

1 | import { Registry, Server } from "miragejs";
| ^^^^^^^^^^
2 | import { AnyFactories, AnyModels } from "miragejs/-types";
3 | export const getFeedRoutes = (
4 | mirage: Server<Registry<AnyModels, AnyFactories>>

ERROR in src/mirage/feed.ts:2:41

TS2307: Cannot find module 'miragejs/-types' or its corresponding type declarations.
1 | import { Registry, Server } from "miragejs";

2 | import { AnyFactories, AnyModels } from "miragejs/-types";
| ^^^^^^^^^^^^^^^^^
3 | export const getFeedRoutes = (
4 | mirage: Server<Registry<AnyModels, AnyFactories>>
5 | ) => {

ERROR in src/mirage/index.ts:1:30

TS2307: Cannot find module 'miragejs' or its corresponding type declarations.

1 | import { createServer } from "miragejs";
| ^^^^^^^^^^
2 | import { getAuthRoutes } from "./auth";
3 | import { getSaleRoutes } from "./sale";
4 | import { getFeedRoutes } from "./feed";

ERROR in src/mirage/sale.ts:1:34

TS2307: Cannot find module 'miragejs' or its corresponding type declarations.

1 | import { Registry, Server } from "miragejs";
| ^^^^^^^^^^
2 | import { AnyFactories, AnyModels } from "miragejs/-types";
3 |
4 | export const getSaleRoutes = (

ERROR in src/mirage/sale.ts:2:41

TS2307: Cannot find module 'miragejs/-types' or its corresponding type declarations.
1 | import { Registry, Server } from "miragejs";

2 | import { AnyFactories, AnyModels } from "miragejs/-types";
| ^^^^^^^^^^^^^^^^^
3 |
4 | export const getSaleRoutes = (
5 | mirage: Server<Registry<AnyModels, AnyFactories>>

What I see when i am on localhost:3000. --

Looks like it's just an issue with imports but I am not sure if any of the frontend pages are working. Could be a me-problem, if so let me know!

[hardikpatil]

It builds on my system but then miragejs seems to be tossing errors, even when I run a fresh docker build.

Compiled with problems:
ERROR in ./src/Components/Summary/BarChart.tsx 5:0-108
Module not found: Error: Can't resolve 'recharts' in '/app/frontend/src/Components/Summary'
ERROR in ./src/mirage/index.ts 3:0-40
Module not found: Error: Can't resolve 'miragejs' in '/app/frontend/src/mirage'
ERROR in src/Components/Summary/BarChart.tsx:2:98
TS2307: Cannot find module 'recharts' or its corresponding type declarations.
1 | import React from "react";

2 | import { BarChart, Bar, XAxis, YAxis, CartesianGrid, Tooltip, Legend, ResponsiveContainer } from "recharts";
| ^^^^^^^^^^
3 |
4 | interface DataProps {
5 | name: string;

ERROR in src/mirage/auth.ts:1:34
TS2307: Cannot find module 'miragejs' or its corresponding type declarations.

1 | import { Registry, Server } from "miragejs";
| ^^^^^^^^^^
2 | import { AnyFactories, AnyModels } from "miragejs/-types";
3 |
4 | export const getAuthRoutes = (

ERROR in src/mirage/auth.ts:2:41
TS2307: Cannot find module 'miragejs/-types' or its corresponding type declarations.
1 | import { Registry, Server } from "miragejs";

2 | import { AnyFactories, AnyModels } from "miragejs/-types";
| ^^^^^^^^^^^^^^^^^
3 |
4 | export const getAuthRoutes = (
5 | mirage: Server<Registry<AnyModels, AnyFactories>>

ERROR in src/mirage/feed.ts:1:34
TS2307: Cannot find module 'miragejs' or its corresponding type declarations.

1 | import { Registry, Server } from "miragejs";
| ^^^^^^^^^^
2 | import { AnyFactories, AnyModels } from "miragejs/-types";
3 | export const getFeedRoutes = (
4 | mirage: Server<Registry<AnyModels, AnyFactories>>

ERROR in src/mirage/feed.ts:2:41
TS2307: Cannot find module 'miragejs/-types' or its corresponding type declarations.
1 | import { Registry, Server } from "miragejs";

2 | import { AnyFactories, AnyModels } from "miragejs/-types";
| ^^^^^^^^^^^^^^^^^
3 | export const getFeedRoutes = (
4 | mirage: Server<Registry<AnyModels, AnyFactories>>
5 | ) => {

ERROR in src/mirage/index.ts:1:30
TS2307: Cannot find module 'miragejs' or its corresponding type declarations.

1 | import { createServer } from "miragejs";
| ^^^^^^^^^^
2 | import { getAuthRoutes } from "./auth";
3 | import { getSaleRoutes } from "./sale";
4 | import { getFeedRoutes } from "./feed";

ERROR in src/mirage/sale.ts:1:34
TS2307: Cannot find module 'miragejs' or its corresponding type declarations.

1 | import { Registry, Server } from "miragejs";
| ^^^^^^^^^^
2 | import { AnyFactories, AnyModels } from "miragejs/-types";
3 |
4 | export const getSaleRoutes = (

ERROR in src/mirage/sale.ts:2:41
TS2307: Cannot find module 'miragejs/-types' or its corresponding type declarations.
1 | import { Registry, Server } from "miragejs";

2 | import { AnyFactories, AnyModels } from "miragejs/-types";
| ^^^^^^^^^^^^^^^^^
3 |
4 | export const getSaleRoutes = (
5 | mirage: Server<Registry<AnyModels, AnyFactories>>

What I see when i am on localhost:3000. --

Looks like it's just an issue with imports but I am not sure if any of the frontend pages are working. Could be a me-problem, if so let me know!

@jayrevolinskyjr Yeah, I received the same. Images are cached. I had to prune it and removed all stopped containers and images, and compose build, up again. Give it a one more shot.

[briswells]

Everything looks good. I did not review for contents, just general changes and app stability. I was able to run the app after just a docker compose build, without it throwing errors for new libraries. I am unsure why Jay is having issues.

[hardikpatil]

Everything looks good. I did not review for contents, just general changes and app stability. I was able to run the app after just a docker compose build, without it throwing errors for new libraries. I am unsure why Jay is having issues.

Probably a cache thing. I had the same.

[jayrevolinskyjr]

Works after I rebuilt with --no-cache specified