diff --git a/src/App/index.ts b/src/App/index.ts index d1402f7..713869c 100644 --- a/src/App/index.ts +++ b/src/App/index.ts @@ -1,2 +1 @@ -import App from "./App"; -export { App }; +export { App } from "./App"; diff --git a/src/components/Header/Header.tsx b/src/components/Header/Header.tsx new file mode 100644 index 0000000..2504f2b --- /dev/null +++ b/src/components/Header/Header.tsx @@ -0,0 +1,36 @@ +import React from "react"; +import { FC, ReactElement } from "react"; +import { Button } from "react-bootstrap"; +import { ToggleSidebar } from "../Sidebar"; +import "./header.scss"; + +/** + * Header Component + * @param {string} title - Page Title + * @param {ToggleSidebar} toggleSidebar - Toggle Sidebar Function + * @returns Header Component + */ + +export interface HeaderProps { + title: string; + toggleSidebar: ToggleSidebar; +} + +export const Header: FC = ({ + title, + toggleSidebar, +}): ReactElement => { + return ( +
+

{title}

+ +
+ ); +}; diff --git a/src/components/Header/header.scss b/src/components/Header/header.scss new file mode 100644 index 0000000..fe73e20 --- /dev/null +++ b/src/components/Header/header.scss @@ -0,0 +1,16 @@ +header.header { + display: flex; + align-items: center; + justify-content: space-between; + + .sidebar__button_toggle { + border-radius: 50%; + padding-right: 6px; + padding-left: 6px; + + i { + display: inline-block; + width: 1.5rem; + } + } +} diff --git a/src/components/Header/index.ts b/src/components/Header/index.ts new file mode 100644 index 0000000..7b4bf13 --- /dev/null +++ b/src/components/Header/index.ts @@ -0,0 +1,2 @@ +export { Header } from "./Header"; +export type { HeaderProps } from "./Header"; diff --git a/src/components/Sidebar/Sidebar.tsx b/src/components/Sidebar/Sidebar.tsx new file mode 100644 index 0000000..d14ee6b --- /dev/null +++ b/src/components/Sidebar/Sidebar.tsx @@ -0,0 +1,47 @@ +import React from "react"; +import { FC, ReactElement } from "react"; +import { Offcanvas } from "react-bootstrap"; +import { END } from "../../strings"; + +export const SIDEBAR_HEADER = "About the App"; +export const SIDEBAR_BODY = "This is a simple app to help you keep track of your logs. Highly customizable logs allow you to track anything you want!"; +export const SIDEBAR_DATA_HEADER = "Data Usage"; +export const SIDEBAR_DATA_BODY_1 = "This app uses local storage to store your logs, no data is sent to a server. Your data is never sold to anyone, EVER." +export const SIDEBAR_DATA_BODY_2 = "If you want to delete your personal data, just delete the Log / Entry. To completely clear the App data, clear your browser's local storage via the browser inspector tools."; + +/** + * Sidebar Component + * @param {boolean} showSidebar - Show Sidebar + * @param {ToggleSidebar} toggleSidebar - Toggle Sidebar Function + * @returns {ReactElement} Sidebar Component + */ + +export type ToggleSidebar = React.Dispatch>; + +export interface SidebarProps { + showSidebar: boolean; + toggleSidebar: ToggleSidebar; +} + +export const Sidebar: FC = ({ + showSidebar, + toggleSidebar, +}): ReactElement => { + return ( + toggleSidebar(false)} + placement={END} + > + + {SIDEBAR_HEADER} + + +

{SIDEBAR_BODY}

+

{SIDEBAR_DATA_HEADER}

+

{SIDEBAR_DATA_BODY_1}

+

{SIDEBAR_DATA_BODY_2}

+ + + ); +}; diff --git a/src/components/Sidebar/index.ts b/src/components/Sidebar/index.ts new file mode 100644 index 0000000..ec46d13 --- /dev/null +++ b/src/components/Sidebar/index.ts @@ -0,0 +1,2 @@ +export { Sidebar } from "./Sidebar"; +export type { SidebarProps, ToggleSidebar } from "./Sidebar"; diff --git a/src/containers/Edit/Edit.tsx b/src/containers/Edit/Edit.tsx index 2b6ab52..22960b5 100644 --- a/src/containers/Edit/Edit.tsx +++ b/src/containers/Edit/Edit.tsx @@ -16,6 +16,8 @@ import { LogNameForm } from "../../components/LogNameForm"; import { EditFieldsTable } from "../../components/EditFieldsTable/EditFieldsTable"; import { EditFieldForm } from "../../components/EditFieldForm"; import { EditLabelForm } from "../../components/EditLabelForm"; +import { Sidebar } from "../../components/Sidebar"; +import { Header } from "../../components/Header"; import { ADD, ADD_ENTRY, @@ -69,7 +71,7 @@ export const Edit: FC = (): ReactElement => { if (!log || id !== log.id || !log.fields) { navigate("/"); } - + const [showSidebar, setShowSidebar] = React.useState(false); const [showModal, setShowModal] = React.useState(fid ? true : false); const [modalMode, setModalMode] = React.useState( fid && fid !== NEW ? EDIT : ADD @@ -105,10 +107,14 @@ export const Edit: FC = (): ReactElement => { return ( <> -

- {EDIT_HEADER} - {log.name} -

+ + +
+ + { /> + + ); }; diff --git a/src/containers/Home/Home.tsx b/src/containers/Home/Home.tsx index ea9c604..7e47137 100644 --- a/src/containers/Home/Home.tsx +++ b/src/containers/Home/Home.tsx @@ -8,6 +8,9 @@ import { Link, useNavigate } from "react-router-dom"; import { removeLog, useGetLogsArray } from "../../store/Log"; import { v4 as uuidv4 } from "uuid"; +import { Sidebar} from "../../components/Sidebar"; +import { Header } from "../../components/Header"; + import store from "../../store/store"; import { addLog } from "../../store/Log"; import { @@ -45,6 +48,7 @@ export const onAddLog = (id: string, name: string) => { export const Home: FC = (): ReactElement => { const navigate = useNavigate(); const isNewLogModalOpen = window.location.hash === "#/new"; + const [showSidebar, setShowSidebar] = React.useState(false); const [showModal, setShowModal] = React.useState(isNewLogModalOpen); const [newLogId, setNewLogId] = React.useState(EMPTY); const [newLogName, setNewLogName] = React.useState(EMPTY); @@ -60,9 +64,15 @@ export const Home: FC = (): ReactElement => { return ( + + + +
+ + + -

{TRACKER_KEEPER}

{YOUR_LOGS}

@@ -193,6 +203,11 @@ export const Home: FC = (): ReactElement => { + + ); }; diff --git a/src/containers/Log/Log.tsx b/src/containers/Log/Log.tsx index b7c442a..3d6b73e 100644 --- a/src/containers/Log/Log.tsx +++ b/src/containers/Log/Log.tsx @@ -9,6 +9,10 @@ import { Dropdown, } from "react-bootstrap"; import { useNavigate, useParams } from "react-router-dom"; + +import { Sidebar} from "../../components/Sidebar"; +import { Header } from "../../components/Header"; + import store from "../../store/store"; import { useGetLog, @@ -45,6 +49,7 @@ export const onDeleteEntry = (log: LogType, entryId: string) => { export const Log: FC = (): ReactElement => { const navigate = useNavigate(); const { id } = useParams() as { id: string }; + const [showSidebar, setShowSidebar] = React.useState(false); const log: LogType = useGetLog(id); const { name, fields, labelOption } = log; const entries: LogEntry[] = Object.values(log.entries || {}); @@ -55,7 +60,7 @@ export const Log: FC = (): ReactElement => { -

{name}

+
@@ -180,6 +185,11 @@ export const Log: FC = (): ReactElement => { + + ); }; diff --git a/src/containers/LogEntry/LogEntry.tsx b/src/containers/LogEntry/LogEntry.tsx index 8037316..c6ad362 100644 --- a/src/containers/LogEntry/LogEntry.tsx +++ b/src/containers/LogEntry/LogEntry.tsx @@ -16,7 +16,9 @@ import { } from "../../store/Log"; import { Formik } from "formik"; import store from "../../store/store"; -import FieldText from "../../components/FieldText/FieldText"; +import { Sidebar} from "../../components/Sidebar"; +import { Header } from "../../components/Header"; +import {FieldText} from "../../components/FieldText"; import { FieldNumber } from "../../components/FieldNumber"; import { FieldDate } from "../../components/FieldDate"; import { FieldBoolean } from "../../components/FieldBoolean"; @@ -77,6 +79,7 @@ export const LogEntry: FC = (): ReactElement | null => { const navigate = useNavigate(); const log: Log = useGetLog(logId); const entry: LogEntryType = useGetLogEntry(logId, entryId); + const [showSidebar, setShowSidebar] = React.useState(false); const [cancel, setCancel] = React.useState(false); const [isNewEntry] = React.useState( typeof entryId === UNDEFINED || typeof entry === UNDEFINED @@ -110,10 +113,10 @@ export const LogEntry: FC = (): ReactElement | null => { -

- {name} - {ENTRY_HEADER} -

+
@@ -191,6 +194,10 @@ export const LogEntry: FC = (): ReactElement | null => { ); }} + ); diff --git a/src/strings.ts b/src/strings.ts index f7761fa..b338f4c 100644 --- a/src/strings.ts +++ b/src/strings.ts @@ -35,6 +35,7 @@ export const STEP = "step"; export const COMMA = ","; export const COMMA_SPACE = ", "; export const ADD = "add"; +export const END = "end"; // Display Strings export const HOME = "Home";