diff --git a/.husky/pre-commit b/.husky/pre-commit old mode 100644 new mode 100755 diff --git a/components/Auth/AuthProvider.js b/components/Auth/AuthProvider.js index 70f376d4..c6838d52 100644 --- a/components/Auth/AuthProvider.js +++ b/components/Auth/AuthProvider.js @@ -42,6 +42,20 @@ export function AuthProvider({ children }) { .finally(() => setFirstLoading(false)); }, [token]); + function refreshUser() { + api + .getCurrentUser() + .then((response) => { + setUser(response); + }) + .catch((_errors) => { + // It means the jwt is expired + localStorage.clear(); + delete API.defaults.headers.common["Authorization"]; + setUser(null); + }); + } + function login({ email, password }) { setLoading(true); @@ -109,6 +123,7 @@ export function AuthProvider({ children }) { login, logout, editUser, + refreshUser, }), // eslint-disable-next-line [user, isAuthenticated, isLoading, errors] diff --git a/components/moonstone/user/wheel/Wheel/index.jsx b/components/moonstone/user/wheel/Wheel/index.jsx index 7a7ec5f4..f5dac2d3 100644 --- a/components/moonstone/user/wheel/Wheel/index.jsx +++ b/components/moonstone/user/wheel/Wheel/index.jsx @@ -1,5 +1,3 @@ -import { getRouteMatcher } from "next/dist/shared/lib/router/utils"; - function toHex(number) { var res = number.toString(16); res = res.length == 1 ? "0" + res : res; @@ -12,7 +10,7 @@ export default function Wheel({ steps, angle }) { for (var i = 0; i < steps; i++) { colors.push((255.0 * i) / (steps - 1)); } - const percentage = 100 / steps + "%"; + colors = colors.map((entry) => "#36DBEE" + toHex(entry)); const styleGlobal = { @@ -42,10 +40,12 @@ export default function Wheel({ steps, angle }) { return
; }); - return (
-
+
{borders}
diff --git a/components/moonstone/user/wheel/WheelMessage/index.jsx b/components/moonstone/user/wheel/WheelMessage/index.jsx new file mode 100644 index 00000000..df06c7c5 --- /dev/null +++ b/components/moonstone/user/wheel/WheelMessage/index.jsx @@ -0,0 +1,32 @@ +import { Dialog } from "@headlessui/react"; +import { useRouter } from "next/router"; + +export default function WheelMessage({ title, description, onExit }) { + const router = useRouter(); + return ( + <> +
+ {}} + > + + + + {title} + + + {description} + + + + + + ); +} diff --git a/lib/api.js b/lib/api.js index 25811031..60195702 100644 --- a/lib/api.js +++ b/lib/api.js @@ -47,8 +47,24 @@ export async function getAttendee(id) { return response.data; } +export async function getWheelPrizes() { + const response = await API.get("/api/v1/roulette/prizes"); + + return response.data; +} + export async function getAllBadges() { const response = await API.get("/api/v1/badges"); +} + +export async function getWheelLatestWins() { + const response = await API.get("/api/v1/roulette/latestwins"); + + return response.data; +} + +export async function spinWheel() { + const response = await API.post("/api/v1/roulette"); return response.data; } diff --git a/pages/attendee/wheel.js b/pages/attendee/wheel.js index 6c28eb69..05e06c30 100644 --- a/pages/attendee/wheel.js +++ b/pages/attendee/wheel.js @@ -1,5 +1,5 @@ import { useState, useEffect } from "react"; -import { withAuth } from "/components/Auth"; +import { withAuth, useAuth } from "/components/Auth"; import Heading from "/components/moonstone/utils/Heading"; @@ -8,6 +8,33 @@ import Dashboard from "/components/moonstone/user/utils/Dashboard"; import ListItem3 from "/components/moonstone/user/wheel/ListItem3Cols"; import ListItem4 from "/components/moonstone/user/wheel/ListItem4Cols"; import Wheel from "/components/moonstone/user/wheel/Wheel"; +import WheelMessage from "/components/moonstone/user/wheel/WheelMessage"; +import ErrorMessage from "/components/utils/ErrorMessage"; + +import { getWheelPrizes, getWheelLatestWins, spinWheel } from "/lib/api"; + +/* + +Gets how long ago the given date/time was in a user friendly way (10 seconds ago, 1 minute ago, etc) + +*/ +function displayTimeSince(dateString) { + const date = Date.parse(dateString); + const now = new Date(); + + const differenceMiliSeconds = now - date; + + if (differenceMiliSeconds <= 60 * 1000) + return `${Math.round(differenceMiliSeconds / 1000)} seconds ago`; + if (differenceMiliSeconds <= 60 * 60 * 1000) + return `${Math.round(differenceMiliSeconds / (60 * 1000))} minutes ago`; + if (differenceMiliSeconds <= 24 * 60 * 60 * 1000) + return `${Math.round(differenceMiliSeconds / (60 * 60 * 1000))} hours ago`; + + return `${Math.round( + differenceMiliSeconds / (24 * 60 * 60 * 1000) + )} days ago`; +} function WheelPage() { const defaultState = { @@ -15,9 +42,89 @@ function WheelPage() { speed: 0, }; const angleSpeed = 20; - const fps = 60; const [st, updateState] = useState(defaultState); + const { user, refreshUser } = useAuth(); + + const [prizes, updatePrizes] = useState([]); + const [latestWins, updateLatestWins] = useState([]); + const [error, updateError] = useState(false); + const [wheelMessage, updateWheelMessage] = useState(<>); + + const requestAllInfo = () => { + getWheelPrizes() + .then((response) => updatePrizes(response.data)) + .catch((_) => updateError(true)); + + getWheelLatestWins() + .then((response) => updateLatestWins(response.data)) + .catch((_) => updateError(true)); + }; + + useEffect(requestAllInfo, []); + + const spinTheWheel = () => { + updateState({ angle: 0, speed: angleSpeed }); + spinWheel() + .then((response) => { + if (response.tokens) { + updateWheelMessage( + updateWheelMessage(null)} + /> + ); + } else if (response.badge) { + updateWheelMessage( + updateWheelMessage(null)} + /> + ); + } else if (response.entries) { + updateWheelMessage( + updateWheelMessage(null)} + /> + ); + } else if (response.prize.name == "Nada") { + updateWheelMessage( + updateWheelMessage(null)} + /> + ); + } else { + //TODO:: CHANGE THIS MESSAGE + updateWheelMessage( + updateWheelMessage(null)} + /> + ); + } + }) + .catch((_) => { + wheelMessage = ( + updateWheelMessage(null)} + /> + ); + }) + .finally((_) => { + requestAllInfo(); + refreshUser(); + }); + }; + const changeState = () => { updateState({ angle: (st.angle + st.speed) % 360, @@ -27,10 +134,27 @@ function WheelPage() { //Rotate at 60fps useEffect(() => { - console.log(st.angle); if (st.speed > 0) setTimeout(changeState, 1000 / 60); }, [st]); + const prizeComponents = prizes.map((entry, id) => ( + + )); + const latestWinsComponents = latestWins.map((entry, id) => ( + + )); return (
-
💰170 Tokens
+
+ 💰{user.token_balance} Tokens +
-
🏅68 Badges
+
+ 🏅{user.badge_count} Badges +
@@ -53,10 +181,12 @@ function WheelPage() {
@@ -64,23 +194,11 @@ function WheelPage() {
-
- - - - - - -
+
{latestWinsComponents}
- +

Name

@@ -95,46 +213,12 @@ function WheelPage() {

Probability

- - - - - - + {prizeComponents}
+ {error && } + {wheelMessage} ); }