Skip to content

Commit

Permalink
Clean up frontend
Browse files Browse the repository at this point in the history
  • Loading branch information
aleda145 committed Aug 19, 2022
1 parent 2d2f2f3 commit f7eff20
Show file tree
Hide file tree
Showing 5 changed files with 17 additions and 60 deletions.
40 changes: 12 additions & 28 deletions frontend/src/App.js
Original file line number Diff line number Diff line change
@@ -1,9 +1,7 @@
import React, { useState } from "react";
import "./App.css";
import Auth from "./auth/pocketbase";
import { BrowserRouter, Routes, Route, Link } from "react-router-dom";
import Dashboard from "./Dashboard/Dashboard";
import Preferences from "./Preferences/Preferences";
import PocketBase from "pocketbase";
import { QueryClient, QueryClientProvider } from "@tanstack/react-query";

Expand All @@ -17,9 +15,12 @@ const queryClient = new QueryClient({
export function getApiDomain() {
return process.env.REACT_APP_API_URL;
}

function App() {
const client = new PocketBase(getApiDomain());
async function logOutClicked() {
client.authStore.clear();
setIsLoggedIn(false);
}
const [isLoggedIn, setIsLoggedIn] = useState(client.authStore.isValid);
if (isLoggedIn) {
console.log("refreshing");
Expand All @@ -30,35 +31,18 @@ function App() {
});
}
if (!isLoggedIn) {
return <Auth client={client} setIsLoggedIn={setIsLoggedIn} />;
return (
<div className="App">
<Auth client={client} setIsLoggedIn={setIsLoggedIn} />
</div>
);
}
return (
<div className="wrapper">
<div className="App">
<h1>Application</h1>
<QueryClientProvider client={queryClient}>
<BrowserRouter>
<Link to="/">
<button>home</button>
</Link>
<Link to="/dashboard">
<button>dashboard</button>
</Link>
<Link to="/preferences">
<button>preferences</button>
</Link>

<Routes>
{/* <Route path="/" element={<App />} /> */}
<Route
path="dashboard"
element={
<Dashboard client={client} setIsLoggedIn={setIsLoggedIn} />
}
/>
<Route path="preferences" element={<Preferences />} />
<Route path="/" element={<Preferences />} />
</Routes>
</BrowserRouter>
<button onClick={logOutClicked}>Log out</button>
<Dashboard client={client} />
</QueryClientProvider>
</div>
);
Expand Down
23 changes: 4 additions & 19 deletions frontend/src/Dashboard/Dashboard.js
Original file line number Diff line number Diff line change
@@ -1,9 +1,7 @@
import React, { useState } from "react";
import { useQuery, useMutation, useQueryClient } from "@tanstack/react-query";
import { useNavigate, NavLink } from "react-router-dom";
import Number from "./Number";
export default function Dashboard({ client, setIsLoggedIn }) {
const navigate = useNavigate();
export default function Dashboard({ client }) {
const queryClient = useQueryClient();
const [newNumber, setNewNumber] = useState(0);

Expand All @@ -17,19 +15,15 @@ export default function Dashboard({ client, setIsLoggedIn }) {
{
onSuccess: () => {
queryClient.invalidateQueries("favNumbers");
console.log("succes");
console.log("Adding Success!");
},
onError: (error) => {
console.log(error);
error.customError = error.response.data.message;
},
}
);
async function logOutClicked() {
await client.AuthStore.clear();
setIsLoggedIn(false);
navigate("/");
}

const { isLoading, error, data } = useQuery(["favNumbers"], () =>
client.Records.getList("user_nums", 1, 50, {
filter: "created >= '2022-01-01 00:00:00'",
Expand All @@ -53,8 +47,6 @@ export default function Dashboard({ client, setIsLoggedIn }) {

return (
<div>
<button onClick={logOutClicked}>Log out</button>

<div>My {client.AuthStore.model.email} favorite numbers</div>
<input
type="number"
Expand All @@ -65,14 +57,7 @@ export default function Dashboard({ client, setIsLoggedIn }) {
/>
<button
onClick={() => {
addMutation.mutate(
{ number: newNumber },
{
onSuccess: () => {
console.log("button scucces");
},
}
);
addMutation.mutate({ number: newNumber });
}}
>
Add number
Expand Down
4 changes: 1 addition & 3 deletions frontend/src/Dashboard/Number.js
Original file line number Diff line number Diff line change
Expand Up @@ -6,14 +6,12 @@ export default function Number({ number, numberId, client }) {

const removeMutation = useMutation(
(numId) => {
console.log(numId.numId);
console.log(typeof numId.numId);
return client.Records.delete("user_nums", numId.numId);
},
{
onSuccess: () => {
queryClient.invalidateQueries("favNumbers");
console.log("succes");
console.log("Deletion Success!");
},
onError: (error) => {
console.log(error);
Expand Down
5 changes: 0 additions & 5 deletions frontend/src/Preferences/Preferences.js

This file was deleted.

5 changes: 0 additions & 5 deletions frontend/src/auth/pocketbase.js
Original file line number Diff line number Diff line change
@@ -1,5 +1,4 @@
import React, { useState } from "react";
import PropTypes from "prop-types";
export default function Auth({ client, setIsLoggedIn }) {
const [username, setUserName] = useState();
const [password, setPassword] = useState();
Expand Down Expand Up @@ -64,7 +63,3 @@ export default function Auth({ client, setIsLoggedIn }) {
</div>
);
}

Auth.propTypes = {
client: PropTypes.any.isRequired,
};

0 comments on commit f7eff20

Please sign in to comment.