From 1048baa991785a93c31bfd45f2f8828b756820ad Mon Sep 17 00:00:00 2001 From: AccessiT3ch Date: Tue, 1 Nov 2022 13:36:55 -0700 Subject: [PATCH 1/6] Fix weird App import error --- src/App/index.ts | 3 +-- 1 file changed, 1 insertion(+), 2 deletions(-) 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"; From dfca2b9f2f4eb4d67e698c011830722f9f151036 Mon Sep 17 00:00:00 2001 From: AccessiT3ch Date: Tue, 1 Nov 2022 13:38:53 -0700 Subject: [PATCH 2/6] Init Sidebar Component --- src/components/Sidebar/Sidebar.tsx | 39 ++++++++++++++++++++++++++++++ src/components/Sidebar/index.ts | 2 ++ src/strings.ts | 1 + 3 files changed, 42 insertions(+) create mode 100644 src/components/Sidebar/Sidebar.tsx create mode 100644 src/components/Sidebar/index.ts diff --git a/src/components/Sidebar/Sidebar.tsx b/src/components/Sidebar/Sidebar.tsx new file mode 100644 index 0000000..ef7763c --- /dev/null +++ b/src/components/Sidebar/Sidebar.tsx @@ -0,0 +1,39 @@ +import React from "react"; +import { FC, ReactElement } from "react"; +import { Offcanvas } from "react-bootstrap"; +import { END } from "../../strings"; + +/** + * 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} + > + + Offcanvas + + + Some text as placeholder. In real life you can have the elements you + have chosen. Like, text, images, lists, etc. + + + ); +}; 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/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"; From d0d5a8f32fd35a438c95c44cf033f52f14f65a71 Mon Sep 17 00:00:00 2001 From: AccessiT3ch Date: Tue, 1 Nov 2022 13:40:14 -0700 Subject: [PATCH 3/6] Create Basic Header Component --- src/components/Header/Header.tsx | 35 +++++++++++++++++++++++++++++++ src/components/Header/header.scss | 16 ++++++++++++++ src/components/Header/index.ts | 2 ++ 3 files changed, 53 insertions(+) create mode 100644 src/components/Header/Header.tsx create mode 100644 src/components/Header/header.scss create mode 100644 src/components/Header/index.ts diff --git a/src/components/Header/Header.tsx b/src/components/Header/Header.tsx new file mode 100644 index 0000000..a147df9 --- /dev/null +++ b/src/components/Header/Header.tsx @@ -0,0 +1,35 @@ +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"; From 37b52e27cd906f529d40759fb12223514c49aa02 Mon Sep 17 00:00:00 2001 From: AccessiT3ch Date: Tue, 1 Nov 2022 13:40:33 -0700 Subject: [PATCH 4/6] Add Header and Sidebar components to Home --- src/containers/Home/Home.tsx | 17 ++++++++++++++++- 1 file changed, 16 insertions(+), 1 deletion(-) 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 => { + + ); }; From 3363d32cf9c36b29ceccd353994789a117aaa865 Mon Sep 17 00:00:00 2001 From: AccessiT3ch Date: Tue, 1 Nov 2022 14:09:52 -0700 Subject: [PATCH 5/6] Add Header and Sidebar to Containers --- src/containers/Edit/Edit.tsx | 21 ++++++++++++++++----- src/containers/Log/Log.tsx | 12 +++++++++++- src/containers/LogEntry/LogEntry.tsx | 17 ++++++++++++----- 3 files changed, 39 insertions(+), 11 deletions(-) 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/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 => { ); }} + ); From c586fe4c51b4f207fb25a29a885334126e949ad8 Mon Sep 17 00:00:00 2001 From: AccessiT3ch Date: Tue, 1 Nov 2022 14:25:56 -0700 Subject: [PATCH 6/6] Add copy to Sidebar --- src/components/Header/Header.tsx | 3 ++- src/components/Sidebar/Sidebar.tsx | 14 +++++++++++--- 2 files changed, 13 insertions(+), 4 deletions(-) diff --git a/src/components/Header/Header.tsx b/src/components/Header/Header.tsx index a147df9..2504f2b 100644 --- a/src/components/Header/Header.tsx +++ b/src/components/Header/Header.tsx @@ -27,8 +27,9 @@ export const Header: FC = ({ className="sidebar__button_toggle" variant="outline-secondary" onClick={() => toggleSidebar(true)} + title="About the App" > - i + i
); diff --git a/src/components/Sidebar/Sidebar.tsx b/src/components/Sidebar/Sidebar.tsx index ef7763c..d14ee6b 100644 --- a/src/components/Sidebar/Sidebar.tsx +++ b/src/components/Sidebar/Sidebar.tsx @@ -3,6 +3,12 @@ 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 @@ -28,11 +34,13 @@ export const Sidebar: FC = ({ placement={END} > - Offcanvas + {SIDEBAR_HEADER} - Some text as placeholder. In real life you can have the elements you - have chosen. Like, text, images, lists, etc. +

{SIDEBAR_BODY}

+

{SIDEBAR_DATA_HEADER}

+

{SIDEBAR_DATA_BODY_1}

+

{SIDEBAR_DATA_BODY_2}

 );