From d248b5a7da85c73790cc49abe72fb3e4be079e9d Mon Sep 17 00:00:00 2001 From: Will Date: Fri, 10 Apr 2020 20:18:26 -0400 Subject: [PATCH 1/2] Create Skeleton Navigation for leifdown views --- src/App.js | 11 ----------- src/App.test.js | 9 --------- src/DisplayView.jsx | 12 ++++++++++++ src/EditMode.jsx | 30 ++++++++++++++++++++++++++++++ src/EditView.jsx | 12 ++++++++++++ src/LeifdownApp.jsx | 13 +++++++++++++ src/index.js | 4 ++-- 7 files changed, 69 insertions(+), 22 deletions(-) delete mode 100644 src/App.js delete mode 100644 src/App.test.js create mode 100644 src/DisplayView.jsx create mode 100644 src/EditMode.jsx create mode 100644 src/EditView.jsx create mode 100644 src/LeifdownApp.jsx diff --git a/src/App.js b/src/App.js deleted file mode 100644 index 27e2d8e..0000000 --- a/src/App.js +++ /dev/null @@ -1,11 +0,0 @@ -import React from 'react'; -import './App.css'; - -function App() { - return ( -
-
- ); -} - -export default App; diff --git a/src/App.test.js b/src/App.test.js deleted file mode 100644 index 7f644a7..0000000 --- a/src/App.test.js +++ /dev/null @@ -1,9 +0,0 @@ -import React from 'react'; -import { render } from '@testing-library/react'; -import App from './App'; - -test.skip('renders learn react link', () => { - const { getByText } = render(); - const linkElement = getByText(/learn react/i); - expect(linkElement).toBeInTheDocument(); -}); diff --git a/src/DisplayView.jsx b/src/DisplayView.jsx new file mode 100644 index 0000000..9a44709 --- /dev/null +++ b/src/DisplayView.jsx @@ -0,0 +1,12 @@ +import React from 'react'; + +export default function DisplayView() { + /************************************ + * Render + ************************************/ + + return ( + <> + + ); +} diff --git a/src/EditMode.jsx b/src/EditMode.jsx new file mode 100644 index 0000000..0ecb4ee --- /dev/null +++ b/src/EditMode.jsx @@ -0,0 +1,30 @@ +import React, { useState } from 'react'; +import EditView from './EditView'; +import DisplayView from './DisplayView'; + + /************************************ + * Constants + ************************************/ + +const EDIT_VIEW = 'EDIT'; +const DISPLAY_VIEW = 'DISPLAY'; + +export default function EditMode() { + /************************************ + * State + ************************************/ + + const [view, setView] = useState(EDIT_VIEW); + + /************************************ + * Render + ************************************/ + + return ( +
+ + + { view === EDIT_VIEW ? : } +
+ ); +} diff --git a/src/EditView.jsx b/src/EditView.jsx new file mode 100644 index 0000000..a79ef0c --- /dev/null +++ b/src/EditView.jsx @@ -0,0 +1,12 @@ +import React from 'react'; + +export default function EditView() { + /************************************ + * Render + ************************************/ + + return ( + <> + + ); +} diff --git a/src/LeifdownApp.jsx b/src/LeifdownApp.jsx new file mode 100644 index 0000000..f01aaec --- /dev/null +++ b/src/LeifdownApp.jsx @@ -0,0 +1,13 @@ +import React from 'react'; +import './App.css'; +import EditMode from './EditMode'; + +export default function LeifdownApp() { + /************************************ + * Render + ************************************/ + + return ( + + ); +} diff --git a/src/index.js b/src/index.js index f5185c1..d6aebc4 100644 --- a/src/index.js +++ b/src/index.js @@ -1,12 +1,12 @@ import React from 'react'; import ReactDOM from 'react-dom'; import './index.css'; -import App from './App'; +import LeifdownApp from './LeifdownApp'; import * as serviceWorker from './serviceWorker'; ReactDOM.render( - + , document.getElementById('root') ); From c9d9798c43effdeebbd00ee29f52a69722fdd14c Mon Sep 17 00:00:00 2001 From: Will Date: Fri, 10 Apr 2020 21:20:28 -0400 Subject: [PATCH 2/2] Create Edit View --- src/App.css | 0 src/App.scss | 10 ++++++++++ src/EditMode.jsx | 14 +++++++++----- src/EditView.jsx | 5 ++--- src/LeifdownApp.jsx | 3 +-- 5 files changed, 22 insertions(+), 10 deletions(-) delete mode 100644 src/App.css create mode 100644 src/App.scss diff --git a/src/App.css b/src/App.css deleted file mode 100644 index e69de29..0000000 diff --git a/src/App.scss b/src/App.scss new file mode 100644 index 0000000..dd77081 --- /dev/null +++ b/src/App.scss @@ -0,0 +1,10 @@ +.edit-mode-container { + display: flex; + flex-direction: column; + + & .button-module { + display: flex; + flex-direction: row; + align-self: flex-start; + } +} \ No newline at end of file diff --git a/src/EditMode.jsx b/src/EditMode.jsx index 0ecb4ee..75b1a26 100644 --- a/src/EditMode.jsx +++ b/src/EditMode.jsx @@ -1,4 +1,6 @@ import React, { useState } from 'react'; +import './App.scss'; + import EditView from './EditView'; import DisplayView from './DisplayView'; @@ -9,7 +11,7 @@ import DisplayView from './DisplayView'; const EDIT_VIEW = 'EDIT'; const DISPLAY_VIEW = 'DISPLAY'; -export default function EditMode() { +export default function EditMode({width = '100%', height = '500px'}) { /************************************ * State ************************************/ @@ -19,11 +21,13 @@ export default function EditMode() { /************************************ * Render ************************************/ - + return ( -
- - +
+
+ + +
{ view === EDIT_VIEW ? : }
); diff --git a/src/EditView.jsx b/src/EditView.jsx index a79ef0c..7f12ffb 100644 --- a/src/EditView.jsx +++ b/src/EditView.jsx @@ -1,12 +1,11 @@ import React from 'react'; -export default function EditView() { +export default function EditView({onValueChange, ...rest}) { /************************************ * Render ************************************/ return ( - <> - + ); } diff --git a/src/LeifdownApp.jsx b/src/LeifdownApp.jsx index f01aaec..51104d5 100644 --- a/src/LeifdownApp.jsx +++ b/src/LeifdownApp.jsx @@ -1,12 +1,11 @@ import React from 'react'; -import './App.css'; import EditMode from './EditMode'; export default function LeifdownApp() { /************************************ * Render ************************************/ - + return ( );