diff --git a/frontend/src/App.tsx b/frontend/src/App.tsx index 43203e2..c1a9ff5 100644 --- a/frontend/src/App.tsx +++ b/frontend/src/App.tsx @@ -7,7 +7,7 @@ import { Api } from './api' import './scss/app.scss' const App = () => { - const api = new Api({ mock: true, baseURL: '/api' }) + const api = new Api({ baseURL: '/api' }) return ( diff --git a/frontend/src/api/index.ts b/frontend/src/api/index.ts index ab68718..2645d7f 100644 --- a/frontend/src/api/index.ts +++ b/frontend/src/api/index.ts @@ -39,7 +39,7 @@ export class Api { return jwt } - const { data } = await this.axios.post(`/api/dj-rest-auth/login/`, { + const { data } = await this.axios.post(`/dj-rest-auth/login/`, { name, password, }) diff --git a/frontend/src/app/CoreLayout.tsx b/frontend/src/app/CoreLayout.tsx index 2ff94b1..e627a8f 100644 --- a/frontend/src/app/CoreLayout.tsx +++ b/frontend/src/app/CoreLayout.tsx @@ -6,6 +6,8 @@ import { UserForm } from './components/UserForm' import { TransactionList } from './components/TransactionList' import { AccountForm } from './components/AccountForm' import { Login } from './components/Login' +import { AppHeader } from './layout/AppHeader' +import { AppFooter } from './layout/AppFooter' export const CoreLayout = () => { const { user, selectedAccount } = useUserContext() @@ -14,13 +16,13 @@ export const CoreLayout = () => { return (
- + @@ -30,14 +32,8 @@ export const CoreLayout = () => { + {/* {showingModal && } */} - -
-

User: {user?.name}

-

|

-

Budget: {selectedAccount?.name}

-

|

-
) } diff --git a/frontend/src/app/layout/AppFooter/index.tsx b/frontend/src/app/layout/AppFooter/index.tsx new file mode 100644 index 0000000..ee2e386 --- /dev/null +++ b/frontend/src/app/layout/AppFooter/index.tsx @@ -0,0 +1,16 @@ +import { useUserContext } from '../../../contexts/UserContext' + +import './style.scss' + +export const AppFooter = () => { + const { user, selectedAccount } = useUserContext() + + return ( +
+

User: {user?.name}

+

|

+

Budget: {selectedAccount?.name}

+

|

+
+ ) +} diff --git a/frontend/src/app/layout/AppFooter/style.scss b/frontend/src/app/layout/AppFooter/style.scss new file mode 100644 index 0000000..a682e6a --- /dev/null +++ b/frontend/src/app/layout/AppFooter/style.scss @@ -0,0 +1,16 @@ +.stax-footer { + position: fixed; + left: 0; + bottom: 0; + width: 100%; + background: #111a; + padding: 0 2ch; + font-size: 10pt; + + display: flex; + flex-direction: row; + + p { + margin: 1ch; + } +} diff --git a/frontend/src/app/layout/AppHeader.tsx b/frontend/src/app/layout/AppHeader/index.tsx similarity index 66% rename from frontend/src/app/layout/AppHeader.tsx rename to frontend/src/app/layout/AppHeader/index.tsx index 6ffb1ec..30a7705 100644 --- a/frontend/src/app/layout/AppHeader.tsx +++ b/frontend/src/app/layout/AppHeader/index.tsx @@ -1,41 +1,38 @@ +import { ReactNode } from 'react' import { Avatar, Button, Dropdown, Menu } from 'antd' import { Header } from 'antd/lib/layout/layout' -import { User } from '../../types' import { Link, useHistory } from 'react-router-dom' -import { useUserContext } from '../../contexts/UserContext' +import { useUserContext } from '../../../contexts/UserContext' -export type NavRoute = { - path: string - component: any - label: string - exact?: boolean -} +import './style.scss' type Props = { - user: User | null + children: ReactNode } -export const AppHeader = ({ user }: Props) => { - const { handleLogout } = useUserContext() +export const AppHeader = ({ children }: Props) => { + const { user, handleLogout } = useUserContext() const history = useHistory() + // Unauthed Header if (!user) return ( -
-

MVP Django React! 🤠

+
+

CashStacks! 💵

) // Authed Header return ( -
+
-

MVP Django React! 🤠

+

MVP Django React! 🤠

+ {children}
- + {/* */}

Welcome, {user.name}!!

@@ -54,6 +51,6 @@ export const AppHeader = ({ user }: Props) => { {user.name[0]}
-
+ ) } diff --git a/frontend/src/app/layout/AppHeader/style.scss b/frontend/src/app/layout/AppHeader/style.scss new file mode 100644 index 0000000..a019060 --- /dev/null +++ b/frontend/src/app/layout/AppHeader/style.scss @@ -0,0 +1,11 @@ +.stax-header { + display: flex; + flex-direction: row; + width: 100%; + justify-content: space-around; + background: #111a; + + h1 { + margin: 0; + } +} diff --git a/frontend/src/index.css b/frontend/src/index.css index dd1e29b..3b03b7f 100644 --- a/frontend/src/index.css +++ b/frontend/src/index.css @@ -14,10 +14,12 @@ grid-column: 1/1; grid-row: 1/1; } + .col2 { grid-column: 2/2; grid-row: 1/1; } + .col3 { grid-column: 3/3; grid-row: 1/1; diff --git a/frontend/src/scss/app.scss b/frontend/src/scss/app.scss index ae0beba..bd0f2e9 100644 --- a/frontend/src/scss/app.scss +++ b/frontend/src/scss/app.scss @@ -14,30 +14,6 @@ button { cursor: pointer; - padding: 2ch; - background: #aaa; - border: 0; - border-radius: 1ch; - - &:hover { - background: #fff; - } - - &:active { - background: #222; - } - transition: all 0.1s ease-out; -} - -a { - color: #61dafb; -} - -.error { - font-size: 1ch; - color: red; - padding: 0; - margin: 0; } .funds, @@ -47,15 +23,6 @@ a { // height: 50vh; } -nav { - padding-top: 2ch; - padding-bottom: 2ch; - width: 100%; - display: flex; - justify-content: space-around; - background: #111a; -} - .totals { z-index: 9; .above { @@ -65,51 +32,3 @@ nav { margin-bottom: 5ch; } } - -.todo { - color: #111a; -} - -.dank-form { - display: flex; - flex-direction: column; - background: #1115; - border: 1ch #1117 solid; - padding: 3ch; - border-radius: 1ch; - label { - margin: 0.5ch; - display: flex; - flex-direction: row; - justify-content: space-between; - - input { - margin-left: 2ch; - } - } - - h3 { - color: #666; - } - - button { - margin: 4ch 1ch; - } -} - -footer { - position: fixed; - left: 0; - bottom: 0; - width: 100%; - background: #111a; - padding: 0 2ch; - font-size: 10pt; - - display: flex; - flex-direction: row; - - p { - margin: 1ch; - } -} diff --git a/node_modules/.package-lock.json b/node_modules/.package-lock.json index 22cef49..7c186ff 100644 --- a/node_modules/.package-lock.json +++ b/node_modules/.package-lock.json @@ -1,13 +1,6 @@ { - "name": "mvp-django-react", + "name": "cash-stacks", "lockfileVersion": 2, "requires": true, - "packages": { - "node_modules/@dank-inc/data-buddy": { - "version": "0.1.3", - "resolved": "https://registry.npmjs.org/@dank-inc/data-buddy/-/data-buddy-0.1.3.tgz", - "integrity": "sha512-GreH0gs1Wf/8thCt53FrzX0ngMuIhrTBZJWa6tlqLIST4EgKgJN6IPei1o7bOqKPFmLIMS/DG6o1b/QAC57oXw==", - "license": "MIT" - } - } + "packages": {} } diff --git a/node_modules/@dank-inc/data-buddy/README.md b/node_modules/@dank-inc/data-buddy/README.md deleted file mode 100644 index e395697..0000000 --- a/node_modules/@dank-inc/data-buddy/README.md +++ /dev/null @@ -1,7 +0,0 @@ -# Data Buddy - -Need a little mock data thingy? - -# Look no further! - -I will document this someday diff --git a/node_modules/@dank-inc/data-buddy/lib/index.d.ts b/node_modules/@dank-inc/data-buddy/lib/index.d.ts deleted file mode 100644 index d1d8bde..0000000 --- a/node_modules/@dank-inc/data-buddy/lib/index.d.ts +++ /dev/null @@ -1,13 +0,0 @@ -declare type DataRecord = { - id: string; -}; -export declare type DataBuddyParams = T[]; -export declare class DataBuddy { - data: T[]; - constructor(records: T[]); - get: () => T[]; - getOne: (id: string) => T | null; - update: (id: string, params: Partial) => T | false; - delete: (id: string) => boolean; -} -export {}; diff --git a/node_modules/@dank-inc/data-buddy/lib/index.js b/node_modules/@dank-inc/data-buddy/lib/index.js deleted file mode 100644 index 94c8739..0000000 --- a/node_modules/@dank-inc/data-buddy/lib/index.js +++ /dev/null @@ -1,43 +0,0 @@ -"use strict"; -var __assign = (this && this.__assign) || function () { - __assign = Object.assign || function(t) { - for (var s, i = 1, n = arguments.length; i < n; i++) { - s = arguments[i]; - for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p)) - t[p] = s[p]; - } - return t; - }; - return __assign.apply(this, arguments); -}; -Object.defineProperty(exports, "__esModule", { value: true }); -exports.DataBuddy = void 0; -var DataBuddy = (function () { - function DataBuddy(records) { - var _this = this; - this.get = function () { - return _this.data; - }; - this.getOne = function (id) { - return _this.data.find(function (record) { return record.id === id; }) || null; - }; - this.update = function (id, params) { - var index = _this.data.findIndex(function (record) { return record.id === id; }); - if (!index) - return false; - var record = _this.data[index]; - _this.data[index] = __assign(__assign({}, record), params); - return _this.data[index]; - }; - this.delete = function (id) { - var index = _this.data.findIndex(function (record) { return record.id === id; }); - if (!index) - return false; - _this.data.splice(index, 1); - return true; - }; - this.data = records; - } - return DataBuddy; -}()); -exports.DataBuddy = DataBuddy; diff --git a/node_modules/@dank-inc/data-buddy/package.json b/node_modules/@dank-inc/data-buddy/package.json deleted file mode 100644 index 0a201c8..0000000 --- a/node_modules/@dank-inc/data-buddy/package.json +++ /dev/null @@ -1,24 +0,0 @@ -{ - "name": "@dank-inc/data-buddy", - "version": "0.1.3", - "author": "Elijah Lucian", - "license": "MIT", - "description": "Need a little mock api data state buddy?", - "repository": { - "type": "git", - "url": "https://github.com/dank-inc/data-buddy" - }, - "files": [ - "lib" - ], - "main": "index.js", - "scripts": { - "lint": "tsc --noEmit", - "compile": "rm -rf lib && tsc", - "deploy": "npm run compile && npm publish", - "test": "echo \"Error: no test specified\" && exit 1" - }, - "devDependencies": { - "typescript": "^4.2.4" - } -}