From 263fed4ff627b162ba87068aad9ce62240c2b438 Mon Sep 17 00:00:00 2001 From: Daniel Cojocea Date: Mon, 2 Sep 2024 02:31:43 -0400 Subject: [PATCH] Added greeting lists and implemented randomizer --- Client/src/Components/BasicTable/index.jsx | 5 + Client/src/Features/UI/uiSlice.js | 10 +- Client/src/Pages/PageSpeed/index.css | 2 +- Client/src/Utils/greeting.jsx | 147 ++++++++++++++++++--- 4 files changed, 146 insertions(+), 18 deletions(-) diff --git a/Client/src/Components/BasicTable/index.jsx b/Client/src/Components/BasicTable/index.jsx index 33073d838..e9fbbadfd 100644 --- a/Client/src/Components/BasicTable/index.jsx +++ b/Client/src/Components/BasicTable/index.jsx @@ -297,6 +297,11 @@ const BasicTable = ({ data, paginated, reversed, table }) => { stroke: theme.palette.text.tertiary, strokeWidth: 1.3, }, + "& .MuiSelect-select": { + border: 1, + borderColor: theme.palette.border.light, + borderRadius: theme.shape.borderRadius, + }, }} /> diff --git a/Client/src/Features/UI/uiSlice.js b/Client/src/Features/UI/uiSlice.js index 84efe58fc..947055ddc 100644 --- a/Client/src/Features/UI/uiSlice.js +++ b/Client/src/Features/UI/uiSlice.js @@ -4,7 +4,7 @@ import { createSlice } from "@reduxjs/toolkit"; // Add more settings as needed (e.g., theme preferences, user settings) const initialState = { monitors: { - rowsPerPage: 5, + rowsPerPage: 10, }, team: { rowsPerPage: 5, @@ -13,6 +13,7 @@ const initialState = { collapsed: false, }, mode: "light", + greeting: { index: 0, lastUpdate: null }, }; const uiSlice = createSlice({ @@ -31,8 +32,13 @@ const uiSlice = createSlice({ setMode: (state, action) => { state.mode = action.payload; }, + setGreeting(state, action) { + state.greeting.index = action.payload.index; + state.greeting.lastUpdate = action.payload.lastUpdate; + }, }, }); export default uiSlice.reducer; -export const { setRowsPerPage, toggleSidebar, setMode } = uiSlice.actions; +export const { setRowsPerPage, toggleSidebar, setMode, setGreeting } = + uiSlice.actions; diff --git a/Client/src/Pages/PageSpeed/index.css b/Client/src/Pages/PageSpeed/index.css index edfcdb6b6..83935dde0 100644 --- a/Client/src/Pages/PageSpeed/index.css +++ b/Client/src/Pages/PageSpeed/index.css @@ -1,7 +1,7 @@ .page-speed h2.MuiTypography-root { line-height: 1.1; } -.page-speed h1.MuiTypography-root { +.page-speed:not(:has([class*="fallback__"])) h1.MuiTypography-root { font-size: var(--env-var-font-size-large-plus); } .page-speed h2.MuiTypography-root { diff --git a/Client/src/Utils/greeting.jsx b/Client/src/Utils/greeting.jsx index 03a66da24..cb878c991 100644 --- a/Client/src/Utils/greeting.jsx +++ b/Client/src/Utils/greeting.jsx @@ -1,7 +1,121 @@ import PropTypes from "prop-types"; import { useTheme } from "@emotion/react"; import { Box, Typography } from "@mui/material"; -import { useSelector } from "react-redux"; +import { useDispatch, useSelector } from "react-redux"; +import { useEffect } from "react"; +import { setGreeting } from "../Features/UI/uiSlice"; + +const early = [ + { + prepend: "Rise and shine", + append: "If you’re up this early, you might as well be a legend!", + emoji: "☕", + }, + { + prepend: "Good morning", + append: "The world’s still asleep, but you’re already awesome!", + emoji: "🦉", + }, + { + prepend: "Good morning", + append: "Are you a wizard? Only magical people are up at this hour!", + emoji: "🌄", + }, + { + prepend: "Up before the roosters", + append: "Ready to tackle the day before it even starts?", + emoji: "🐓", + }, + { + prepend: "Early bird special", + append: "Let’s get things done while everyone else is snoozing!", + emoji: "🌟", + }, +]; + +const morning = [ + { + prepend: "Good morning", + append: "Is it coffee o’clock yet, or should we start with high fives?", + emoji: "☕", + }, + { + prepend: "Morning", + append: "The sun is up, and so are you—time to be amazing!", + emoji: "🌞", + }, + { + prepend: "Good morning", + append: "Time to make today the best thing since sliced bread!", + emoji: "🥐", + }, + { + prepend: "Morning", + append: "Let’s kick off the day with more energy than a double espresso!", + emoji: "🚀", + }, + { + prepend: "Rise and shine", + append: "You’re about to make today so great, even Monday will be jealous!", + emoji: "🌟", + }, +]; + +const afternoon = [ + { + prepend: "Good afternoon", + append: "How about a break to celebrate how awesome you’re doing?", + emoji: "🥪", + }, + { + prepend: "Afternoon", + append: "If you’re still going strong, you’re officially a rockstar!", + emoji: "🌞", + }, + { + prepend: "Hey there", + append: "The afternoon is your playground—let’s make it epic!", + emoji: "🍕", + }, + { + prepend: "Good afternoon", + append: "Time to crush the rest of the day like a pro!", + emoji: "🏆", + }, + { + prepend: "Afternoon", + append: "Time to turn those afternoon slumps into afternoon triumphs!", + emoji: "🎉", + }, +]; + +const evening = [ + { + prepend: "Good evening", + append: "Time to wind down and think about how you crushed today!", + emoji: "🌇", + }, + { + prepend: "Evening", + append: "You’ve earned a break—let’s make the most of these evening vibes!", + emoji: "🍹", + }, + { + prepend: "Hey there", + append: "Time to relax and bask in the glow of your day’s awesomeness!", + emoji: "🌙", + }, + { + prepend: "Good evening", + append: "Ready to trade productivity for chill mode?", + emoji: "🛋️ ", + }, + { + prepend: "Evening", + append: "Let’s call it a day and toast to your success!", + emoji: "🕶️", + }, +]; /** * Greeting component that displays a personalized greeting message @@ -18,23 +132,26 @@ import { useSelector } from "react-redux"; const Greeting = ({ type = "" }) => { const theme = useTheme(); + const dispatch = useDispatch(); const { firstName } = useSelector((state) => state.auth.user); + const index = useSelector((state) => state.ui.greeting.index); + const lastUpdate = useSelector((state) => state.ui.greeting.lastUpdate); const now = new Date(); const hour = now.getHours(); - let greeting = ""; - let emoji = ""; - if (hour < 12) { - greeting = "morning"; - emoji = "🌅"; - } else if (hour < 18) { - greeting = "afternoon"; - emoji = "🌞"; - } else { - greeting = "evening"; - emoji = "🌙"; - } + useEffect(() => { + const hourDiff = lastUpdate ? hour - lastUpdate : null; + + if (!lastUpdate || hourDiff >= 1) { + let random = Math.floor(Math.random() * 5); + dispatch(setGreeting({ index: random, lastUpdate: hour })); + } + }, [dispatch, hour]); + + let greetingArray = + hour < 6 ? early : hour < 12 ? morning : hour < 18 ? afternoon : evening; + const { prepend, append, emoji } = greetingArray[index]; return ( @@ -49,7 +166,7 @@ const Greeting = ({ type = "" }) => { fontSize="inherit" color={theme.palette.text.secondary} > - Good {greeting},{" "} + {prepend},{" "} {firstName} {emoji} @@ -62,7 +179,7 @@ const Greeting = ({ type = "" }) => { fontWeight={300} color={theme.palette.text.secondary} > - Here’s an overview of your {type} monitors. + {append} — Here’s an overview of your {type} monitors. );