Skip to content
This repository was archived by the owner on Dec 13, 2024. It is now read-only.

Commit 4e41ff0

Browse files
Yousef-Taha1Yousef-Taha1
authored
Frontend things (#150)
....
2 parents 5d7ddc2 + 8ab40a4 commit 4e41ff0

22 files changed

+348
-1383
lines changed

‎frontend/package-lock.json

Lines changed: 14 additions & 0 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎frontend/src/App.tsx

Lines changed: 1 addition & 38 deletions
Original file line numberDiff line numberDiff line change
@@ -1,19 +1,10 @@
1-
import React from "react";
21
import { useAuth } from "react-oidc-context";
3-
import { useState } from "react";
42
import "./App.css";
5-
import LinkDevice from "./Components/LinkDevice";
63
import Footer from "./Components/Footer";
74
import Navbar from "./Components/Navbar/Navbar";
8-
import Settings from "./Components/Settings";
9-
import CreatePetModal from "./Components/CreatePetModal";
10-
import PetPage from "./Components/PetPage";
11-
import type { paths } from "./web-backend-api";
12-
import createClient, { type Middleware } from "openapi-fetch";
135

146
function App() {
157
const auth = useAuth();
16-
const [count, setCount] = useState(0);
178

189
switch (auth.activeNavigator) {
1910
case "signinSilent":
@@ -32,41 +23,13 @@ function App() {
3223
}
3324

3425
if (auth.isAuthenticated) {
35-
// Client initialisation
36-
const authMiddleware: Middleware = {
37-
async onRequest({ request }) {
38-
// add Authorization header to every request
39-
request.headers.set(
40-
"Authorization",
41-
`Bearer ${auth.user?.access_token}`
42-
);
43-
return request;
44-
},
45-
};
46-
47-
const client = createClient<paths>({
48-
baseUrl: "http://localhost:4000/backend",
49-
});
50-
client.use(authMiddleware);
51-
52-
// https://github.com/openapi-ts/openapi-typescript/tree/main/packages/openapi-fetch
53-
(async () => {
54-
// console.log("hi there!");
55-
// const { data, error } = await client.GET("/api/v1/devices/self", {});
56-
// console.log("data", data);
57-
// console.log("error", error);
58-
})();
59-
6026
return (
6127
<div style={{ backgroundColor: "#FFFFFF" }}>
6228
<div>
6329
<div>
64-
<Navbar client={client} />
30+
<Navbar />
6531
</div>
6632
</div>
67-
{/* <div>
68-
Hello USERNAME: {auth.user?.profile?.preferred_username || "User"}
69-
</div> */}
7033
<Footer />
7134
</div>
7235
);

‎frontend/src/Components/Footer.tsx

Lines changed: 0 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,3 @@
1-
import React from "react";
2-
31
const Footer = () => (
42
<div className="footer-content">
53
<footer className="footer page-footer font-small pt-3 bg-light">

‎frontend/src/Components/Friends.tsx

Lines changed: 0 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,3 @@
1-
import React from 'react';
2-
31
const Friends = () => (
42
<div>
53
<h1>Friends Page</h1>

‎frontend/src/Components/Inventory.tsx

Lines changed: 0 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,3 @@
1-
import React from 'react';
2-
31
const Inventory = () => (
42
<div>
53
<h1>Inventory Page</h1>

‎frontend/src/Components/Navbar/Navbar.tsx

Lines changed: 4 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,14 +1,13 @@
1-
import React, { useState } from "react";
21
import { BrowserRouter as Router, Link, Route, Routes } from "react-router-dom";
32
import Inventory from "../Inventory.tsx";
43
import Settings from "../Settings.tsx";
54
import Friends from "../Friends.tsx";
65
import PetPage from "../PetPage.tsx";
7-
import LinkDevice from "../LinkDevice.tsx";
86
import { useAuth } from "react-oidc-context";
97
import "./navbar.css";
8+
import { useState } from "react";
109

11-
const Navbar = (client) => {
10+
const Navbar = () => {
1211
const auth = useAuth();
1312
const [activePage, setActivePage] = useState("Pet Page");
1413

@@ -22,7 +21,7 @@ const Navbar = (client) => {
2221
marginRight: "20px",
2322
};
2423

25-
const handlePageClick = (page) => {
24+
const handlePageClick = (page: string) => {
2625
setActivePage(page);
2726
};
2827

@@ -146,7 +145,7 @@ const Navbar = (client) => {
146145
}
147146
/>
148147
<Route path="/Friends" element={<Friends />} />
149-
<Route path="/PetPage" element={<PetPage client={client} />} />
148+
<Route path="/PetPage" element={<PetPage />} />
150149
</Routes>
151150
</Router>
152151
</div>

‎frontend/src/Components/PetDetails.tsx

Lines changed: 25 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,25 @@
1+
import { Pet } from "../lib/api/usePetApi";
2+
import PetDetailsProgressBar from "./PetDetailsProgressBar";
3+
4+
const PetDetails = (props: {pet: Pet, petImageSrc: string}) => {
5+
const {pet, petImageSrc} = props;
6+
7+
if (!pet.state) return;
8+
const petState = pet.state;
9+
10+
return (
11+
<>
12+
<div className="col-6">
13+
<img className="img-fluid" src={petImageSrc} alt="Image showing the pet" />
14+
</div>
15+
<div className="col-6">
16+
<div className="h2 px-3 py-4">{pet.name}</div>
17+
<PetDetailsProgressBar value={petState.xp} color="green" />
18+
<PetDetailsProgressBar value={petState.happiness} color="purple" />
19+
<PetDetailsProgressBar value={petState.health} color="red" />
20+
</div>
21+
</>
22+
);
23+
}
24+
25+
export default PetDetails;

‎frontend/src/Components/PetDetailsProgressBar.tsx

Lines changed: 25 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,25 @@
1+
import { ProgressBar } from "react-progressbar-fancy";
2+
import { IProgressBarProps } from "react-progressbar-fancy/build/ProgressBar/ProgressBar.types";
3+
4+
/**
5+
* See https://github.com/RavinRau/react-progressbar-fancy
6+
*/
7+
const PetDetailsProgressBar = (props: {value?: number, color: IProgressBarProps["progressColor"]}) => {
8+
return (
9+
<>
10+
{props.value != undefined && (
11+
<div>
12+
<div className="h5 px-3">{props.value}</div>
13+
<ProgressBar
14+
className="px-1"
15+
hideText={true}
16+
progressColor={props.color}
17+
score={props.value}
18+
/>
19+
</div>
20+
)}
21+
</>
22+
);
23+
}
24+
25+
export default PetDetailsProgressBar;

‎frontend/src/Components/PetPage.tsx

Lines changed: 28 additions & 118 deletions
Original file line numberDiff line numberDiff line change
@@ -1,135 +1,45 @@
11
import { useEffect, useState } from "react";
22
import petImage from "../assets/pet_frog.png";
3-
import { ProgressBar } from "react-progressbar-fancy";
4-
import type { paths, components } from "../../src/web-backend-api";
5-
import { useAuth } from "react-oidc-context";
63
import CreatePetModal from "./CreatePetModal";
7-
import createClient, { type Middleware } from "openapi-fetch";
8-
// https://github.com/RavinRau/react-progressbar-fancy?tab=readme-ov-file
4+
import { Device, useDeviceApi } from "../lib/api/useDeviceApi";
5+
import { Pet, usePetApi } from "../lib/api/usePetApi";
6+
import PetDetails from "./PetDetails";
97

10-
type PetDTO = components["schemas"]["PetDTO"];
8+
// https://github.com/RavinRau/react-progressbar-fancy?tab=readme-ov-file
119

1210
const PetPage = () => {
13-
const auth = useAuth();
14-
const authMiddleware: Middleware = {
15-
async onRequest({ request }) {
16-
// add Authorization header to every request
17-
request.headers.set("Authorization", `Bearer ${auth.user?.access_token}`);
18-
return request;
19-
},
20-
};
11+
const [devices, setDevices] = useState<Device[]>([]);
12+
const [pet, setPet] = useState<Pet | undefined>();
13+
const deviceApi = useDeviceApi();
14+
const petApi = usePetApi();
2115

22-
const client = createClient<paths>({
23-
baseUrl: "http://localhost:4000/backend",
24-
});
25-
client.use(authMiddleware);
26-
27-
const [petData, setPetData] = useState({} as PetDTO);
2816
useEffect(() => {
29-
loadData();
30-
}, []);
17+
if (!deviceApi || !petApi) return;
18+
19+
const fetchData = async () => {
20+
const devices = await deviceApi.getDevices();
21+
const defaultDevice = devices[0];
3122

32-
const loadData = async () => {
33-
const { data, error } = await client.GET("/api/v1/devices/self", {});
34-
if (data && data[0].petId != undefined) {
35-
const { data: data2, error } = await client.GET(
36-
"/api/v1/pets/self/{petId}",
37-
{
38-
params: {
39-
path: { petId: +data[0].petId },
40-
},
41-
}
42-
);
43-
console.log(data2);
44-
if (data2) {
45-
setPetData(data2);
23+
setDevices(devices);
24+
25+
if (defaultDevice && defaultDevice.petId) {
26+
const pet = await petApi.getPetById(defaultDevice.petId);
27+
setPet(pet);
4628
}
4729
}
48-
};
30+
31+
fetchData();
32+
}, [deviceApi, petApi]);
33+
34+
console.log("loaded-devices", devices);
4935

5036
return (
5137
<div className="container-fluid row p-5">
52-
<div className="col-6">
53-
{petData != null ? (
54-
<img className="img-fluid" src={petImage} alt="pet name" />
55-
) : (
56-
<div>
57-
<CreatePetModal />
58-
</div>
59-
)}
60-
</div>
61-
<div className="col-6">
62-
<div className="h2 px-3 py-4">{petData.name}</div>
63-
<div>
64-
<div className="h5 px-3">HP</div>
65-
<ProgressBar
66-
className="px-1 pb-3"
67-
hideText={true}
68-
progressColor={"red"}
69-
score={petData.state?.health == null ? 0 : petData.state.health}
70-
/>
71-
</div>
72-
<div>
73-
<div className="h5 px-3">Well-being</div>
74-
<ProgressBar
75-
className="px-1 pb-3"
76-
hideText={true}
77-
progressColor={"purple"}
78-
score={
79-
petData.state?.wellbeing == null ? 0 : petData.state.wellbeing
80-
}
81-
/>
82-
</div>
83-
<div>
84-
<div className="h5 px-3">XP</div>
85-
<ProgressBar
86-
className="px-1"
87-
hideText={true}
88-
progressColor={"green"}
89-
score={petData.state?.xp == null ? 0 : petData.state.xp}
90-
/>
91-
</div>
92-
<div>
93-
<div className="h5 px-3">Cleanliness</div>
94-
<ProgressBar
95-
className="px-1"
96-
hideText={true}
97-
progressColor={"green"}
98-
score={
99-
petData.state?.cleanliness == null ? 0 : petData.state.cleanliness
100-
}
101-
/>
102-
</div>
103-
<div>
104-
<div className="h5 px-3">Fun</div>
105-
<ProgressBar
106-
className="px-1"
107-
hideText={true}
108-
progressColor={"green"}
109-
score={petData.state?.fun == null ? 0 : petData.state.fun}
110-
/>
111-
</div>
112-
<div>
113-
<div className="h5 px-3">Hunger</div>
114-
<ProgressBar
115-
className="px-1"
116-
hideText={true}
117-
progressColor={"green"}
118-
score={petData.state?.hunger == null ? 0 : petData.state.hunger}
119-
/>
120-
</div>
121-
<div>
122-
<div className="h5 px-3">Happiness</div>
123-
<ProgressBar
124-
className="px-1"
125-
hideText={true}
126-
progressColor={"green"}
127-
score={
128-
petData.state?.happiness == null ? 0 : petData.state.happiness
129-
}
130-
/>
131-
</div>
132-
</div>
38+
{pet != undefined ? (
39+
<PetDetails pet={pet} petImageSrc={petImage} />
40+
) : (
41+
<CreatePetModal />
42+
)}
13343
</div>
13444
);
13545
};

‎frontend/src/Components/Settings.tsx

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
import React, { useState } from 'react';
1+
import { useState } from 'react';
22
import profile_pic1 from '../Misc/8-bit-dog-nobg.png';
33
import 'bootstrap/dist/css/bootstrap.min.css';
44
import LinkDevice from "../Components/LinkDevice";
@@ -17,9 +17,9 @@ function Settings(
1717
setItems(items.filter((_, i) => i !== index));
1818
};
1919

20-
const resetItem = (index: number) => {
21-
setItems(items.map((item, i) => (i === index ? `Item ${index + 1}` : item)));
22-
};
20+
// const resetItem = (index: number) => {
21+
// setItems(items.map((item, i) => (i === index ? `Item ${index + 1}` : item)));
22+
// };
2323

2424
return (
2525
<div className='d-flex justify-content-center pt-4 pb-2'>

0 commit comments

Comments
 (0)