diff --git a/src/components/Navbar.jsx b/src/components/Navbar.jsx
index d4ef0781..8eb7cd3c 100644
--- a/src/components/Navbar.jsx
+++ b/src/components/Navbar.jsx
@@ -1,8 +1,10 @@
-import React, { useState, useEffect, useContext } from "react";
+import { useState, useEffect, useContext } from "react";
+import PropTypes from "prop-types";
import { useNavigate } from "react-router";
-import { auth } from "../utils/firebaseConfig";
+import { auth } from "../firebase/config";
import { onAuthStateChanged } from "firebase/auth";
-import { ModalsContext, ModalTypes } from "../contexts/ModalsProvider";
+import { ModalsContext } from "../contexts/ModalsProvider";
+import { ModalTypes } from "../utils/modalTypes";
const Navbar = ({ admin }) => {
const openModal = useContext(ModalsContext).openModal;
@@ -64,4 +66,8 @@ const Navbar = ({ admin }) => {
);
};
+Navbar.propTypes = {
+ admin: PropTypes.bool
+}
+
export default Navbar;
diff --git a/src/components/Row.jsx b/src/components/Row.jsx
index 705957ed..e0fe1a12 100644
--- a/src/components/Row.jsx
+++ b/src/components/Row.jsx
@@ -1,11 +1,12 @@
-import React, { useState, useEffect } from "react";
+import { useState, useEffect } from "react";
+import PropTypes from "prop-types";
import { formatTime, formatMoney } from "../utils/formatString";
-import { itemStatus } from "./Item";
+import { itemStatus } from "../utils/itemStatus";
import { getDoc, doc } from "firebase/firestore";
-import { db } from "../utils/firebaseConfig";
-import { editItems } from "../utils/firebaseUtils";
+import { db } from "../firebase/config";
+import { editItems } from "../firebase/utils";
-const Row = ({ item }) => {
+export const Row = ({ item }) => {
const [amount, setAmount] = useState(item.startingPrice);
const [bids, setBids] = useState(0);
const [winner, setWinner] = useState("");
@@ -72,4 +73,12 @@ const Row = ({ item }) => {
);
};
-export default Row;
+Row.propTypes = {
+ item: PropTypes.shape({
+ startingPrice: PropTypes.number.isRequired,
+ currency: PropTypes.string.isRequired,
+ endTime: PropTypes.object.isRequired,
+ id: PropTypes.number.isRequired,
+ title: PropTypes.string.isRequired,
+ })
+}
diff --git a/src/components/Table.jsx b/src/components/Table.jsx
new file mode 100644
index 00000000..c804273a
--- /dev/null
+++ b/src/components/Table.jsx
@@ -0,0 +1,31 @@
+import { useContext } from "react";
+import { Row } from "./Row";
+import { ItemsContext } from "../contexts/ItemsProvider";
+
+const Table = () => {
+ const { items } = useContext(ItemsContext);
+
+ return (
+
+
+
+ | ID |
+ Title |
+ Price |
+ Bids |
+ Winning |
+ Time Left |
+ Actions |
+
+
+
+ {items.map((item) => (
+ |
+ ))}
+
+
+ );
+};
+
+export default Table;
+
diff --git a/src/contexts/ItemsProvider.jsx b/src/contexts/ItemsProvider.jsx
index 38dbca3f..6f03a862 100644
--- a/src/contexts/ItemsProvider.jsx
+++ b/src/contexts/ItemsProvider.jsx
@@ -1,7 +1,8 @@
-import React, { useEffect, useState, createContext } from "react";
-import { db } from "../utils/firebaseConfig";
+import { useEffect, useState, createContext } from "react";
+import PropTypes from "prop-types";
+import { db } from "../firebase/config";
import { onSnapshot, doc, setDoc } from "firebase/firestore";
-import { unflattenItems } from "../utils/firebaseUtils";
+import { unflattenItems } from "../firebase/utils";
export const ItemsContext = createContext();
@@ -29,3 +30,8 @@ export const ItemsProvider = ({ demo, children }) => {
{children}
);
};
+
+ItemsProvider.propTypes = {
+ demo: PropTypes.bool,
+ children: PropTypes.arrayOf(PropTypes.element)
+}
diff --git a/src/contexts/ModalsProvider.jsx b/src/contexts/ModalsProvider.jsx
index 26f63e11..460a808a 100644
--- a/src/contexts/ModalsProvider.jsx
+++ b/src/contexts/ModalsProvider.jsx
@@ -1,14 +1,9 @@
-import React, { createContext, useState } from "react";
+import { createContext, useState } from "react";
+import PropTypes from "prop-types";
+import { ModalTypes } from "../utils/modalTypes";
export const ModalsContext = createContext();
-export const ModalTypes = {
- INFO: "info",
- SIGN_UP: "signUp",
- BID: "bid",
- NONE: null,
-};
-
export const ModalsProvider = ({ children }) => {
const [activeItem, setActiveItem] = useState({});
const [currentModal, setCurrentModal] = useState(ModalTypes.NONE);
@@ -31,3 +26,7 @@ export const ModalsProvider = ({ children }) => {
);
};
+
+ModalsProvider.propTypes = {
+ children: PropTypes.arrayOf(PropTypes.element)
+}
diff --git a/src/firebase/AutoSignIn.jsx b/src/firebase/AutoSignIn.jsx
new file mode 100644
index 00000000..7a2f2199
--- /dev/null
+++ b/src/firebase/AutoSignIn.jsx
@@ -0,0 +1,34 @@
+import { useEffect, useState } from "react";
+import { onAuthStateChanged, signInAnonymously } from "firebase/auth";
+import { getDoc, doc } from "firebase/firestore";
+import { auth, db } from "./config";
+
+export const AutoSignIn = () => {
+ const [user, setUser] = useState(null);
+ const [admin, setAdmin] = useState(false);
+
+ useEffect(() => {
+ const unsubscribe = onAuthStateChanged(auth, (user) => {
+ if (user && user.displayName) {
+ console.debug(`Signed-in: name=${user.displayName}, uid=${user.uid}`);
+ setUser(user);
+
+ // Check if user is admin
+ const userDocRef = doc(db, "users", user.uid);
+ getDoc(userDocRef).then((docSnap) => {
+ if (docSnap.exists() && docSnap.data().admin) {
+ console.debug("User is admin");
+ setAdmin(true);
+ }
+ });
+ } else {
+ signInAnonymously(auth);
+ }
+ });
+
+ // Clean up the onAuthStateChanged listener when the component unmounts
+ return () => unsubscribe();
+ }, []);
+
+ return { user, admin };
+};
diff --git a/src/utils/firebaseConfig.jsx b/src/firebase/config.jsx
similarity index 100%
rename from src/utils/firebaseConfig.jsx
rename to src/firebase/config.jsx
diff --git a/src/utils/firebaseUtils.jsx b/src/firebase/utils.jsx
similarity index 61%
rename from src/utils/firebaseUtils.jsx
rename to src/firebase/utils.jsx
index f8b5a1ae..5d58b7f3 100644
--- a/src/utils/firebaseUtils.jsx
+++ b/src/firebase/utils.jsx
@@ -1,5 +1,3 @@
-import { useEffect, useState } from "react";
-import { onAuthStateChanged, signInAnonymously } from "firebase/auth";
import {
getDoc,
updateDoc,
@@ -7,49 +5,19 @@ import {
Timestamp,
deleteField,
} from "firebase/firestore";
-import { auth, db } from "./firebaseConfig";
+import { db } from "./config";
import yaml from "js-yaml";
-import { formatField } from "./formatString";
-
-const AutoSignIn = () => {
- const [user, setUser] = useState(null);
- const [admin, setAdmin] = useState(false);
-
- useEffect(() => {
- const unsubscribe = onAuthStateChanged(auth, (user) => {
- if (user && user.displayName) {
- console.debug(`Signed-in: name=${user.displayName}, uid=${user.uid}`);
- setUser(user);
-
- // Check if user is admin
- const userDocRef = doc(db, "users", user.uid);
- getDoc(userDocRef).then((docSnap) => {
- if (docSnap.exists() && docSnap.data().admin) {
- console.debug("User is admin");
- setAdmin(true);
- }
- });
- } else {
- signInAnonymously(auth);
- }
- });
-
- // Clean up the onAuthStateChanged listener when the component unmounts
- return () => unsubscribe();
- }, []);
-
- return { user, admin };
-};
+import { formatField } from "../utils/formatString";
const parseField = (key) => {
- const match = key.match(/item(\d+)_bid(\d+)/);
- return {
- item: Number(match[1]),
- bid: Number(match[2]),
+ const match = key.match(/item(\d+)_bid(\d+)/);
+ return {
+ item: Number(match[1]),
+ bid: Number(match[2]),
+ };
};
-};
-
-const unflattenItems = (doc, demo) => {
+
+export const unflattenItems = (doc, demo) => {
let items = {};
for (const [key, value] of Object.entries(doc.data())) {
const { item, bid } = parseField(key);
@@ -76,14 +44,14 @@ const unflattenItems = (doc, demo) => {
}
return Object.values(items);
};
-
-const editItems = (id = undefined, update = false, reset = false) => {
+
+export const editItems = (id = undefined, update = false, reset = false) => {
fetch(import.meta.env.BASE_URL + "items.yml")
.then((response) => response.text())
.then((text) => yaml.load(text))
.then((items) => {
// If ID was provided, place that item in an array by itself
- if (id) items = [items.find((item) => item.id === id)];
+ if (id !== undefined) items = [items.find((item) => item.id === id)];
const docRef = doc(db, "auction", "items");
getDoc(docRef)
@@ -114,5 +82,4 @@ const editItems = (id = undefined, update = false, reset = false) => {
});
});
};
-
-export { AutoSignIn, parseField, unflattenItems, editItems };
+
\ No newline at end of file
diff --git a/src/pages/Admin.jsx b/src/pages/Admin.jsx
index 1d02fba9..3b0e45cd 100644
--- a/src/pages/Admin.jsx
+++ b/src/pages/Admin.jsx
@@ -1,11 +1,7 @@
-import React, { useContext } from "react";
-import { ItemsContext } from "../contexts/ItemsProvider";
-import Row from "../components/Row";
-import { editItems } from "../utils/firebaseUtils";
+import { editItems } from "../firebase/utils";
+import Table from "../components/Table";
function AdminPage() {
- const { items } = useContext(ItemsContext);
-
return (
@@ -28,24 +24,7 @@ function AdminPage() {
Update & Reset All
-
-
-
- | ID |
- Title |
- Price |
- Bids |
- Winning |
- Time Left |
- Actions |
-
-
-
- {items.map((item) => (
- |
- ))}
-
-
+
);
}
diff --git a/src/utils/formatString.jsx b/src/utils/formatString.js
similarity index 100%
rename from src/utils/formatString.jsx
rename to src/utils/formatString.js
diff --git a/src/utils/itemStatus.js b/src/utils/itemStatus.js
new file mode 100644
index 00000000..d92a6b5e
--- /dev/null
+++ b/src/utils/itemStatus.js
@@ -0,0 +1,6 @@
+export const itemStatus = (item) => {
+ const bids = Object.keys(item.bids ?? {}).length;
+ const amount = bids ? item.bids[bids].amount : item.startingPrice ?? 0;
+ const winner = bids ? item.bids[bids].uid : "";
+ return { bids, amount, winner };
+};
diff --git a/src/utils/modalTypes.js b/src/utils/modalTypes.js
new file mode 100644
index 00000000..a4e00727
--- /dev/null
+++ b/src/utils/modalTypes.js
@@ -0,0 +1,6 @@
+export const ModalTypes = {
+ INFO: "info",
+ SIGN_UP: "signUp",
+ BID: "bid",
+ NONE: null,
+};