--------------------------------------------------------------------------------
/utils/workerInterval.js:
--------------------------------------------------------------------------------
1 | let intervalId;
2 |
3 | onmessage = ({ data }) => {
4 | if (data.delay) {
5 | postMessage(Date.now());
6 |
7 | intervalId = setInterval(() => {
8 | postMessage(Date.now());
9 | }, data.delay);
10 | } else if (data.clear) {
11 | clearInterval(intervalId);
12 | close();
13 | }
14 | };
15 |
--------------------------------------------------------------------------------
/utils/tailwindUtil.js:
--------------------------------------------------------------------------------
1 | import resolveConfig from "tailwindcss/resolveConfig";
2 | import tailwindConfig from "../tailwind.config.js";
3 |
4 | const config = resolveConfig(tailwindConfig);
5 |
6 | export function isBelowBreakpoint(clientWidth, breakpoint) {
7 | if (clientWidth === 0) {
8 | return null;
9 | }
10 | // remove px from the end and convert to a number
11 | return clientWidth <= parseInt(config.theme.screens[breakpoint].slice(0, -2));
12 | }
13 |
--------------------------------------------------------------------------------
/components/molecules/cards/NoPresets.js:
--------------------------------------------------------------------------------
1 | import { iconTypes } from "../../atoms/Icon";
2 | import InputCard from "./InputCard";
3 | import Header from "./Header";
4 |
5 | function NoPresets() {
6 | return (
7 |
8 |
13 |
14 | );
15 | }
16 |
17 | export default NoPresets;
18 |
--------------------------------------------------------------------------------
/components/molecules/cards/InputCard.js:
--------------------------------------------------------------------------------
1 | import React from "react";
2 |
3 | function InputCard({ children, useExtraPadding }) {
4 | const paddingStyle = useExtraPadding
5 | ? "pt-16 pb-32 420:pt-24 pb-48"
6 | : "py-16 420:py-24";
7 | return (
8 |
11 |
12 | {children}
13 |
14 |
9 |
14 |
15 |
17 | );
18 | }
19 |
20 | export default TimelineStartEnd;
21 |
--------------------------------------------------------------------------------
/components/atoms/SelectItem.js:
--------------------------------------------------------------------------------
1 | import React, { useRef, useEffect } from "react";
2 |
3 | function SelectItem({ value, children, focused, handleKeyDown, handleClick }) {
4 | const ref = useRef(null);
5 |
6 | useEffect(() => {
7 | if (focused) {
8 | ref.current.focus();
9 | }
10 | }, [focused]);
11 |
12 | return (
13 | handleKeyDown(e, value)}
18 | onClick={() => handleClick(value)}
19 | >
20 | {children}
21 |
22 | );
23 | }
24 |
25 | export default SelectItem;
26 |
--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "need-to-break",
3 | "version": "0.1.0",
4 | "private": true,
5 | "scripts": {
6 | "dev": "next dev",
7 | "build": "next build",
8 | "start": "next start",
9 | "lint": "next lint"
10 | },
11 | "dependencies": {
12 | "@vercel/analytics": "^1.0.2",
13 | "firebase": "^9.6.7",
14 | "framer-motion": "^6.2.6",
15 | "lodash.clonedeep": "^4.5.0",
16 | "next": "^12.1.0",
17 | "react": "^17.0.2",
18 | "react-dom": "^17.0.2",
19 | "react-modal": "^3.14.3",
20 | "uuid": "^8.3.2"
21 | },
22 | "devDependencies": {
23 | "autoprefixer": "^10.4.0",
24 | "eslint": "7.32.0",
25 | "eslint-config-next": "11.1.0",
26 | "postcss": "^8.4.5",
27 | "tailwindcss": "^3.0.2"
28 | }
29 | }
30 |
--------------------------------------------------------------------------------
/utils/notificationUtil.js:
--------------------------------------------------------------------------------
1 | import isBrowser from "./isBrowser";
2 |
3 | const permissions = {
4 | default: "default",
5 | granted: "granted",
6 | denied: "denied",
7 | };
8 |
9 | const hasNotificationSupport = isBrowser && "Notification" in window;
10 |
11 | export function requestPermission() {
12 | if (hasNotificationSupport) {
13 | Notification.requestPermission();
14 | }
15 | }
16 |
17 | export function useNotifications() {
18 | if (hasNotificationSupport) {
19 | switch (Notification.permission) {
20 | case permissions.granted:
21 | return true;
22 | case permissions.denied:
23 | return false;
24 | case permissions.default:
25 | default:
26 | return null;
27 | }
28 | } else {
29 | return false;
30 | }
31 | }
32 |
--------------------------------------------------------------------------------
/components/molecules/cards/Header.js:
--------------------------------------------------------------------------------
1 | import PropTypes from "prop-types";
2 | import Icon from "../../atoms/Icon";
3 | import Label, { labelTypes } from "../../atoms/Label";
4 |
5 | function Header({ icon, heading, description }) {
6 | return (
7 |
8 |
9 |
10 |
11 | {heading}
12 |
13 | {description ? (
14 |
{description}
15 | ) : null}
16 |
17 |
20 | {presets.map((preset) => (
21 |
22 |
24 | ))}
25 |
26 | ) : (
27 |
9 |
26 | );
27 | }
28 |
29 | export default Logo;
30 |
--------------------------------------------------------------------------------
/components/molecules/cards/LongBreaks.js:
--------------------------------------------------------------------------------
1 | import React, { useState } from "react";
2 | import InputCard from "./InputCard";
3 | import Header from "./Header";
4 | import Toggle from "../../atoms/Toggle";
5 | import NumberInput from "../../atoms/NumberInput";
6 | import { iconTypes } from "../../atoms/Icon";
7 |
8 | function LongBreaks() {
9 | const [checked, setChecked] = useState(false);
10 |
11 | return (
12 |
13 |
18 |
19 |
20 | setChecked(!checked)}
24 | />
25 |
26 |
27 | );
28 | }
29 |
30 | export default LongBreaks;
31 |
--------------------------------------------------------------------------------
/components/molecules/cards/BlockTime.js:
--------------------------------------------------------------------------------
1 | import React, { useState } from "react";
2 | import InputCard from "./InputCard";
3 | import Header from "./Header";
4 | import Toggle from "../../atoms/Toggle";
5 | import { iconTypes } from "../../atoms/Icon";
6 | import Carousel from "./Carousel";
7 | import TimeInput from "./TimeInput";
8 |
9 | function BlockTime() {
10 | const [checked, setChecked] = useState(false);
11 |
12 | return (
13 |
14 |
19 |
20 |
21 | setChecked(!checked)}
25 | />
26 |
27 |
28 | );
29 | }
30 |
31 | export default BlockTime;
32 |
--------------------------------------------------------------------------------
/components/molecules/Modal.js:
--------------------------------------------------------------------------------
1 | import { motion } from "framer-motion";
2 | import PropTypes from "prop-types";
3 | import ReactModal from "react-modal";
4 | import { TRANSITIONS } from "../../utils/constants";
5 |
6 | function Modal({ isOpen, handleClose, children }) {
7 | return (
8 |
15 |
22 | {children}
23 |
24 |
25 | );
26 | }
27 |
28 | Modal.propTypes = {
29 | isOpen: PropTypes.bool,
30 | handleClose: PropTypes.func,
31 | };
32 |
33 | export default Modal;
34 |
--------------------------------------------------------------------------------
/public/vercel.svg:
--------------------------------------------------------------------------------
1 |
3 |
--------------------------------------------------------------------------------
/utils/constants.js:
--------------------------------------------------------------------------------
1 | export const SCALES = [
2 | { name: "5 min", value: 300 },
3 | { name: "15 min", value: 900 },
4 | ];
5 |
6 | export const TRANSITIONS = {
7 | spring500: {
8 | type: "spring",
9 | duration: 0.5,
10 | bounce: 0,
11 | },
12 | springBounce500: {
13 | type: "spring",
14 | duration: 0.5,
15 | bounce: 0.25,
16 | },
17 | };
18 |
19 | export const ACTION_DELAYS = {
20 | short: 500,
21 | long: 1000,
22 | };
23 |
24 | export const DIRECTIONS = {
25 | default: "default",
26 | left: "left",
27 | right: "right",
28 | none: "none",
29 | vertical: "vertical",
30 | };
31 |
32 | // export const PRE_LOGIN_PAGES = [
33 | // { name: 'Sign Up', url: '/signup' },
34 | // { name: 'Login', url: '/login' },
35 | // ];
36 |
37 | export const APP_PAGES = [
38 | { name: "Timeline", url: "/timeline" },
39 | { name: "Presets", url: "/presets" },
40 | ];
41 |
42 | // used for reading / writing the timeline in localStorage
43 | export const STORED_KEY = "stored";
44 |
45 | export const STARTING_KEY = "starting";
46 |
47 | export const SETTINGS_KEY = "settings";
48 |
--------------------------------------------------------------------------------
/components/atoms/Toggle.js:
--------------------------------------------------------------------------------
1 | import PropTypes from "prop-types";
2 | function Toggle({ handleChange, checked, disabled }) {
3 | function handleEnterKey(e) {
4 | if (e.key === "Enter") {
5 | handleChange();
6 | }
7 | }
8 |
9 | const disabledStyle = disabled ? "bg-gray-300" : "bg-gray-400";
10 |
11 | return (
12 |
13 |
25 | );
26 | }
27 |
28 | Toggle.propTypes = {
29 | handleChange: PropTypes.func,
30 | checked: PropTypes.bool,
31 | };
32 |
33 | export default Toggle;
34 |
--------------------------------------------------------------------------------
/utils/localStorageUtil.js:
--------------------------------------------------------------------------------
1 | import { STORED_KEY, STARTING_KEY, SETTINGS_KEY } from "./constants";
2 |
3 | const keys = {
4 | stored: STORED_KEY,
5 | starting: STARTING_KEY,
6 | settings: SETTINGS_KEY,
7 | };
8 |
9 | export function setStoredLocalStorage(stored) {
10 | localStorage.setItem(keys.stored, JSON.stringify(stored));
11 | }
12 |
13 | export function getStoredLocalStorage() {
14 | return JSON.parse(localStorage.getItem(keys.stored));
15 | }
16 |
17 | export function removeStoredLocalStorage() {
18 | localStorage.removeItem(keys.stored);
19 | }
20 |
21 | export function getStartingLocalStorage() {
22 | return Number(localStorage.getItem(keys.starting));
23 | }
24 |
25 | export function setStartingLocalStorage(starting) {
26 | localStorage.setItem(keys.starting, starting);
27 | }
28 |
29 | export function removeStartingLocalStorage() {
30 | localStorage.removeItem(keys.starting);
31 | }
32 |
33 | export function setSettingsLocalStorage(settings) {
34 | localStorage.setItem(keys.settings, JSON.stringify(settings));
35 | }
36 |
37 | export function getSettingsLocalStorage() {
38 | return JSON.parse(localStorage.getItem(keys.settings));
39 | }
40 |
--------------------------------------------------------------------------------
/components/molecules/cards/TimelineHasEndedModal.js:
--------------------------------------------------------------------------------
1 | import PropTypes from "prop-types";
2 | import React from "react";
3 | import InputCard from "./InputCard";
4 | import Header from "./Header";
5 | import { iconTypes } from "../../atoms/Icon";
6 | import Button, { buttonTypes } from "../../atoms/Button";
7 | import Modal from "../Modal";
8 |
9 | function TimelineHasEndedModal({ isOpen, setIsOpen }) {
10 | return (
11 | setIsOpen(false)}>
12 |
13 |
18 |
19 |
20 | setIsOpen(false)}
22 | type={buttonTypes.primary}
23 | >
24 | Ok
25 |
26 |
27 |
28 |
29 | );
30 | }
31 |
32 | TimelineHasEndedModal.propTypes = {
33 | isOpen: PropTypes.bool,
34 | setIsOpen: PropTypes.func,
35 | };
36 |
37 | export default TimelineHasEndedModal;
38 |
--------------------------------------------------------------------------------
/components/atoms/RadioButton.js:
--------------------------------------------------------------------------------
1 | import React from "react";
2 | import PropTypes from "prop-types";
3 |
4 | function RadioButton({ name, id, label, value, handleChange, isChecked }) {
5 | return (
6 |
7 |
8 |
19 |
20 | {label}
21 |
22 |
38 |
39 | {children}
40 |
41 |
42 | );
43 | };
44 |
45 | export const usePresets = () => useContext(PresetsContext);
46 | export const useFetchPresets = () => useContext(FetchPresetsContext);
47 |
--------------------------------------------------------------------------------
/pages/_document.js:
--------------------------------------------------------------------------------
1 | import Document, { Html, Head, Main, NextScript } from "next/document";
2 |
3 | class MyDocument extends Document {
4 | render() {
5 | return (
6 |
7 |
8 | setIsOpen(false)}>
22 |
23 |
28 |
29 |
30 |
31 | Enable
32 |
33 |
34 | Cancel
35 |
36 |
37 |
38 |
39 | );
40 | }
41 |
42 | EnableNotificationsModal.propTypes = {
43 | isOpen: PropTypes.bool,
44 | setIsOpen: PropTypes.func,
45 | presetName: PropTypes.string,
46 | };
47 |
48 | export default EnableNotificationsModal;
49 |
--------------------------------------------------------------------------------
/components/molecules/cards/CardsLayout.js:
--------------------------------------------------------------------------------
1 | import PropTypes from "prop-types";
2 | import TimelineStartEnd from "./TimelineStartEnd";
3 | import IntervalSize from "./IntervalSize";
4 | import BlockTime from "./BlockTime";
5 | import TimelineDuration from "./TimelineDuration";
6 | import LongBreaks from "./LongBreaks";
7 | import TimelinePreview from "../TimelinePreview";
8 | import { BlueprintProvider } from "../../../context/Blueprint";
9 |
10 | const types = {
11 | fullTime: "fullTime",
12 | flexible: "flexible",
13 | };
14 |
15 | export { types as cardsLayoutTypes };
16 |
17 | function CardsLayout({ type }) {
18 | return (
19 |
20 |
21 |
22 | {type === types.fullTime ? (
23 |
28 |
29 |
30 |
32 |
33 |
34 | {type === types.fullTime ?
36 |
37 |
38 |
39 |
41 |
42 | );
43 | }
44 |
45 | CardsLayout.propTypes = {
46 | type: PropTypes.string,
47 | };
48 |
49 | export default CardsLayout;
50 |
--------------------------------------------------------------------------------
/components/molecules/cards/LogoutModal.js:
--------------------------------------------------------------------------------
1 | import PropTypes from "prop-types";
2 | import React from "react";
3 | import InputCard from "./InputCard";
4 | import Header from "./Header";
5 | import { iconTypes } from "../../atoms/Icon";
6 | import Button, { buttonTypes } from "../../atoms/Button";
7 | import Modal from "../Modal";
8 | import { useAuth } from "../../../firebase/Firebase";
9 | import {
10 | removeStartingLocalStorage,
11 | removeStoredLocalStorage,
12 | } from "../../../utils/localStorageUtil";
13 | function LogoutModal({ isOpen, setIsOpen }) {
14 | const { signOut, user } = useAuth();
15 |
16 | async function handleLogout() {
17 | await signOut();
18 | removeStoredLocalStorage();
19 | removeStartingLocalStorage();
20 | handleClose(true);
21 | }
22 |
23 | function handleClose() {
24 | setIsOpen(false);
25 | }
26 |
27 | return (
28 |
29 |
30 |
35 |
36 |
37 |
38 | Cancel
39 |
40 |
41 | Logout
42 |
43 |
44 |
45 |
46 | );
47 | }
48 |
49 | LogoutModal.propTypes = {
50 | isOpen: PropTypes.bool,
51 | setIsOpen: PropTypes.func,
52 | presetName: PropTypes.string,
53 | };
54 |
55 | export default LogoutModal;
56 |
--------------------------------------------------------------------------------
/components/atoms/ActionButton.js:
--------------------------------------------------------------------------------
1 | import PropTypes from "prop-types";
2 |
3 | const types = {
4 | add: "add",
5 | remove: "remove",
6 | };
7 |
8 | export { types as actionButtonTypes };
9 |
10 | function ActionButton({ type, handleClick }) {
11 | return getStyledButton(type, handleClick);
12 | }
13 |
14 | ActionButton.propTypes = {
15 | type: PropTypes.string,
16 | };
17 |
18 | function getStyledButton(type, handleClick) {
19 | let colorStyle = "";
20 | let baseStyle = "w-20 h-20 420:w-24 420:h-24";
21 |
22 | switch (type) {
23 | case types.add:
24 | colorStyle = "fill-primary-500 group-focus-visible:fill-primary-600";
25 | break;
26 | case types.remove:
27 | colorStyle = "fill-support-error group-focus-visible:fill-blocked-600";
28 | baseStyle += " rotate-45";
29 | break;
30 | default:
31 | break;
32 | }
33 |
34 | return (
35 | handleClick(type)}
37 | className="appearance-none outline-none group"
38 | >
39 |
45 |
53 |
54 | );
55 | }
56 |
57 | ActionButton.propTypes = {
58 | type: PropTypes.string,
59 | handleClick: PropTypes.func,
60 | };
61 |
62 | export default ActionButton;
63 |
--------------------------------------------------------------------------------
/components/atoms/Interval.js:
--------------------------------------------------------------------------------
1 | import PropTypes from "prop-types";
2 |
3 | const types = {
4 | work: "work",
5 | break: "break",
6 | blocked: "blocked",
7 | floating: "floating",
8 | starting: "starting",
9 | end: "end",
10 | };
11 |
12 | export { types as intervalTypes };
13 |
14 | function Interval({ type, first, last, duration }) {
15 | return (
16 |
26 |
31 |
32 |
33 | setW(value)}
37 | step={5}
38 | min={5}
39 | max={90}
40 | unit="min"
41 | widthStyle="w-64 420:w-78"
42 | bigLabel="Work"
43 | centerBig
44 | />
45 |
46 | setB(value)}
50 | step={5}
51 | min={5}
52 | max={90}
53 | unit="min"
54 | widthStyle="w-64 420:w-78"
55 | bigLabel="Break"
56 | centerBig
57 | />
58 |
59 |
60 | );
61 | }
62 |
63 | export default IntervalSize;
64 |
--------------------------------------------------------------------------------
/components/molecules/cards/TimelineDuration.js:
--------------------------------------------------------------------------------
1 | import { useState, useEffect } from "react";
2 | import Header from "./Header";
3 | import { iconTypes } from "../../atoms/Icon";
4 | import InputCard from "./InputCard";
5 | import NumberInput from "../../atoms/NumberInput";
6 | import {
7 | useDispatchBlueprint,
8 | blueprintActions,
9 | } from "../../../context/Blueprint";
10 |
11 | function TimelineDuration() {
12 | const [hours, setHours] = useState(0);
13 | const [minutes, setMinutes] = useState(0);
14 | const blueprintDispatch = useDispatchBlueprint();
15 |
16 | useEffect(() => {
17 | const duration = hours * 3600 + minutes * 60;
18 |
19 | blueprintDispatch({ type: blueprintActions.SET_START, value: Date.now() });
20 | blueprintDispatch({ type: blueprintActions.SET_DURATION, value: duration });
21 | }, [hours, minutes]);
22 |
23 | return (
24 |
25 |
30 |
31 |
32 | setHours(value)}
36 | step={1}
37 | min={0}
38 | max={12}
39 | unit="hrs"
40 | widthStyle="w-64 420:w-78"
41 | bigLabel="Hours"
42 | centerBig
43 | />
44 |
45 | setMinutes(value)}
49 | step={15}
50 | min={0}
51 | max={45}
52 | unit="min"
53 | widthStyle="w-64 420:w-78"
54 | bigLabel="Minutes"
55 | centerBig
56 | />
57 |
58 |
59 | );
60 | }
61 |
62 | export default TimelineDuration;
63 |
--------------------------------------------------------------------------------
/context/Settings.js:
--------------------------------------------------------------------------------
1 | import { useState, useEffect } from "react";
2 | import { useContext, createContext } from "react";
3 | import {
4 | getSettingsLocalStorage,
5 | setSettingsLocalStorage,
6 | } from "../utils/localStorageUtil";
7 | import isBrowser from "../utils/isBrowser";
8 | import { useAuth } from "../firebase/Firebase";
9 |
10 | const SettingsContext = createContext();
11 | const SaveSettingsContext = createContext();
12 |
13 | function getInitialState(user) {
14 | const initialState = {
15 | use12Hour: true,
16 | useSmartRestart: false,
17 | };
18 |
19 | // prioritize settings from localStorage
20 | if (isBrowser && user) {
21 | const localStorageSettings = getSettingsLocalStorage();
22 |
23 | if (localStorageSettings) {
24 | return localStorageSettings;
25 | }
26 | }
27 |
28 | // initial state
29 | return initialState;
30 | }
31 |
32 | export const SettingsProvider = ({ children }) => {
33 | const [settings, setSettings] = useState(getInitialState());
34 | const { user } = useAuth();
35 |
36 | useEffect(() => {
37 | if (user) {
38 | setSettings(getInitialState(user));
39 | }
40 | }, [user]);
41 |
42 | function saveSettings(settings) {
43 | setSettings(settings);
44 |
45 | if (user) {
46 | setSettingsLocalStorage(settings);
47 | }
48 | }
49 |
50 | return (
51 |
52 |
53 | {children}
54 |
55 |
56 | );
57 | };
58 |
59 | export const useSettings = () => useContext(SettingsContext);
60 | export const useSaveSettings = () => useContext(SaveSettingsContext);
61 |
62 | export const timeFormats = [
63 | { name: "AM / PM", value: true },
64 | { name: "24 hour", value: false },
65 | ];
66 |
67 | export const restartTypes = [
68 | { name: "Instant", value: false },
69 | { name: "Smart", value: true },
70 | ];
71 |
--------------------------------------------------------------------------------
/components/atoms/Arrow.js:
--------------------------------------------------------------------------------
1 | import PropTypes from "prop-types";
2 |
3 | const types = {
4 | down: "down",
5 | left: "left",
6 | right: "right",
7 | up: "up",
8 |
9 | small: "50",
10 | reg: "100",
11 |
12 | active: "active",
13 | default: "default",
14 | disabled: "disabled",
15 | };
16 |
17 | export { types as arrowTypes };
18 |
19 | function Arrow({ type, size, state }) {
20 | return resolveArrow(type, size, state);
21 | }
22 |
23 | Arrow.propTypes = {
24 | type: PropTypes.string,
25 | size: PropTypes.string,
26 | state: PropTypes.string,
27 | };
28 |
29 | function resolveArrow(type, size, state) {
30 | let sizeStyle = "";
31 |
32 | switch (size) {
33 | case types.small:
34 | sizeStyle = "w-13 h-13 420:w-16 420:h-16";
35 | break;
36 | case types.reg:
37 | sizeStyle = "w-16 h-16 420:w-24 420:h-24";
38 | break;
39 | default:
40 | return null;
41 | }
42 |
43 | let typeStyle = "";
44 |
45 | switch (type) {
46 | case types.down:
47 | break;
48 | case types.left:
49 | typeStyle = "rotate-90";
50 | break;
51 | case types.right:
52 | typeStyle = "-rotate-90";
53 | break;
54 | case types.up:
55 | typeStyle = "rotate-180";
56 | break;
57 | default:
58 | return null;
59 | }
60 |
61 | let colorStyle = "";
62 |
63 | switch (state) {
64 | case types.active:
65 | colorStyle = "fill-primary-500 group-focus-visible:fill-primary-600";
66 | break;
67 | case types.default:
68 | colorStyle = "fill-gray-400";
69 | break;
70 | case types.disabled:
71 | colorStyle = "fill-gray-300";
72 | return null;
73 | }
74 |
75 | return (
76 |
82 |
89 | );
90 | }
91 |
92 | export default Arrow;
93 |
--------------------------------------------------------------------------------
/components/molecules/cards/DeletePresetModal.js:
--------------------------------------------------------------------------------
1 | import PropTypes from "prop-types";
2 | import React from "react";
3 | import InputCard from "./InputCard";
4 | import Header from "./Header";
5 | import { iconTypes } from "../../atoms/Icon";
6 | import Button, { buttonTypes } from "../../atoms/Button";
7 | import Modal from "../Modal";
8 | import { useDB } from "../../../firebase/Firebase";
9 | import { useState } from "react";
10 | import { ACTION_DELAYS } from "../../../utils/constants";
11 | import { useFetchPresets } from "../../../context/Presets";
12 |
13 | function DeletePresetModal({ isOpen, setIsOpen, name, id }) {
14 | const [success, setSuccess] = useState(false);
15 | const { deletePreset } = useDB();
16 | const fetchPresets = useFetchPresets();
17 |
18 | async function handleDelete() {
19 | const error = await deletePreset(id);
20 |
21 | if (!error) {
22 | setSuccess(true);
23 |
24 | setTimeout(() => {
25 | handleClose(true);
26 | }, ACTION_DELAYS.short);
27 | }
28 | }
29 |
30 | function handleClose(refetch) {
31 | setIsOpen(false);
32 | setSuccess(false);
33 |
34 | if (refetch) {
35 | fetchPresets();
36 | }
37 | }
38 |
39 | return (
40 |
41 |
42 |
47 |
48 |
49 |
50 | Cancel
51 |
52 |
56 | Delete
57 |
58 |
59 |
60 |
61 | );
62 | }
63 |
64 | DeletePresetModal.propTypes = {
65 | isOpen: PropTypes.bool,
66 | setIsOpen: PropTypes.func,
67 | presetName: PropTypes.string,
68 | };
69 |
70 | export default DeletePresetModal;
71 |
--------------------------------------------------------------------------------
/pages/index.js:
--------------------------------------------------------------------------------
1 | import Button, { buttonTypes } from "../components/atoms/Button";
2 | import { useRouter } from "next/dist/client/router";
3 |
4 | export default function Home() {
5 | const router = useRouter();
6 |
7 | return (
8 |
9 | {/* Main */}
10 |
11 |
12 |
13 | Take Your Productivity
14 | To The
15 |
16 | Next Level
17 |
18 |
19 |
20 | The Smart Way to manage your screen time
21 | While staying Productive
22 |
23 |
24 |
25 |
26 |
27 | router.push("/timeline")}
31 | >
32 | Get Started
33 |
34 |
35 |
36 |
40 | View Code
41 |
42 |
46 | View Design
47 |
48 |
49 |
53 |
54 | );
55 | }
56 |
--------------------------------------------------------------------------------
/components/atoms/ViewMoreLess.js:
--------------------------------------------------------------------------------
1 | import React from "react";
2 | import PropTypes from "prop-types";
3 | import useClientWidth from "../../utils/useClientWidth";
4 | import { isBelowBreakpoint } from "../../utils/tailwindUtil";
5 | import Arrow, { arrowTypes } from "./Arrow";
6 | import { AnimatePresence, motion } from "framer-motion";
7 | import { TRANSITIONS } from "../../utils/constants";
8 |
9 | const variants = {
10 | initial: {
11 | height: 0,
12 | },
13 | enter: {
14 | height: "auto",
15 | transition: TRANSITIONS.spring500,
16 | },
17 | exit: {
18 | height: 0,
19 | transition: TRANSITIONS.spring500,
20 | },
21 | };
22 | function ViewMoreLess({
23 | viewMoreText,
24 | viewLessText,
25 | children,
26 | isTimeline,
27 | handleClick,
28 | active,
29 | }) {
30 | const clientWidth = useClientWidth();
31 | const isMobile = isBelowBreakpoint(clientWidth, "932");
32 |
33 | const buttonStyle = `${isTimeline ? "932:hidden" : ""}`;
34 |
35 | let content;
36 |
37 | if (!isTimeline || (isTimeline && isMobile)) {
38 | content = active ? (
39 |
46 | {children}
47 |
48 | ) : null;
49 | } else if (isTimeline && !isMobile) {
50 | content = children;
51 | }
52 |
53 | return (
54 | <>
55 |
60 | {active ? viewLessText : viewMoreText}
61 |
68 |
69 |
70 | {content}
71 |
72 | );
73 | }
74 |
75 | ViewMoreLess.propTypes = {
76 | viewMoreText: PropTypes.string,
77 | viewLessText: PropTypes.string,
78 | isTimeline: PropTypes.bool,
79 | };
80 |
81 | export default ViewMoreLess;
82 |
--------------------------------------------------------------------------------
/components/atoms/Button.js:
--------------------------------------------------------------------------------
1 | import PropTypes from "prop-types";
2 | import { motion } from "framer-motion";
3 | import Link from "next/link";
4 |
5 | const delay = 150;
6 |
7 | export { delay as buttonDelay };
8 |
9 | const types = {
10 | primary: "primary",
11 | outline: "outline",
12 | delete: "delete",
13 | success: "success",
14 | callToAction: "callToAction",
15 | };
16 |
17 | export { types as buttonTypes };
18 |
19 | function Button({
20 | type,
21 | children,
22 | disabled,
23 | handleClick,
24 | isSubmit,
25 | styleOverride,
26 | href,
27 | }) {
28 | let style;
29 |
30 | switch (type) {
31 | case types.primary:
32 | style =
33 | "text-white bg-primary-500 disabled:bg-gray-300 focus-visible:bg-primary-600";
34 | break;
35 | case types.callToAction:
36 | style = "text-primary-600 bg-support-attention focus-visible:bg-white";
37 | break;
38 | case types.outline:
39 | style =
40 | "text-primary-500 bg-white ring-5/2 ring-inset ring-primary-500 disabled:ring-gray-300 disabled:text-gray-300 focus-visible:ring-primary-600";
41 | break;
42 | case types.delete:
43 | style =
44 | "text-white bg-blocked-500 disabled:bg-gray-300 focus-visible:bg-blocked-600";
45 | break;
46 | case types.success:
47 | style = "text-white bg-support-success";
48 | break;
49 | default:
50 | return null;
51 | }
52 |
53 | if (href) {
54 | return (
55 |
66 | {children}
67 |
68 | );
69 | }
70 |
71 | return (
72 | setTimeout(handleClick, delay)}
76 | disabled={disabled}
77 | className={
78 | "text-center select-none px-24 420:px-32 py-8 body-med body-small rounded-6 outline-none active:scale-90" +
79 | " " +
80 | style +
81 | " " +
82 | styleOverride
83 | }
84 | whileTap={{ scale: 0.85 }}
85 | >
86 | {children}
87 |
88 | );
89 | }
90 |
91 | Button.propTypes = {
92 | type: PropTypes.string,
93 | disabled: PropTypes.bool,
94 | handleClick: PropTypes.func,
95 | };
96 |
97 | export default Button;
98 |
--------------------------------------------------------------------------------
/styles/globals.css:
--------------------------------------------------------------------------------
1 | @tailwind base;
2 | @tailwind components;
3 | @tailwind utilities;
4 |
5 | @layer base {
6 | @font-face {
7 | font-family: "IntroDemo";
8 | src:
9 | url("/fonts/Intro/IntroDemo-BlackCAPS.eot"),
10 | /* IE9 Compat Modes */ url("/fonts/Intro/IntroDemo-BlackCAPS.woff2")
11 | format("woff2"),
12 | /* Super Modern Browsers */ url("/fonts/Intro/IntroDemo-BlackCAPS.woff")
13 | format("woff"),
14 | /* Pretty Modern Browsers */ url("/fonts/Intro/IntroDemo-BlackCAPS.ttf")
15 | format("truetype"); /* Safari, Android, iOS */
16 | }
17 | }
18 |
19 | @layer utilities {
20 | .carousel {
21 | overflow-y: visible;
22 | overflow-x: clip;
23 | }
24 |
25 | /* Hide scrollbar for Chrome, Safari and Opera */
26 | .hide-scrollbar::-webkit-scrollbar {
27 | display: none;
28 | }
29 |
30 | /* Hide scrollbar for IE, Edge and Firefox */
31 | .hide-scrollbar {
32 | -ms-overflow-style: none; /* IE and Edge */
33 | scrollbar-width: none; /* Firefox */
34 | }
35 |
36 | .term {
37 | @apply text-gray-600;
38 | }
39 |
40 | .term::after {
41 | content: ":\00a0";
42 | }
43 |
44 | .custom-scrollbar {
45 | scrollbar-color: #39a2db #e8f0f2;
46 | scrollbar-width: thin;
47 | }
48 |
49 | .custom-scrollbar::-webkit-scrollbar {
50 | height: 8px; /* width of the entire scrollbar */
51 | }
52 |
53 | .custom-scrollbar::-webkit-scrollbar-track {
54 | background: #e8f0f2; /* color of the tracking area */
55 | border-radius: 8px;
56 | }
57 |
58 | .custom-scrollbar::-webkit-scrollbar-thumb {
59 | background-color: #39a2db; /* color of the scroll thumb */
60 | border-radius: 8px;
61 | }
62 |
63 | .body-reg {
64 | @apply font-base font-reg text-13 420:text-16 tracking-2;
65 | }
66 |
67 | .body-med {
68 | @apply font-base font-med text-13 420:text-16 tracking-2;
69 | }
70 |
71 | .mono-med {
72 | @apply font-mono font-med text-13 420:text-16;
73 | }
74 |
75 | .body-bold {
76 | @apply font-base font-bold text-13 420:text-16 tracking-2;
77 | }
78 |
79 | .body-sbold {
80 | @apply font-base font-sbold text-13 420:text-16 tracking-2;
81 | }
82 |
83 | .heading-landing {
84 | @apply font-base font-black text-32 420:text-40 480:text-50 tracking-2;
85 | }
86 |
87 | .subheading-landing {
88 | @apply font-base font-med text-16 420:text-20 tracking-2;
89 | }
90 |
91 | .devices-landing {
92 | background: url("/images/devices.svg") top center/contain no-repeat;
93 | }
94 |
95 | .bg-landing {
96 | background: url("/images/bg-landing.svg") top left/cover no-repeat;
97 | }
98 | }
99 |
--------------------------------------------------------------------------------
/components/atoms/Tab.js:
--------------------------------------------------------------------------------
1 | import PropTypes from "prop-types";
2 |
3 | const types = {
4 | navBar: "navBar",
5 | pagination: "pagination",
6 | };
7 |
8 | export { types as tabTypes };
9 | function Tab({ children, type, active, first, last, value, handleClick }) {
10 | return (
11 |
12 | handleClick(value)}
15 | >
16 | {children}
17 |
18 |
19 | );
20 | }
21 |
22 | Tab.propTypes = {
23 | type: PropTypes.string,
24 | active: PropTypes.bool,
25 | first: PropTypes.bool,
26 | last: PropTypes.bool,
27 | value: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
28 | handleClick: PropTypes.func,
29 | };
30 |
31 | function getStyle(type, active, first, last) {
32 | switch (type) {
33 | case types.navBar:
34 | return getNavBarStyle(active, first, last);
35 | case types.pagination:
36 | return getPaginationStyle(active, first, last);
37 | default:
38 | return "";
39 | }
40 | }
41 |
42 | function getNavBarStyle(active, first, last) {
43 | let baseStyle =
44 | "w-full block outline-none text-center text-white body-med p-6 border-b border-white 420:p-8 420:text-16 732:font-sbold 732:py-8 732:px-32 732:border-t-2 732:border-b-2 732:border-r-2 732:border-primary-500 732:focus-visible:bg-primary-600 732:focus-visible:text-white";
45 |
46 | let activeStyle = "";
47 |
48 | if (active) {
49 | activeStyle = "border-opacity-100 732:bg-primary-500 732:text-white";
50 | } else {
51 | activeStyle =
52 | "border-opacity-0 732:border-opacity-100 732:bg-white 732:text-primary-500";
53 | }
54 |
55 | let borderStyle = "";
56 |
57 | if (first) {
58 | borderStyle = "732:border-2 732:rounded-l-20";
59 | } else if (last) {
60 | borderStyle = "732:border-2 732:border-l-0 732:rounded-r-20";
61 | }
62 |
63 | return `${baseStyle} ${activeStyle} ${borderStyle}`;
64 | }
65 |
66 | function getPaginationStyle(active, first, last) {
67 | let baseStyle =
68 | "block outline-none text-center body-sbold py-2 420:py-0 px-8 border-t-2 border-b-2 border-r-2 border-primary-500 focus-visible:bg-primary-600 focus-visible:text-white";
69 |
70 | let activeStyle = "";
71 |
72 | if (active) {
73 | activeStyle = "bg-primary-500 text-white";
74 | } else {
75 | activeStyle = "bg-white text-primary-500";
76 | }
77 |
78 | let borderStyle = "";
79 |
80 | if (first) {
81 | borderStyle = "border-2 rounded-l-6";
82 | } else if (last) {
83 | borderStyle = "border-2 border-l-0 rounded-r-6";
84 | }
85 |
86 | return `${baseStyle} ${activeStyle} ${borderStyle}`;
87 | }
88 |
89 | export default Tab;
90 |
--------------------------------------------------------------------------------
/components/atoms/Label.js:
--------------------------------------------------------------------------------
1 | import PropTypes from "prop-types";
2 |
3 | const types = {
4 | // size
5 | small: "small",
6 | status: "status",
7 | big: "big",
8 | large: "large",
9 | xlarge: "xlarge",
10 |
11 | // as
12 | h1: "h1",
13 | h2: "h2",
14 | h3: "h3",
15 | h4: "h4",
16 | h5: "h5",
17 | h6: "h6",
18 | label: "label",
19 |
20 | // type
21 | success: "success",
22 | error: "error",
23 | };
24 |
25 | export { types as labelTypes };
26 |
27 | function Label({ size, as, children, fieldId, type, center, capitalize }) {
28 | const style = getStyle(size, type, center, capitalize);
29 |
30 | switch (as) {
31 | case types.h1:
32 | return {children} ;
33 | case types.h2:
34 | return {children} ;
35 | case types.h3:
36 | return {children} ;
37 | case types.h4:
38 | return {children} ;
39 | case types.h5:
40 | return {children} ;
41 | case types.h6:
42 | return {children} ;
43 | case types.label:
44 | return (
45 |
46 | {children}
47 |
48 | );
49 | default:
50 | return null;
51 | }
52 | }
53 |
54 | Label.propTypes = {
55 | size: PropTypes.string,
56 | as: PropTypes.string,
57 | fieldId: PropTypes.string,
58 | type: PropTypes.string,
59 | center: PropTypes.bool,
60 | capitalize: PropTypes.bool,
61 | };
62 |
63 | function getStyle(size, type, center, capitalize) {
64 | const baseStyle = "tracking-2 font-base";
65 |
66 | let colorStyle = "";
67 |
68 | switch (type) {
69 | case types.success:
70 | colorStyle = "text-support-success";
71 | break;
72 | case types.error:
73 | colorStyle = "text-support-error";
74 | break;
75 | default:
76 | colorStyle = "text-gray-600";
77 | break;
78 | }
79 |
80 | let sizeStyle = "";
81 |
82 | switch (size) {
83 | case types.status:
84 | sizeStyle =
85 | "font-med text-10 pt-4 420:text-13 absolute bottom-0 translate-y-full";
86 | break;
87 | case types.small:
88 | sizeStyle = "font-med text-10 mb-4 420:text-13";
89 | break;
90 | case types.big:
91 | sizeStyle = "font-bold text-13 420:text-16 mb-6 420:mb-8";
92 | break;
93 | case types.large:
94 | sizeStyle = "font-bold text-16 420:text-20 mb-6 420:mb-8";
95 | break;
96 | case types.xlarge:
97 | sizeStyle = "font-bold text-20 420:text-26 mb-6 420:mb-8";
98 | break;
99 | default:
100 | break;
101 | }
102 |
103 | let centerStyle = "";
104 |
105 | if (center) {
106 | centerStyle = "text-center";
107 | }
108 |
109 | const textStyle = capitalize ? "capitalize" : "normal-case";
110 |
111 | return `${baseStyle} ${centerStyle} ${sizeStyle} ${colorStyle} ${textStyle}`;
112 | }
113 |
114 | export default Label;
115 |
--------------------------------------------------------------------------------
/components/atoms/TextInput.js:
--------------------------------------------------------------------------------
1 | import PropTypes from "prop-types";
2 | import Label, { labelTypes } from "./Label";
3 |
4 | const types = {
5 | text: "text",
6 | password: "password",
7 | email: "email",
8 | };
9 |
10 | export { types as textInputTypes };
11 | function TextInput({
12 | name,
13 | type,
14 | bigLabel,
15 | smallLabel,
16 | widthStyle,
17 | centerBig,
18 | centerSmall,
19 | successLabel,
20 | errorLabel,
21 | children,
22 | value,
23 | disabled,
24 | handleChange,
25 | hasSuccess,
26 | }) {
27 | const renderBigLabel = bigLabel ? (
28 |
34 | {bigLabel}
35 |
36 | ) : null;
37 |
38 | const renderSmallLabel = smallLabel ? (
39 |
45 | {smallLabel}
46 |
47 | ) : null;
48 |
49 | const renderSuccessLabel = successLabel ? (
50 |
56 | {successLabel}
57 |
58 | ) : null;
59 |
60 | const renderErrorLabel = errorLabel ? (
61 |
67 | {errorLabel}
68 |
69 | ) : null;
70 |
71 | return (
72 |
73 | {renderBigLabel}
74 | {renderSmallLabel}
75 |
90 | );
91 | }
92 |
93 | function getStyle(error, success) {
94 | const baseStyle = `appearance-none text-gray-600 placeholder-gray-400 body-reg p-8 ring-2 ring-inset rounded-4`;
95 | const focusStyle = "focus:outline-none focus:ring-primary-500";
96 | const disabledStyle =
97 | "disabled:bg-white disabled:ring-gray-300 disabled:placeholder-gray-300";
98 |
99 | let ringColor = "";
100 |
101 | if (error) {
102 | ringColor = "ring-support-error";
103 | } else if (success) {
104 | ringColor = "ring-support-success";
105 | } else {
106 | ringColor = "ring-gray-400";
107 | }
108 |
109 | return `${baseStyle} ${ringColor} ${focusStyle} ${disabledStyle}`;
110 | }
111 |
112 | TextInput.propTypes = {
113 | name: PropTypes.string,
114 | bigLabel: PropTypes.string,
115 | smallLabel: PropTypes.string,
116 | successLabel: PropTypes.string,
117 | errorLabel: PropTypes.string,
118 | value: PropTypes.string,
119 | type: PropTypes.string,
120 | disabled: PropTypes.bool,
121 | centerBig: PropTypes.bool,
122 | centerSmall: PropTypes.bool,
123 | widthStyle: PropTypes.string,
124 | };
125 |
126 | export default TextInput;
127 |
--------------------------------------------------------------------------------
/components/molecules/cards/SettingsModal.js:
--------------------------------------------------------------------------------
1 | import { useState } from "react";
2 | import PropTypes from "prop-types";
3 | import InputCard from "./InputCard";
4 | import Header from "./Header";
5 | import { iconTypes } from "../../atoms/Icon";
6 | import Button, { buttonTypes } from "../../atoms/Button";
7 | import SelectInput from "../../atoms/SelectInput";
8 | import Modal from "../Modal";
9 | import {
10 | useSettings,
11 | useSaveSettings,
12 | timeFormats,
13 | restartTypes,
14 | } from "../../../context/Settings";
15 | import { ACTION_DELAYS } from "../../../utils/constants";
16 |
17 | function SettingsModal({ isOpen, setIsOpen }) {
18 | const settings = useSettings();
19 | const saveSettings = useSaveSettings();
20 | const [localSettings, setLocalSettings] = useState(settings);
21 | const [success, setSuccess] = useState(false);
22 |
23 | function handleApply() {
24 | // save local settings to the context and localStorage
25 | saveSettings(localSettings);
26 |
27 | setSuccess(true);
28 |
29 | setTimeout(() => {
30 | closeModal();
31 | }, ACTION_DELAYS.short);
32 | }
33 |
34 | function handleCancel() {
35 | // revert local changes to context
36 | setLocalSettings(settings);
37 | closeModal();
38 | }
39 |
40 | function closeModal() {
41 | setIsOpen(false);
42 | setSuccess(false);
43 | }
44 |
45 | return (
46 |
47 |
48 |
49 |
50 |
92 |
93 |
94 | );
95 | }
96 |
97 | SettingsModal.propTypes = {
98 | isOpen: PropTypes.bool,
99 | setIsOpen: PropTypes.func,
100 | };
101 |
102 | export default SettingsModal;
103 |
--------------------------------------------------------------------------------
/tailwind.config.js:
--------------------------------------------------------------------------------
1 | module.exports = {
2 | content: [
3 | "./pages/**/*.{js,ts,jsx,tsx}",
4 | "./components/**/*.{js,ts,jsx,tsx}",
5 | ],
6 | theme: {
7 | extend: {
8 | borderWidth: {
9 | 3: "3px",
10 | },
11 | scale: {
12 | "-1": "-1",
13 | },
14 | translate: {
15 | "-3/7": "-42.8571429%",
16 | },
17 | ringWidth: {
18 | "5/2": "2.5px",
19 | },
20 | },
21 | colors: {
22 | transparent: "transparent",
23 | white: "#fff",
24 | black: "#000",
25 | primary: {
26 | 300: "#E8F0F2",
27 | 400: "#A2DBFA",
28 | 500: "#39A2DB",
29 | 600: "#0C6899",
30 | },
31 | blocked: {
32 | 300: "#F8EEEC",
33 | 400: "#FFA79B",
34 | 500: "#F8644F",
35 | 600: "#DC311A",
36 | },
37 | support: {
38 | success: "#00B076",
39 | error: "#F8644F",
40 | attention: "#F8D34F",
41 | },
42 | gray: {
43 | 300: "#D9D9D9",
44 | 400: "#B2B2B2",
45 | 500: "#8C8C8C",
46 | 600: "#666666",
47 | 700: "#404040",
48 | },
49 | },
50 | screens: {
51 | 320: "320px",
52 | 360: "360px",
53 | 420: "420px",
54 | 438: "438px",
55 | 480: "480px",
56 | 540: "540px",
57 | 640: "640px",
58 | 732: "732px",
59 | 808: "808px",
60 | 932: "932px",
61 | 1172: "1172px",
62 | 1260: "1260px",
63 | },
64 | spacing: {
65 | monopad: "26px", // width of 2.5 characters in monospaced font for timeline
66 | 0: "0px",
67 | 1: "1px",
68 | 2: "2px",
69 | 4: "4px",
70 | 6: "6px",
71 | 8: "8px",
72 | 12: "12px",
73 | 13: "13px",
74 | 16: "16px",
75 | 20: "20px",
76 | 24: "24px",
77 | 32: "32px",
78 | 40: "40px",
79 | 48: "48px",
80 | 52: "52px",
81 | 56: "56px",
82 | 64: "64px",
83 | 72: "72px",
84 | 78: "78px",
85 | 80: "80px",
86 | 96: "96px",
87 | 100: "100px",
88 | 120: "120px",
89 | 128: "128px",
90 | 130: "130px",
91 | 160: "160px",
92 | 200: "200px",
93 | 220: "220px",
94 | },
95 | maxWidth: {
96 | 1600: "1600px",
97 | },
98 | fontFamily: {
99 | base: ["Inter", "sans-serif"],
100 | mono: ["Azeret Mono", "monospace"],
101 | display: ["IntroDemo"],
102 | },
103 | fontSize: {
104 | 8: ["8px", { lineHeight: "16px" }],
105 | 10: ["10px", { lineHeight: "16px" }],
106 | 13: ["13px", { lineHeight: "16px" }],
107 | 16: ["16px", { lineHeight: "24px" }],
108 | 20: ["20px", { lineHeight: "24px" }],
109 | 26: ["26px", { lineHeight: "32px" }],
110 | 32: ["32px", { lineHeight: "40px" }],
111 | 40: ["40px", { lineHeight: "48px" }],
112 | 50: ["50px", { lineHeight: "56px" }],
113 | 64: ["64px", { lineHeight: "72px" }],
114 | },
115 | fontWeight: {
116 | reg: "400",
117 | med: "500",
118 | sbold: "600",
119 | bold: "700",
120 | black: "900",
121 | },
122 | letterSpacing: {
123 | 2: "0.02em",
124 | },
125 | borderRadius: {
126 | 0: "0px",
127 | 4: "4px",
128 | 6: "6px",
129 | 8: "8px",
130 | 20: "20px",
131 | },
132 | },
133 | plugins: [],
134 | };
135 |
--------------------------------------------------------------------------------
/context/Blueprint.js:
--------------------------------------------------------------------------------
1 | import { useReducer, useContext, createContext } from "react";
2 |
3 | const BlueprintStateContext = createContext();
4 | const BlueprintDispatchContext = createContext();
5 |
6 | const actionTypes = {
7 | SET_DURATION: "SET_DURATION",
8 | SET_WORK: "SET_WORK",
9 | SET_BREAK: "SET_BREAK",
10 | SET_START: "SET_START",
11 | };
12 |
13 | export { actionTypes as blueprintActions };
14 |
15 | function reducer(blueprint, action) {
16 | switch (action.type) {
17 | case actionTypes.SET_DURATION:
18 | return {
19 | ...blueprint,
20 | duration: action.value,
21 | };
22 | case actionTypes.SET_START:
23 | return {
24 | ...blueprint,
25 | startTime: action.value,
26 | };
27 | case actionTypes.SET_WORK:
28 | return {
29 | ...blueprint,
30 | workDuration: action.value,
31 | };
32 | case actionTypes.SET_BREAK:
33 | return {
34 | ...blueprint,
35 | breakDuration: action.value,
36 | };
37 | default:
38 | return blueprint;
39 | }
40 | }
41 |
42 | export const BlueprintProvider = ({ children }) => {
43 | const [state, dispatch] = useReducer(reducer, {});
44 | return (
45 |
46 |
47 | {children}
48 |
49 |
50 | );
51 | };
52 |
53 | export const useBlueprint = () => useContext(BlueprintStateContext);
54 | export const useDispatchBlueprint = () => useContext(BlueprintDispatchContext);
55 |
56 | export const hours24 = [
57 | { name: "00", value: 0 },
58 | { name: "01", value: 1 },
59 | { name: "02", value: 2 },
60 | { name: "03", value: 3 },
61 | { name: "04", value: 4 },
62 | { name: "05", value: 5 },
63 | { name: "06", value: 6 },
64 | { name: "07", value: 7 },
65 | { name: "08", value: 8 },
66 | { name: "09", value: 9 },
67 | { name: "10", value: 10 },
68 | { name: "11", value: 11 },
69 | { name: "12", value: 12 },
70 | { name: "13", value: 13 },
71 | { name: "14", value: 14 },
72 | { name: "15", value: 15 },
73 | { name: "16", value: 16 },
74 | { name: "17", value: 17 },
75 | { name: "18", value: 18 },
76 | { name: "19", value: 19 },
77 | { name: "20", value: 20 },
78 | { name: "21", value: 21 },
79 | { name: "22", value: 22 },
80 | { name: "23", value: 23 },
81 | ];
82 |
83 | export const hours12 = [
84 | { name: "12 AM", value: 0 },
85 | { name: "1 AM", value: 1 },
86 | { name: "2 AM", value: 2 },
87 | { name: "3 AM", value: 3 },
88 | { name: "4 AM", value: 4 },
89 | { name: "5 AM", value: 5 },
90 | { name: "6 AM", value: 6 },
91 | { name: "7 AM", value: 7 },
92 | { name: "8 AM", value: 8 },
93 | { name: "9 AM", value: 9 },
94 | { name: "10 AM", value: 10 },
95 | { name: "11 AM", value: 11 },
96 | { name: "12 PM", value: 12 },
97 | { name: "1 PM", value: 13 },
98 | { name: "2 PM", value: 14 },
99 | { name: "3 PM", value: 15 },
100 | { name: "4 PM", value: 16 },
101 | { name: "5 PM", value: 17 },
102 | { name: "6 PM", value: 18 },
103 | { name: "7 PM", value: 19 },
104 | { name: "8 PM", value: 20 },
105 | { name: "9 PM", value: 21 },
106 | { name: "10 PM", value: 22 },
107 | { name: "11 PM", value: 23 },
108 | ];
109 |
110 | export const minutes = [
111 | { name: "00", value: 0 },
112 | { name: "15", value: 15 },
113 | { name: "30", value: 30 },
114 | { name: "45", value: 45 },
115 | ];
116 |
--------------------------------------------------------------------------------
/components/molecules/cards/AuthCard.js:
--------------------------------------------------------------------------------
1 | import InputCard from "./InputCard";
2 | import Header from "./Header";
3 | import { iconTypes } from "../../atoms/Icon";
4 | import TextInput, { textInputTypes } from "../../atoms/TextInput";
5 | import Button, { buttonTypes } from "../../atoms/Button";
6 | import { useState } from "react";
7 | import { useAuth, errorTypes } from "../../../firebase/Firebase";
8 | import { useRouter } from "next/router";
9 | import { ACTION_DELAYS } from "../../../utils/constants";
10 |
11 | export const authTypes = {
12 | signUp: "signUp",
13 | login: "login",
14 | };
15 |
16 | function AuthCard({ type }) {
17 | const [username, setUsername] = useState("");
18 | const [usernameError, setUsernameError] = useState(null);
19 | const [password, setPassword] = useState("");
20 | const [passwordError, setPasswordError] = useState(null);
21 | const [success, setSuccess] = useState(false);
22 | const { signUp, signIn } = useAuth();
23 | const router = useRouter();
24 |
25 | async function handleSubmit(e) {
26 | e.preventDefault();
27 | const action = type === authTypes.signUp ? signUp : signIn;
28 |
29 | const { user, error } = await action(username, password);
30 |
31 | if (user) {
32 | setSuccess(true);
33 |
34 | setTimeout(() => {
35 | router.push("/active");
36 | }, ACTION_DELAYS.long);
37 | } else {
38 | const { msg, type } = error;
39 |
40 | switch (type) {
41 | case errorTypes.username:
42 | setUsernameError(msg);
43 | break;
44 | case errorTypes.password:
45 | setPasswordError(msg);
46 | break;
47 | case errorTypes.unknown:
48 | default:
49 | setUsernameError(msg);
50 | setPasswordError(msg);
51 | break;
52 | }
53 | }
54 | }
55 |
56 | return (
57 |
58 |
62 |
63 |
109 |
110 | );
111 | }
112 |
113 | export default AuthCard;
114 |
--------------------------------------------------------------------------------
/components/atoms/Timer.js:
--------------------------------------------------------------------------------
1 | import React, { useState, useEffect } from "react";
2 | import PropTypes from "prop-types";
3 | import { intervalTypes } from "../atoms/Interval";
4 |
5 | const radius = 70;
6 | const FULL_ARC = 2 * Math.PI * radius;
7 |
8 | const units = {
9 | SECONDS: "SEC",
10 | MINUTES: "MIN",
11 | HOURS: "HRS",
12 | };
13 | function Timer({ type, timeLeft, duration }) {
14 | const [timeDisplay, setTimeDisplay] = useState(getTimeDisplay());
15 |
16 | function getTimeDisplay() {
17 | let number;
18 | let unit;
19 |
20 | if (timeLeft <= 60) {
21 | unit = units.SECONDS;
22 | number = timeLeft;
23 | } else if (timeLeft <= 3600) {
24 | unit = units.MINUTES;
25 | number = Math.ceil(timeLeft / 60);
26 | } else {
27 | unit = units.HOURS;
28 | number = Math.ceil(timeLeft / 3600);
29 | }
30 |
31 | return {
32 | number,
33 | unit,
34 | };
35 | }
36 |
37 | useEffect(() => {
38 | setTimeDisplay(getTimeDisplay());
39 | }, [timeLeft]);
40 |
41 | let ringColor = "";
42 | let primaryColor = "";
43 | let accentColor = "";
44 |
45 | switch (type) {
46 | case intervalTypes.starting:
47 | primaryColor = "stroke-gray-400";
48 | accentColor = "text-gray-600";
49 | ringColor = "stroke-gray-300";
50 | break;
51 | case intervalTypes.work:
52 | primaryColor = "stroke-primary-500";
53 | accentColor = "text-primary-600";
54 | ringColor = "stroke-primary-300";
55 | break;
56 | case intervalTypes.break:
57 | primaryColor = "stroke-primary-400";
58 | accentColor = "text-primary-600";
59 | ringColor = "stroke-primary-300";
60 | break;
61 | case intervalTypes.blocked:
62 | primaryColor = "stroke-blocked-500";
63 | accentColor = "text-blocked-600";
64 | ringColor = "stroke-blocked-300";
65 | break;
66 | case intervalTypes.floating:
67 | primaryColor = "stroke-blocked-400";
68 | accentColor = "text-blocked-600";
69 | ringColor = "stroke-blocked-300";
70 | break;
71 | default:
72 | break;
73 | }
74 |
75 | return (
76 |
77 |
83 |
103 |
104 |
107 | {timeDisplay.number}
108 |
109 |
112 | {timeDisplay.unit}
113 |
114 |
115 |
Need To Break
69 |
106 |
107 |
109 |
110 |
111 |
113 | setPage({ direction: DIRECTIONS.vertical })
114 | }
115 | >
116 |
125 |
128 |
129 |
130 |
132 |
133 | );
134 | }
135 |
136 | function renderGenericPage() {
137 | return (
138 | <>
139 |
82 |
83 |
88 |
89 |
90 |
{
97 | setUsername(value);
98 | setUsernameError(null);
99 | }}
100 | errorLabel={usernameError}
101 | hasSuccess={success}
102 | >
103 | Your username
104 |
105 |
106 |
{
113 | setPassword(value);
114 | setPasswordError(null);
115 | }}
116 | errorLabel={passwordError}
117 | hasSuccess={success}
118 | >
119 | Your Password
120 |
121 |
122 |
123 | handleSubmit(authTypes.signUp)}
127 | >
128 | Sign Up
129 |
130 | handleSubmit(authTypes.login)}
134 | >
135 | Login
136 |
137 |
138 |
140 |
141 | );
142 | }
143 |
144 | AuthModal.propTypes = {
145 | isOpen: PropTypes.bool,
146 | setIsOpen: PropTypes.func,
147 | };
148 |
149 | export default AuthModal;
150 |
--------------------------------------------------------------------------------
/utils/timelineUtil.js:
--------------------------------------------------------------------------------
1 | import { intervalTypes } from "../components/atoms/Interval";
2 | import { SCALES } from "./constants";
3 | import { parseStartTime, timestampToString } from "./timeUtil";
4 | import { setStoredLocalStorage } from "./localStorageUtil";
5 | import { useSettings } from "../context/Settings";
6 | import { get12HourTime } from "./timeUtil";
7 |
8 | function generateScales(intervals, totalDuration) {
9 | const scaleMap = {};
10 |
11 | const scales = SCALES.filter((scale) => totalDuration % scale.value === 0);
12 |
13 | const smallestScale = scales[0].value;
14 | const numberOfBlocks = totalDuration / smallestScale;
15 |
16 | const timeLabels = [];
17 |
18 | for (let i = 0; i <= numberOfBlocks; i++) {
19 | const timestamp = intervals[0].timestamp + i * smallestScale * 1000;
20 |
21 | timeLabels.push(timestampToString(timestamp));
22 | }
23 |
24 | for (const scale of scales) {
25 | scaleMap[scale.value] = timeLabels.filter(
26 | (timeLabel, i) => i % (scale.value / smallestScale) === 0,
27 | );
28 | }
29 |
30 | return [scales, scaleMap];
31 | }
32 |
33 | export function blueprintToStored(blueprint) {
34 | const { workDuration, breakDuration, startTime, duration, startWith } =
35 | blueprint;
36 |
37 | const intervals = [];
38 | let totalDuration = 0;
39 | let i = 0;
40 |
41 | do {
42 | let type;
43 | if (i === 0) {
44 | // use the startWith if exists or default to work
45 | type = startWith || intervalTypes.work;
46 | } else {
47 | type =
48 | intervals[i - 1].type === intervalTypes.work
49 | ? intervalTypes.break
50 | : intervalTypes.work;
51 | }
52 |
53 | const intervalDuration =
54 | type === intervalTypes.work ? workDuration : breakDuration;
55 | totalDuration += intervalDuration;
56 |
57 | const overflow = totalDuration - duration;
58 | let normalizedDuration = intervalDuration;
59 |
60 | if (overflow > 0) {
61 | normalizedDuration -= overflow;
62 | }
63 |
64 | intervals.push({
65 | type,
66 | duration: normalizedDuration,
67 | });
68 |
69 | i++;
70 | } while (totalDuration < duration);
71 |
72 | return {
73 | intervals,
74 | startTime,
75 | // we need these only when restarting
76 | workDuration,
77 | breakDuration,
78 | };
79 | }
80 |
81 | export function storedToTimeline(stored) {
82 | const { intervals, startTime, workDuration, breakDuration } = stored;
83 |
84 | const parsedStartTime =
85 | typeof startTime === "string" ? parseStartTime(startTime) : startTime;
86 |
87 | let totalDuration = 0;
88 |
89 | for (let i = 0; i < intervals.length; i++) {
90 | let timestamp;
91 |
92 | if (i === 0) {
93 | timestamp = parsedStartTime;
94 | } else {
95 | timestamp = intervals[i - 1].timestamp + intervals[i - 1].duration * 1000;
96 | }
97 |
98 | const startLabel = timestampToString(timestamp);
99 | const endLabel = timestampToString(
100 | timestamp + intervals[i].duration * 1000,
101 | );
102 |
103 | intervals[i].timestamp = timestamp;
104 | intervals[i].startLabel = startLabel;
105 | intervals[i].endLabel = endLabel;
106 |
107 | totalDuration += intervals[i].duration;
108 | }
109 |
110 | const [scales, scaleMap] = generateScales(intervals, totalDuration);
111 |
112 | return {
113 | intervals,
114 | scales,
115 | scaleMap,
116 | startTime: parsedStartTime,
117 | duration: totalDuration,
118 | // we need these only when restarting
119 | workDuration,
120 | breakDuration,
121 | };
122 | }
123 |
124 | export function blueprintToTimeline(blueprint) {
125 | const stored = blueprintToStored(blueprint);
126 | const timeline = storedToTimeline(stored);
127 |
128 | return timeline;
129 | }
130 |
131 | export function startTimeline(blueprint) {
132 | const stored = blueprintToStored(blueprint);
133 | setStoredLocalStorage(stored);
134 | }
135 |
136 | export function getDetails(blueprint) {
137 | const { use12Hour } = useSettings();
138 |
139 | const type =
140 | typeof blueprint.startTime === "number" ? "Flexible" : "Full Time";
141 |
142 | const startTime = isNaN(blueprint.startTime)
143 | ? parseStartTime(blueprint.startTime)
144 | : blueprint.startTime;
145 | const endTime = startTime + blueprint.duration * 1000;
146 |
147 | let duration;
148 | if (use12Hour) {
149 | const [startHour, startMin, startSuffix] = get12HourTime(
150 | timestampToString(startTime),
151 | );
152 | const [endHour, endMin, endSuffix] = get12HourTime(
153 | timestampToString(endTime),
154 | );
155 | duration = `${startHour}:${startMin} ${startSuffix} to ${endHour}:${endMin} ${endSuffix}`;
156 | } else {
157 | duration = `${timestampToString(startTime)} to ${timestampToString(
158 | endTime,
159 | )}`;
160 | }
161 |
162 | return {
163 | type,
164 | workDuration: blueprint.workDuration / 60,
165 | breakDuration: blueprint.breakDuration / 60,
166 | duration,
167 | };
168 | }
169 |
--------------------------------------------------------------------------------
/components/molecules/cards/SavePresetModal.js:
--------------------------------------------------------------------------------
1 | import PropTypes from "prop-types";
2 | import InputCard from "./InputCard";
3 | import Header from "./Header";
4 | import { iconTypes } from "../../atoms/Icon";
5 | import TextInput, { textInputTypes } from "../../atoms/TextInput";
6 | import Button, { buttonTypes } from "../../atoms/Button";
7 | import Label, { labelTypes } from "../../atoms/Label";
8 | import Modal from "../Modal";
9 | import { useDB } from "../../../firebase/Firebase";
10 | import { useState } from "react";
11 | import { getDetails } from "../../../utils/timelineUtil";
12 | import { ACTION_DELAYS } from "../../../utils/constants";
13 | import { useFetchPresets } from "../../../context/Presets";
14 | import { useRouter } from "next/router";
15 |
16 | function SavePresetModal({ isOpen, setIsOpen, blueprint }) {
17 | const { savePreset } = useDB();
18 | const fetchPresets = useFetchPresets();
19 | const [name, setName] = useState("");
20 | const [nameError, setNameError] = useState("");
21 | const [success, setSuccess] = useState(false);
22 | const router = useRouter();
23 |
24 | function handleClose(refetch) {
25 | setName("");
26 | setNameError("");
27 | setSuccess(false);
28 | setIsOpen(false);
29 |
30 | if (refetch) {
31 | fetchPresets();
32 | }
33 |
34 | router.push("/presets");
35 | }
36 |
37 | async function handleSave(e) {
38 | e.preventDefault();
39 |
40 | if (!name) {
41 | return setNameError("Name is required");
42 | }
43 |
44 | if (blueprint) {
45 | const preset = {
46 | ...blueprint,
47 | name,
48 | };
49 |
50 | if (typeof preset.startTime === "number") {
51 | // remove timestamp for flexible timeline
52 | delete preset.startTime;
53 | }
54 |
55 | const error = await savePreset(preset);
56 |
57 | if (!error) {
58 | // success
59 | setSuccess(true);
60 |
61 | setTimeout(() => {
62 | handleClose(true);
63 | }, ACTION_DELAYS.short);
64 | }
65 | }
66 | }
67 |
68 | const details = getDetails(blueprint);
69 |
70 | return (
71 |
72 |
73 |
78 |
79 |
148 |
149 |
150 | );
151 | }
152 |
153 | SavePresetModal.propTypes = {
154 | isOpen: PropTypes.bool,
155 | setIsOpen: PropTypes.func,
156 | };
157 |
158 | export default SavePresetModal;
159 |
--------------------------------------------------------------------------------
/components/molecules/Preset.js:
--------------------------------------------------------------------------------
1 | import React, { useEffect, useState } from "react";
2 | import PropTypes from "prop-types";
3 | import ViewMoreLess from "../atoms/ViewMoreLess";
4 | import Timeline from "./Timeline";
5 | import Label, { labelTypes } from "../atoms/Label";
6 | import Button, { buttonTypes } from "../atoms/Button";
7 | import Icon, { iconTypes } from "../atoms/Icon";
8 | import DeletePresetModal from "./cards/DeletePresetModal";
9 | import { blueprintToTimeline, startTimeline } from "../../utils/timelineUtil";
10 | import { parseStartTime } from "../../utils/timeUtil";
11 | import { useRouter } from "next/router";
12 | import { getDetails } from "../../utils/timelineUtil";
13 | import { useAuth } from "../../firebase/Firebase";
14 | import TimelineHasEndedModal from "./cards/TimelineHasEndedModal";
15 |
16 | function Preset({ preset }) {
17 | const [deleteModalIsOpen, setDeleteModalIsOpen] = useState(false);
18 | const [endedModalIsOpen, setEndedModalIsOpen] = useState(false);
19 | const [viewMore, setViewMore] = useState(false);
20 | const [timeline, setTimeline] = useState();
21 | const router = useRouter();
22 | const { user } = useAuth();
23 |
24 | useEffect(() => {
25 | setTimeline(blueprintToTimeline(preset));
26 | }, []);
27 |
28 | function handleStart() {
29 | if (preset && user) {
30 | const startTime = parseStartTime(preset.startTime);
31 | const endTime = startTime + preset.duration * 1000;
32 |
33 | if (Date.now() <= endTime) {
34 | startTimeline(preset);
35 | router.push("/timeline");
36 | } else {
37 | setEndedModalIsOpen(true);
38 | }
39 | }
40 | }
41 |
42 | const details = getDetails(preset);
43 |
44 | return timeline ? (
45 |
46 | {/* Icon & Name */}
47 |
48 |
50 | {preset.name}
51 |
52 |
53 |
54 | {/* Info List */}
55 |
90 |
91 | {/* Timeline & Buttons (Able To Reverse Flex Order) */}
92 |
93 |
94 |
95 | Start
96 |
97 | setDeleteModalIsOpen(true)}
99 | type={buttonTypes.outline}
100 | >
101 | Delete
102 |
103 |
104 |
105 | {/* Timeline Block */}
106 |
setViewMore(!viewMore)}
112 | >
113 |
114 |
116 |
117 |
133 | ) : null;
134 | }
135 |
136 | Preset.propTypes = {
137 | name: PropTypes.string,
138 | };
139 |
140 | export default Preset;
141 |
--------------------------------------------------------------------------------
/components/molecules/cards/TimeInput.js:
--------------------------------------------------------------------------------
1 | import { useReducer, useEffect, useState } from "react";
2 | import PropTypes from "prop-types";
3 | import Label, { labelTypes } from "../../atoms/Label";
4 | import SelectInput from "../../atoms/SelectInput";
5 | import {
6 | useDispatchBlueprint,
7 | blueprintActions,
8 | hours24,
9 | hours12,
10 | minutes,
11 | } from "../../../context/Blueprint";
12 | import { parseTime } from "../../../utils/timeUtil";
13 | import { useSettings } from "../../../context/Settings";
14 |
15 | const actionTypes = {
16 | SET_START_HOUR: "SET_START_HOUR",
17 | SET_END_HOUR: "SET_END_HOUR",
18 | SET_START_MIN: "SET_START_MIN",
19 | SET_END_MIN: "SET_END_MIN",
20 | };
21 |
22 | const initialState = {
23 | startHour: hours24[0].value,
24 | startMin: minutes[0].value,
25 | endHour: hours24[0].value,
26 | endMin: minutes[0].value,
27 | };
28 |
29 | function TimeInput({ paddingStyle, disableFocus }) {
30 | const [{ startHour, startMin, endHour, endMin }, dispatch] = useReducer(
31 | reducer,
32 | initialState,
33 | );
34 | const [hours, setHours] = useState(hours24);
35 | const [widthStyle, setWidthStyle] = useState();
36 | const blueprintDispatch = useDispatchBlueprint();
37 |
38 | const { use12Hour } = useSettings();
39 |
40 | useEffect(() => {
41 | blueprintDispatch({
42 | type: blueprintActions.SET_START,
43 | value: parseTime([startHour, startMin]),
44 | });
45 | }, [startHour, startMin]);
46 |
47 | useEffect(() => {
48 | const startDate = new Date();
49 | startDate.setHours(startHour);
50 | startDate.setMinutes(startMin);
51 |
52 | const endDate = new Date();
53 | endDate.setHours(endHour);
54 | endDate.setMinutes(endMin);
55 |
56 | // Math rouund is very important because sometimes it would return weird decimal numbers which will evaluate to true and crash the page
57 | const duration = Math.round((endDate - startDate) / 1000);
58 |
59 | if (duration <= 0) {
60 | dispatch({ type: actionTypes.SET_END_HOUR, value: startHour });
61 | }
62 |
63 | blueprintDispatch({ type: blueprintActions.SET_DURATION, value: duration });
64 | }, [startHour, startMin, endHour, endMin]);
65 |
66 | useEffect(() => {
67 | if (use12Hour) {
68 | setHours(hours12);
69 | setWidthStyle("w-80 420:w-96");
70 | } else {
71 | setHours(hours24);
72 | setWidthStyle("w-64 420:w-72");
73 | }
74 | }, [use12Hour]);
75 |
76 | return (
77 |
78 | {/* From */}
79 |
80 |
81 | From
82 |
83 |
84 |
91 | dispatch({ type: actionTypes.SET_START_HOUR, value })
92 | }
93 | />
94 | :
95 |
102 | dispatch({ type: actionTypes.SET_START_MIN, value })
103 | }
104 | />
105 |
106 |
107 |
108 | {/* To */}
109 |
110 |
111 | To
112 |
113 |
114 |
121 | dispatch({ type: actionTypes.SET_END_HOUR, value })
122 | }
123 | />
124 | :
125 |
132 | dispatch({ type: actionTypes.SET_END_MIN, value })
133 | }
134 | />
135 |
136 |
137 |
77 | {bigLabel}
78 |
79 | ) : null;
80 |
81 | const renderSmallLabel = smallLabel ? (
82 |
88 | {smallLabel}
89 |
90 | ) : null;
91 |
92 | return (
93 |
94 | {renderBigLabel}
95 | {renderSmallLabel}
96 |
97 | handleClick(types.minus, step, min, max)}
99 | type={types.minus}
100 | />
101 | handleClick(types.plus, step, min, max)}
112 | type={types.plus}
113 | />
114 |
115 |
151 |
153 | );
154 | }
155 |
156 | Button.propTypes = {
157 | type: PropTypes.string,
158 | handleClick: PropTypes.func,
159 | };
160 |
161 | function Icon({ type }) {
162 | switch (type) {
163 | case types.plus:
164 | return (
165 |
171 |
180 | );
181 | case types.minus:
182 | return (
183 |
189 |
196 | );
197 | default:
198 | return null;
199 | }
200 | }
201 |
202 | Icon.propTypes = {
203 | type: PropTypes.string,
204 | };
205 |
206 | export default NumberInput;
207 |
--------------------------------------------------------------------------------
/firebase/Firebase.js:
--------------------------------------------------------------------------------
1 | import { initializeApp, getApps, getApp } from "firebase/app";
2 | import {
3 | getAuth,
4 | onAuthStateChanged,
5 | createUserWithEmailAndPassword,
6 | signInWithEmailAndPassword,
7 | signOut as signOutFirebase,
8 | } from "firebase/auth";
9 | import {
10 | addDoc,
11 | collection,
12 | getDocs,
13 | deleteDoc,
14 | doc,
15 | getFirestore,
16 | } from "firebase/firestore";
17 | import { useEffect, useState } from "react";
18 |
19 | const firebaseConfig = {
20 | apiKey: process.env.NEXT_PUBLIC_FIREBASE_API_KEY,
21 | authDomain: process.env.NEXT_PUBLIC_FIREBASE_AUTH_DOMAIN,
22 | projectId: process.env.NEXT_PUBLIC_FIREBASE_PROJECT_ID,
23 | storageBucket: process.env.NEXT_PUBLIC_FIREBASE_STORAGE_BUCKET,
24 | messagingSenderId: process.env.NEXT_PUBLIC_FIREBASE_MESSAGING_SENDER_ID,
25 | appId: process.env.NEXT_PUBLIC_FIREBASE_APP_ID,
26 | };
27 |
28 | export const errorTypes = {
29 | password: "password",
30 | username: "username",
31 | unknown: "unknown",
32 | };
33 |
34 | const errorMap = {
35 | "auth/user-not-found": {
36 | msg: "User not found",
37 | type: errorTypes.username,
38 | },
39 | "auth/email-already-in-use": {
40 | msg: "Username has already been used",
41 | type: errorTypes.username,
42 | },
43 | "auth/invalid-email": {
44 | msg: "Invalid username",
45 | type: errorTypes.username,
46 | },
47 | "auth/missing-email": {
48 | msg: "Missing username",
49 | type: errorTypes.username,
50 | },
51 | "auth/too-many-requests": {
52 | msg: "Account locked: too many login attempts",
53 | type: errorTypes.username,
54 | },
55 | "auth/wrong-password": {
56 | msg: "Incorrect password",
57 | type: errorTypes.password,
58 | },
59 | "auth/weak-password": {
60 | msg: "Should be at least 6 characters",
61 | type: errorTypes.password,
62 | },
63 | };
64 |
65 | function getErrorMessage(code) {
66 | return (
67 | errorMap[code] || {
68 | msg: "There was an error",
69 | type: errorTypes.unknown,
70 | }
71 | );
72 | }
73 |
74 | function getAppInstance() {
75 | // initialize the app only once
76 | return !getApps().length ? initializeApp(firebaseConfig) : getApp();
77 | }
78 |
79 | function getAuthInstance() {
80 | const app = getAppInstance();
81 | return getAuth(app);
82 | }
83 |
84 | function getDBInstance() {
85 | const app = getAppInstance();
86 | return getFirestore(app);
87 | }
88 |
89 | export function useDB() {
90 | async function savePreset(preset) {
91 | try {
92 | const userId = getAuth().currentUser.uid;
93 | await addDoc(
94 | collection(getDBInstance(), `users/${userId}/presets`),
95 | preset,
96 | );
97 | } catch (error) {
98 | console.error(error);
99 | return error;
100 | }
101 | }
102 |
103 | async function getPresets() {
104 | try {
105 | const userId = getAuth().currentUser.uid;
106 | const querySnapshot = await getDocs(
107 | collection(getDBInstance(), `users/${userId}/presets`),
108 | );
109 | const presets = querySnapshot.docs.map((doc) => {
110 | return {
111 | id: doc.id,
112 | ...doc.data(),
113 | };
114 | });
115 |
116 | return {
117 | presets,
118 | };
119 | } catch (error) {
120 | console.error(error);
121 | return {
122 | error,
123 | };
124 | }
125 | }
126 |
127 | async function deletePreset(id) {
128 | try {
129 | const userId = getAuth().currentUser.uid;
130 | await deleteDoc(doc(getDBInstance(), `users/${userId}/presets`, id));
131 | } catch (error) {
132 | console.error(error);
133 | return error;
134 | }
135 | }
136 |
137 | return {
138 | savePreset,
139 | deletePreset,
140 | getPresets,
141 | };
142 | }
143 |
144 | export function useAuth() {
145 | const [user, setUser] = useState();
146 | const [userLoading, setUserLoading] = useState(true);
147 |
148 | useEffect(() => {
149 | const unsubscribe = onAuthStateChanged(getAuthInstance(), (user) => {
150 | setUser(user || null);
151 |
152 | setUserLoading(false);
153 | });
154 |
155 | return unsubscribe;
156 | }, []);
157 |
158 | async function signUp(username, password) {
159 | setUserLoading(true);
160 |
161 | try {
162 | const result = await createUserWithEmailAndPassword(
163 | getAuthInstance(),
164 | `${username}@needtobreak.com`,
165 | password,
166 | );
167 |
168 | return {
169 | user: result.user,
170 | };
171 | } catch (error) {
172 | console.error(error);
173 |
174 | return {
175 | error: getErrorMessage(error.code),
176 | };
177 | }
178 | }
179 |
180 | async function signIn(username, password) {
181 | setUserLoading(true);
182 |
183 | try {
184 | const result = await signInWithEmailAndPassword(
185 | getAuthInstance(),
186 | `${username}@needtobreak.com`,
187 | password,
188 | );
189 |
190 | return {
191 | user: result.user,
192 | };
193 | } catch (error) {
194 | console.error(error);
195 |
196 | return {
197 | error: getErrorMessage(error.code),
198 | };
199 | }
200 | }
201 |
202 | async function signOut() {
203 | try {
204 | await signOutFirebase(getAuthInstance());
205 | } catch (error) {
206 | console.error(error);
207 | return error;
208 | }
209 | }
210 |
211 | return {
212 | user,
213 | userLoading,
214 | signUp,
215 | signIn,
216 | signOut,
217 | };
218 | }
219 |
--------------------------------------------------------------------------------
/components/molecules/TimelinePreview.js:
--------------------------------------------------------------------------------
1 | import React, { useEffect, useState } from "react";
2 | import PropTypes from "prop-types";
3 | import ViewMoreLess from "../atoms/ViewMoreLess";
4 | import Timeline from "./Timeline";
5 | import Label, { labelTypes } from "../atoms/Label";
6 | import Button, { buttonTypes } from "../atoms/Button";
7 | import Icon, { iconTypes } from "../atoms/Icon";
8 | import SavePresetModal from "../molecules/cards/SavePresetModal";
9 | import TimelineHasEndedModal from "./cards/TimelineHasEndedModal";
10 | import { useBlueprint } from "../../context/Blueprint";
11 | import { blueprintToTimeline, startTimeline } from "../../utils/timelineUtil";
12 | import { parseStartTime } from "../../utils/timeUtil";
13 | import { useRouter } from "next/router";
14 | import useIsomorphicLayoutEffect from "../../utils/useIsomorphicLayoutEffect";
15 | import AuthModal from "./cards/AuthModal";
16 | import { useAuth } from "../../firebase/Firebase";
17 | function TimelinePreview({ hasFloating }) {
18 | const [saveModalIsOpen, setSaveModalIsOpen] = useState(false);
19 | const [authModalIsOpen, setAuthModalIsOpen] = useState(false);
20 | const [endedModalIsOpen, setEndedModalIsOpen] = useState(false);
21 | const blueprint = useBlueprint();
22 | const [timeline, setTimeline] = useState();
23 | const [viewMore, setViewMore] = useState(false);
24 | const router = useRouter();
25 | const { user } = useAuth();
26 |
27 | useIsomorphicLayoutEffect(() => {
28 | if (blueprint.duration) {
29 | const timeline = blueprintToTimeline(blueprint);
30 | setTimeline(timeline);
31 | } else {
32 | setTimeline(null);
33 | }
34 | }, [blueprint]);
35 |
36 | function handleStart() {
37 | if (blueprint) {
38 | const startTime = parseStartTime(blueprint.startTime);
39 | const endTime = startTime + blueprint.duration * 1000;
40 |
41 | if (Date.now() <= endTime) {
42 | startTimeline(blueprint);
43 | router.reload();
44 | } else {
45 | setEndedModalIsOpen(true);
46 | }
47 | }
48 | }
49 |
50 | function handleSave() {
51 | if (user) {
52 | setSaveModalIsOpen(true);
53 | } else {
54 | setAuthModalIsOpen(true);
55 | }
56 | }
57 |
58 | const floatingStyle = hasFloating ? "932:grid-cols-2" : "";
59 |
60 | return timeline ? (
61 |
62 |
65 | {/* Timeline Preview Block */}
66 | {/*
67 |
68 |
70 |
71 |
72 | Timeline Preview
73 |
74 |
75 | A visual representation of your timeline. You can either generate
76 | it now or save it as a preset for later.
77 |
78 |
79 |
*/}
80 |
81 | {/* Floating Time Block (If Any)*/}
82 | {hasFloating ? (
83 |
84 |
85 |
87 |
88 |
89 | Floating Time
90 |
91 |
92 | We have filled the empty blocks around your blocked time with
93 | floating time. This is unmanaged time and it’s up to you to
94 | decide how you spend it.
95 |
96 |
97 |
98 | ) : null}
99 |
102 |
103 |
104 | Start
105 |
106 |
107 | Save
108 |
109 |
110 |
111 | {/* Timeline Block */}
112 |
setViewMore(!viewMore)}
118 | >
119 |
120 |
122 |
123 |
141 | ) : null;
142 | }
143 |
144 | TimelinePreview.propTypes = {
145 | hasFloating: PropTypes.bool,
146 | };
147 |
148 | export default TimelinePreview;
149 |
--------------------------------------------------------------------------------
/components/molecules/cards/Carousel.js:
--------------------------------------------------------------------------------
1 | import PropTypes from "prop-types";
2 | import React, { useState } from "react";
3 | import ActionButton, { actionButtonTypes } from "../../atoms/ActionButton";
4 | import Arrow, { arrowTypes } from "../../atoms/Arrow";
5 | import { v4 as uuidv4 } from "uuid";
6 |
7 | function generateInitialPages(numOfPages) {
8 | const pages = [];
9 |
10 | for (let i = 0; i < numOfPages; i++) {
11 | pages.push({ id: uuidv4() });
12 | }
13 |
14 | return pages;
15 | }
16 |
17 | function Carousel({ initialPages, renderItem, infinite, pageLimit }) {
18 | const [pages, setPages] = useState(generateInitialPages(initialPages));
19 | const [currentPage, setCurrentPage] = useState(0);
20 |
21 | const handleArrowClick = (type) => {
22 | if (type === arrowTypes.right) {
23 | if (currentPage === pages.length - 1) {
24 | if (infinite) {
25 | setCurrentPage(0);
26 | }
27 | } else {
28 | setCurrentPage(currentPage + 1);
29 | }
30 | } else {
31 | if (currentPage === 0) {
32 | if (infinite) {
33 | setCurrentPage(pages.length - 1);
34 | }
35 | } else {
36 | setCurrentPage(currentPage - 1);
37 | }
38 | }
39 | };
40 |
41 | const handleActionClick = (type) => {
42 | if (type === actionButtonTypes.add) {
43 | if (pageLimit && pageLimit === pages.length) {
44 | return;
45 | } else {
46 | setPages([...pages, { id: uuidv4() }]);
47 | setCurrentPage(pages.length);
48 | }
49 | } else {
50 | if (pages.length > 1) {
51 | setPages(pages.filter((page, index) => index !== currentPage));
52 |
53 | if (currentPage === 0) {
54 | } else {
55 | setCurrentPage(currentPage - 1);
56 | }
57 | }
58 | }
59 | };
60 |
61 | const handlePageClick = (id) => {
62 | setCurrentPage(pages.findIndex((page) => page.id === id));
63 | };
64 |
65 | return (
66 |
67 | {/* Body */}
68 |
69 |
75 |
76 | {/* Placeholder Item */}
77 |
{renderItem(true)}
78 |
79 | {/* Items */}
80 |
86 | {pages.map((page) => {
87 | const disableFocus =
88 | pages.findIndex((item) => item.id === page.id) !== currentPage;
89 |
90 | return {renderItem(disableFocus)} ;
91 | })}
92 |
93 |
94 |
95 | {/* Pagination */}
96 |
101 |
102 | {/* Buttons */}
103 |
113 |
127 | {pages.map((page, index) => {
128 | const baseStyle =
129 | "appearance-none block w-6 420:w-8 h-6 420:h-8 rounded-4";
130 | const bgStyle =
131 | currentPage === index ? "bg-primary-500" : "bg-gray-400";
132 |
133 | return (
134 |
135 | handleClick(page.id)}
139 | />
140 |
141 | );
142 | })}
143 |
144 | );
145 | }
146 |
147 | Pagination.propTypes = {
148 | pages: PropTypes.array,
149 | handleClick: PropTypes.func,
150 | currentPage: PropTypes.number,
151 | };
152 |
153 | function Navigation({ handleClick, currentPage, totalPages, infinite }) {
154 | const hideLeft = currentPage === 0 && !infinite;
155 | const hideRight = currentPage === totalPages - 1 && !infinite;
156 |
157 | return (
158 | <>
159 | {!hideLeft ? (
160 | handleClick(type)}
191 | >
192 |
194 | );
195 | }
196 |
197 | ArrowButton.propTypes = {
198 | type: PropTypes.string,
199 | handleClick: PropTypes.func,
200 | };
201 |
202 | export default Carousel;
203 |
--------------------------------------------------------------------------------
/components/molecules/NavBar.js:
--------------------------------------------------------------------------------
1 | import React, { useState } from "react";
2 | import PropTypes from "prop-types";
3 | import Tab, { tabTypes } from "../atoms/Tab";
4 | import SettingsModal from "./cards/SettingsModal";
5 | import LogoutModal from "./cards/LogoutModal";
6 |
7 | const forTypes = {
8 | desktop: "desktop",
9 | mobile: "mobile",
10 | };
11 |
12 | const types = {
13 | settings: "settings",
14 | logout: "logout",
15 | };
16 |
17 | function NavBar({ tabs, active, handlePageChange }) {
18 | const [settingsIsOpen, setSettingsIsOpen] = useState(false);
19 | const [logoutIsOpen, setLogoutIsOpen] = useState(false);
20 |
21 | return (
22 |
23 | setLogoutIsOpen(true)}
25 | forType={forTypes.desktop}
26 | type={types.logout}
27 | />
28 |
31 | setLogoutIsOpen(true)}
33 | forType={forTypes.mobile}
34 | type={types.logout}
35 | />
36 | {tabs.map((tab, index) => (
37 |
46 | {tab.name}
47 |
48 | ))}
49 | setSettingsIsOpen(true)}
51 | forType={forTypes.mobile}
52 | type={types.settings}
53 | />
54 |
55 | setSettingsIsOpen(true)}
57 | forType={forTypes.desktop}
58 | type={types.settings}
59 | />
60 |
61 |
65 | );
66 | }
67 |
68 | function NavButton({ invisible, forType, handleClick, type }) {
69 | let forStyle = "";
70 |
71 | switch (forType) {
72 | case forTypes.desktop:
73 | forStyle = "hidden 732:block group outline-none";
74 | break;
75 | case forTypes.mobile:
76 | forStyle = "block 732:hidden";
77 | break;
78 | default:
79 | forStyle = "block";
80 | break;
81 | }
82 |
83 | let icon;
84 | switch (type) {
85 | case types.settings:
86 | icon =
99 | {icon}
100 |
101 | );
102 | }
103 |
104 | function SettingsIcon() {
105 | return (
106 |
112 |
119 | );
120 | }
121 |
122 | function LogoutIcon() {
123 | return (
124 |
130 |
137 | );
138 | }
139 |
140 | NavButton.propTypes = {
141 | type: PropTypes.string,
142 | invisible: PropTypes.bool,
143 | handleClick: PropTypes.func,
144 | };
145 |
146 | export default NavBar;
147 |
--------------------------------------------------------------------------------
/components/atoms/SelectInput.js:
--------------------------------------------------------------------------------
1 | import React, { useEffect, useRef, useState } from "react";
2 | import PropTypes from "prop-types";
3 | import SelectItem from "./SelectItem";
4 | import Label, { labelTypes } from "./Label";
5 |
6 | function Icon({ active, hasSuccess }) {
7 | const wrapperStyle = active ? "rotate-180" : "";
8 |
9 | let iconStyle;
10 |
11 | if (active) {
12 | iconStyle = "fill-primary-500";
13 | } else if (hasSuccess) {
14 | iconStyle = "fill-support-success";
15 | } else {
16 | iconStyle = "fill-gray-400";
17 | }
18 |
19 | return (
20 |
21 |
27 |
34 |
35 | );
36 | }
37 |
38 | Icon.propTypes = {
39 | active: PropTypes.bool,
40 | };
41 |
42 | function SelectInput({
43 | name,
44 | options,
45 | bigLabel,
46 | smallLabel,
47 | centerBig,
48 | centerSmall,
49 | widthStyle,
50 | disableFocus,
51 | selected,
52 | handleSelect,
53 | hasSuccess,
54 | }) {
55 | const [active, setActive] = useState(false);
56 | // manage the focused item by index
57 | const [focused, setFocused] = useState(0);
58 | const [sortedOptions, setSortedOptions] = useState(options);
59 | const ref = useRef(null);
60 |
61 | useEffect(() => {
62 | setSortedOptions(options);
63 | }, [options]);
64 |
65 | useEffect(() => {
66 | const selectedIndex = options.findIndex(
67 | (option) => option.value === selected,
68 | );
69 | const firstHalf = options.slice(0, selectedIndex);
70 | const secondHalf = options.slice(selectedIndex + 1);
71 |
72 | setSortedOptions([...secondHalf, ...firstHalf]);
73 | }, [selected]);
74 |
75 | useEffect(() => {
76 | if (active) {
77 | // detect outside click when dropdown is open
78 | document.addEventListener("click", () => {
79 | exitMenu(true);
80 | });
81 | }
82 | }, [active]);
83 |
84 | function handleMenuKeyPress(e) {
85 | if (e.key === "Enter") {
86 | setActive(true);
87 | }
88 | }
89 |
90 | function exitMenu(blur = false) {
91 | setFocused(0);
92 | setActive(false);
93 |
94 | if (ref && ref.current) {
95 | if (blur) {
96 | ref.current.blur();
97 | } else {
98 | ref.current.focus();
99 | }
100 | }
101 | }
102 |
103 | function handleItemKeyDown(e, value) {
104 | let newFocusedIndex;
105 |
106 | switch (e.key) {
107 | case "ArrowDown":
108 | newFocusedIndex =
109 | focused + 1 === sortedOptions.length - 1 ? 0 : focused + 1;
110 | setFocused(newFocusedIndex);
111 | break;
112 | case "ArrowUp":
113 | newFocusedIndex =
114 | focused - 1 === -1 ? sortedOptions.length - 2 : focused - 1;
115 | setFocused(newFocusedIndex);
116 | break;
117 | case "Escape":
118 | case "Tab":
119 | exitMenu();
120 | break;
121 | case "Enter":
122 | handleSelect(
123 | sortedOptions.find((option) => option.value === value).value,
124 | );
125 | exitMenu();
126 | default:
127 | break;
128 | }
129 | }
130 |
131 | function handleItemClick(value) {
132 | handleSelect(sortedOptions.find((option) => option.value === value).value);
133 | exitMenu(true);
134 | }
135 |
136 | function getRootItemStyle(active, hasSuccess) {
137 | const baseStyle =
138 | "group relative p-8 border-2 focus:outline-none focus:border-primary-500 hover:border-primary-500";
139 | const activeStyle = active ? "rounded-t-6" : "rounded-6";
140 |
141 | let colorStyle = "";
142 |
143 | if (active) {
144 | colorStyle = "border-primary-500";
145 | } else if (hasSuccess) {
146 | colorStyle = "border-support-success";
147 | } else {
148 | colorStyle = "border-gray-400";
149 | }
150 |
151 | return `${baseStyle} ${activeStyle} ${colorStyle}`;
152 | }
153 |
154 | const renderBigLabel = bigLabel ? (
155 |
161 | {bigLabel}
162 |
163 | ) : null;
164 |
165 | const renderSmallLabel = smallLabel ? (
166 |
172 | {smallLabel}
173 |
174 | ) : null;
175 |
176 | return (
177 |
178 | {renderBigLabel}
179 | {renderSmallLabel}
180 |
e.stopPropagation()}
183 | className={`text-left select-none cursor-default ${widthStyle} font-base font-reg text-13 420:text-16 text-gray-600`}
184 | >
185 | (active ? exitMenu(true) : setActive(true))}
189 | onKeyDown={handleMenuKeyPress}
190 | className={getRootItemStyle(active, hasSuccess)}
191 | >
192 | {options.find((option) => option.value === selected).name}
193 |
195 |
196 | {active ? (
197 |
198 |
199 | {sortedOptions.map((option, index) => (
200 |
207 | {option.name}
208 |
209 | ))}
210 |
211 |
212 | ) : null}
213 |
214 |
38 |
40 | );
41 |
42 | const mobileTimeline = (
43 |
44 |
46 | );
47 |
48 | return isMobile === null ? (
49 | // return both on server side to avoid flickering
50 | <>
51 | {regularTimeline}
52 | {mobileTimeline}
53 |
54 | ) : isMobile === false ? (
55 | regularTimeline
56 | ) : (
57 | mobileTimeline
58 | );
59 | }
60 |
61 | const RegularTimeline = ({
62 | scaleMap,
63 | scales,
64 | intervals,
65 | scale,
66 | setScale,
67 | hours,
68 | setHours,
69 | progress,
70 | }) => {
71 | const timelineRef = useRef();
72 | const [scroll, setScroll] = useState(0);
73 | const [scrollTarget, setScrollTarget] = useState({
74 | value: null,
75 | smooth: null,
76 | });
77 |
78 | // Listen for scroll event
79 | useIsomorphicLayoutEffect(() => {
80 | const timeline = timelineRef.current;
81 |
82 | if (timeline) {
83 | const { clientWidth, scrollWidth } = timeline;
84 | const scrollableWidth = scrollWidth - clientWidth;
85 |
86 | const handleScroll = (e) => {
87 | const currentScroll = e.target.scrollLeft / scrollableWidth;
88 |
89 | if (scrollTarget.value === currentScroll) {
90 | setScrollTarget({ value: null, smooth: null });
91 | }
92 |
93 | setScroll(currentScroll);
94 | };
95 |
96 | timeline.addEventListener("scroll", handleScroll);
97 |
98 | return () => timeline.removeEventListener("scroll", handleScroll);
99 | }
100 | }, [timelineRef, scrollTarget.value]);
101 |
102 | // Programatically scroll to a certain scroll target
103 | useIsomorphicLayoutEffect(() => {
104 | if (scrollTarget.value !== null && scrollTarget.smooth !== null) {
105 | scrollTo(scrollTarget);
106 | }
107 | }, [scrollTarget.value, scrollTarget.smooth]);
108 |
109 | const scrollTo = ({ value, smooth }) => {
110 | const timeline = timelineRef.current;
111 |
112 | if (timeline) {
113 | const { clientWidth, scrollWidth } = timeline;
114 | const scrollableWidth = scrollWidth - clientWidth;
115 |
116 | timeline.scrollTo({
117 | left: value * scrollableWidth,
118 | behavior: smooth ? "smooth" : "auto",
119 | });
120 | }
121 | };
122 |
123 | const handleScaleChange = (newScale) => {
124 | if (newScale !== scale) {
125 | setScrollTarget({
126 | value: scroll,
127 | smooth: false,
128 | });
129 | setScale(newScale);
130 | setHours(scaleMap[newScale]);
131 | }
132 | };
133 |
134 | return (
135 |
136 |
timelineRef.current.focus()}
141 | >
142 |
149 |
155 |
156 |
157 | {intervals.map((interval, index) => (
158 |
167 |
168 |
169 | {hours.map((hour) => (
170 | {hour}
171 | ))}
172 |
173 |
174 |
175 |
176 |
181 |
204 |
209 |
215 |
221 |
222 |
223 | {intervals.map((interval, index) => (
224 |
233 |
234 |
235 | {hours.map((hour) => (
236 | {hour}
237 | ))}
238 |
239 |
240 |
258 |
259 | {hour}:{min}
260 |
261 |
262 | {suffix}
263 |
264 |
265 | );
266 | } else {
267 | item = children;
268 | }
269 |
270 | return {item} ;
271 | }
272 | function Arrow({ type, progress, isMobile }) {
273 | let colorStyle = "";
274 |
275 | switch (type) {
276 | case intervalTypes.work:
277 | case intervalTypes.break:
278 | colorStyle = "fill-primary-500";
279 | break;
280 | case intervalTypes.blocked:
281 | case intervalTypes.floating:
282 | colorStyle = "fill-blocked-500";
283 | break;
284 | default:
285 | break;
286 | }
287 |
288 | const visibleStyle = progress >= 0 ? "visible" : "invisible";
289 |
290 | return isMobile ? (
291 |
307 | ) : (
308 |
322 | );
323 | }
324 |
325 | Arrow.propTypes = {
326 | type: PropTypes.string,
327 | progress: PropTypes.number,
328 | };
329 |
330 | function Pages({ pages, currentPage, handlePageChange }) {
331 | return (
332 |
333 | {pages.map((page, index) => (
334 | handlePageChange(page.value)}
342 | >
343 | {page.name}
344 |
345 | ))}
346 |
347 | );
348 | }
349 |
350 | function Pagination({ scales, currentScale, handleScaleChange }) {
351 | return (
352 |
359 | );
360 | }
361 |
362 | export default Timeline;
363 |
--------------------------------------------------------------------------------
/components/molecules/MainTimeline.js:
--------------------------------------------------------------------------------
1 | import { useState, useEffect } from "react";
2 | import ViewMoreLess from "../atoms/ViewMoreLess";
3 | import Timer from "../atoms/Timer";
4 | import Timeline from "./Timeline";
5 | import Label, { labelTypes } from "../atoms/Label";
6 | import RadioButton from "../atoms/RadioButton";
7 | import Button, { buttonDelay, buttonTypes } from "../atoms/Button";
8 | import { intervalTypes } from "../atoms/Interval";
9 | import { blueprintToStored, storedToTimeline } from "../../utils/timelineUtil";
10 | import {
11 | getStartingLocalStorage,
12 | getStoredLocalStorage,
13 | removeStartingLocalStorage,
14 | removeStoredLocalStorage,
15 | setStartingLocalStorage,
16 | setStoredLocalStorage,
17 | } from "../../utils/localStorageUtil";
18 | import { timestampToString, get12HourTime } from "../../utils/timeUtil";
19 | import { useSettings } from "../../context/Settings";
20 | import { SCALES } from "../../utils/constants";
21 | import cloneDeep from "lodash.clonedeep";
22 | import EnableNotificationsModal from "./cards/EnableNotificationsModal";
23 | import { useNotifications } from "../../utils/notificationUtil";
24 | import { useAuth } from "../../firebase/Firebase";
25 | import TimelineCreator from "./TimelineCreator";
26 | import useIsomorphicLayoutEffect from "../../utils/useIsomorphicLayoutEffect";
27 | import isBrowser from "../../utils/isBrowser";
28 |
29 | function MainTimeline() {
30 | const [timeline, setTimeline] = useState();
31 | const [activeInterval, setActiveInterval] = useState();
32 | const [timeLeft, setTimeLeft] = useState();
33 | const [progress, setProgress] = useState();
34 | const [restartType, setRestartType] = useState(intervalTypes.work);
35 | const [modalIsOpen, setModalIsOpen] = useState(false);
36 | const [audio, setAudio] = useState(null);
37 | const [viewMoreTimeline, setViewMoreTimeline] = useState(false);
38 | const [viewMoreRestart, setViewMoreRestart] = useState(false);
39 | const { use12Hour, useSmartRestart } = useSettings();
40 | const allowNotifications = useNotifications();
41 |
42 | function tick(now) {
43 | // get timer time left
44 | const endTimestamp =
45 | activeInterval.timestamp + activeInterval.duration * 1000;
46 | setTimeLeft(Math.round((endTimestamp - now) / 1000));
47 |
48 | // get timeline progress
49 | const timelineProgress =
50 | (Math.round((now - timeline.startTime) / 1000) / timeline.duration) * 100;
51 | setProgress(timelineProgress);
52 | }
53 |
54 | function createStartingTimer(firstTimestamp) {
55 | const now = Date.now();
56 | let timestamp = getStartingLocalStorage();
57 |
58 | if (!timestamp) {
59 | timestamp = now;
60 | setStartingLocalStorage(timestamp);
61 | }
62 |
63 | const type = intervalTypes.starting;
64 | const durationMs = firstTimestamp - timestamp;
65 | const durationSec = Math.round(durationMs / 1000);
66 | const startLabel = timestampToString(timestamp);
67 | const endLabel = timestampToString(timestamp + durationMs);
68 |
69 | return {
70 | type,
71 | duration: durationSec,
72 | timestamp,
73 | startLabel,
74 | endLabel,
75 | };
76 | }
77 |
78 | function startTimeline() {
79 | const stored = getStoredLocalStorage();
80 |
81 | if (stored) {
82 | const timeline = storedToTimeline(stored);
83 | setTimeline(timeline);
84 |
85 | if (Date.now() < timeline.startTime) {
86 | // timeline hasn't started yet
87 | setActiveInterval(createStartingTimer(timeline.startTime));
88 | } else {
89 | const nextIntervalIndex = timeline.intervals.findIndex(
90 | (interval) => interval.timestamp > Date.now()
91 | );
92 | setActiveInterval(timeline.intervals[nextIntervalIndex - 1]);
93 | }
94 | }
95 | }
96 |
97 | useIsomorphicLayoutEffect(() => {
98 | startTimeline();
99 | }, []);
100 |
101 | useEffect(() => {
102 | if (activeInterval && timeline) {
103 | const worker = new Worker(
104 | new URL("../../utils/workerInterval.js", import.meta.url)
105 | );
106 |
107 | // start the interval
108 | worker.postMessage({ delay: 1000 });
109 |
110 | // call the tick fn with Date.now() from the worker
111 | worker.onmessage = ({ data }) => tick(data);
112 |
113 | return () => {
114 | // end worker
115 | worker.postMessage({ clear: true });
116 | removeStartingLocalStorage();
117 | };
118 | }
119 | }, [activeInterval, timeline]);
120 |
121 | useEffect(() => {
122 | if (timeLeft <= 3 && !audio) {
123 | const audio = new Audio("sounds/timer.wav");
124 | audio.autoplay = true;
125 | setAudio(audio);
126 | }
127 |
128 | if (timeLeft <= 0) {
129 | setAudio(null);
130 | const oldIndex = timeline.intervals.indexOf(activeInterval);
131 |
132 | let nextInterval;
133 |
134 | // if timeline has ended next interval will be null
135 | if (oldIndex + 1 === timeline.intervals.length) {
136 | nextInterval = null;
137 | } else {
138 | nextInterval = timeline.intervals[oldIndex + 1];
139 | }
140 |
141 | setActiveInterval(nextInterval);
142 |
143 | if (allowNotifications) {
144 | showNotificationOnIntervalEnd(nextInterval);
145 | }
146 | }
147 | }, [timeLeft]);
148 |
149 | useEffect(() => {
150 | if (allowNotifications === null) {
151 | setTimeout(() => {
152 | setModalIsOpen(true);
153 | }, 3000);
154 | }
155 | }, [allowNotifications]);
156 |
157 | function showNotificationOnIntervalEnd(nextInterval) {
158 | if (!nextInterval) {
159 | new Notification("Timeline Has Ended!");
160 | } else {
161 | const title =
162 | nextInterval.type === intervalTypes.work ? "Work Time!" : "Break Time!";
163 | const minutes = nextInterval.duration / 60;
164 | const body = `${minutes} min`;
165 |
166 | new Notification(title, { body: body });
167 | }
168 | }
169 |
170 | function handleRestartChange(e) {
171 | setRestartType(e.target.value);
172 | }
173 |
174 | function handleStop() {
175 | removeStoredLocalStorage();
176 | removeStartingLocalStorage();
177 | setTimeline(null);
178 | }
179 |
180 | function handleRestart(e) {
181 | e.preventDefault();
182 |
183 | setViewMoreRestart(false);
184 |
185 | let closestBlock;
186 | const now = Date.now();
187 |
188 | if (useSmartRestart) {
189 | // 5 min
190 | const blockSize = SCALES[0].value;
191 | const numberOfBlocks = timeline.duration / blockSize;
192 | const blockStartTimes = [];
193 | let nearestBlocks;
194 |
195 | for (let i = 0; i <= numberOfBlocks; i++) {
196 | const blockStart = timeline.startTime + i * blockSize * 1000;
197 |
198 | blockStartTimes.push(blockStart);
199 |
200 | if (blockStart >= now) {
201 | // return the last two blocks
202 | nearestBlocks = blockStartTimes.slice(-2);
203 | break;
204 | } else {
205 | // TODO: Handle restarting at the last interval
206 | nearestBlocks = [];
207 | }
208 | }
209 |
210 | const [leftBlock, rightBlock] = nearestBlocks;
211 | const timeToLeftBlock = Math.abs(now - leftBlock);
212 | const timeToRightBlock = Math.abs(now - rightBlock);
213 | closestBlock =
214 | timeToLeftBlock < timeToRightBlock ? leftBlock : rightBlock;
215 | }
216 |
217 | const { workDuration, breakDuration } = timeline;
218 | let intervalEnd;
219 | let startBlock = restartType;
220 |
221 | if (useSmartRestart) {
222 | if (activeInterval.type === restartType) {
223 | const intervalDuration =
224 | restartType === intervalTypes.work ? workDuration : breakDuration;
225 | intervalEnd = closestBlock + intervalDuration * 1000;
226 | // invert start block
227 | startBlock =
228 | restartType === intervalTypes.work
229 | ? intervalTypes.break
230 | : intervalTypes.work;
231 | } else {
232 | intervalEnd = closestBlock;
233 | }
234 | } else {
235 | intervalEnd = now;
236 | }
237 |
238 | // copy the current intervals so they can be mutated without affecting the timeline
239 | const intervalsCopy = cloneDeep(timeline.intervals);
240 | const activeIntervalIndex = intervalsCopy.findIndex(
241 | (interval) => interval.timestamp === activeInterval.timestamp
242 | );
243 |
244 | // end the current interval now for instant restart or end it at the closest block
245 | intervalsCopy[activeIntervalIndex].duration = Math.round(
246 | (intervalEnd - activeInterval.timestamp) / 1000
247 | );
248 |
249 | // remove all elements after the current interval and remove startLabel, endLabel and timestamp
250 | const prevIntervals = intervalsCopy
251 | .filter((interval, i) => i <= activeIntervalIndex)
252 | .map((interval) => ({
253 | type: interval.type,
254 | duration: interval.duration,
255 | }));
256 |
257 | // find the remaining duration of the timeline
258 | const timelineEnd = timeline.startTime + timeline.duration * 1000;
259 | const remainingDuration = Math.round((timelineEnd - intervalEnd) / 1000);
260 |
261 | // generate the new part of the timeline
262 | const nextIntervals = blueprintToStored({
263 | startTime: intervalEnd,
264 | duration: remainingDuration,
265 | workDuration,
266 | breakDuration,
267 | startWith: startBlock,
268 | }).intervals;
269 |
270 | const newStored = {
271 | intervals: [...prevIntervals, ...nextIntervals],
272 | startTime: timeline.startTime,
273 | workDuration,
274 | breakDuration,
275 | };
276 |
277 | // tigger a timeline restart
278 | setStoredLocalStorage(newStored);
279 | startTimeline();
280 | }
281 |
282 | const readyToShow = activeInterval && timeline && timeLeft >= 0;
283 | let timeLabel;
284 |
285 | if (activeInterval) {
286 | let startTime;
287 | let endTime;
288 |
289 | if (use12Hour) {
290 | const [startHour, startMin, startSuffix] = get12HourTime(
291 | activeInterval.startLabel
292 | );
293 | const [endHour, endMin, endSuffix] = get12HourTime(
294 | activeInterval.endLabel
295 | );
296 |
297 | startTime = `${startHour}:${startMin} ${startSuffix}`;
298 | endTime = `${endHour}:${endMin} ${endSuffix}`;
299 | } else {
300 | startTime = activeInterval.startLabel;
301 | endTime = activeInterval.endLabel;
302 | }
303 |
304 | timeLabel =
305 | activeInterval.type === intervalTypes.starting
306 | ? endTime
307 | : `${startTime} - ${endTime}`;
308 | }
309 |
310 | function renderNoTimeline() {
311 | if (isBrowser) {
312 | const stored = getStoredLocalStorage();
313 |
314 | if (!stored) {
315 | return
324 |
328 |
329 | {/* Restart Block */}
330 |
376 |
377 | {/* Timer Block */}
378 |
379 |
380 | {activeInterval.type}
381 |
382 |
{timeLabel}
383 |
384 |
385 |
386 |
392 |
393 | {/* Timeline Block */}
394 |
setViewMoreTimeline(!viewMoreTimeline)}
400 | >
401 |
402 |
404 |
405 |
406 | Stop Timeline
407 |
408 |
409 |
410 |
91 |
99 | );
100 | }
101 |
102 | export default Icon;
103 |
--------------------------------------------------------------------------------