From 0784cdbde2c381380d82928b6b6655a0226865c0 Mon Sep 17 00:00:00 2001 From: Kurt Hutten Date: Sat, 7 Nov 2020 19:45:37 +1100 Subject: [PATCH] Style part profile editable state --- web/src/Routes.js | 10 +- web/src/components/Breadcrumb/Breadcrumb.js | 15 ++- .../components/EditUser2Cell/EditUser2Cell.js | 1 + web/src/components/InputText/InputText.js | 21 +++++ .../components/InputText/InputText.stories.js | 7 ++ .../components/InputText/InputText.test.js | 11 +++ web/src/components/Part2Cell/Part2Cell.js | 84 +---------------- web/src/components/PartProfile/PartProfile.js | 92 +++++++++++++++++++ .../PartProfile/PartProfile.stories.js | 7 ++ .../PartProfile/PartProfile.test.js | 11 +++ .../ProfileTextInput/ProfileTextInput.js | 21 ++--- web/src/components/Svg/Svg.js | 23 +++-- web/src/pages/EditPart2Page/EditPart2Page.js | 12 +++ .../EditPart2Page/EditPart2Page.stories.js | 7 ++ .../pages/EditPart2Page/EditPart2Page.test.js | 11 +++ 15 files changed, 225 insertions(+), 108 deletions(-) create mode 100644 web/src/components/InputText/InputText.js create mode 100644 web/src/components/InputText/InputText.stories.js create mode 100644 web/src/components/InputText/InputText.test.js create mode 100644 web/src/components/PartProfile/PartProfile.js create mode 100644 web/src/components/PartProfile/PartProfile.stories.js create mode 100644 web/src/components/PartProfile/PartProfile.test.js create mode 100644 web/src/pages/EditPart2Page/EditPart2Page.js create mode 100644 web/src/pages/EditPart2Page/EditPart2Page.stories.js create mode 100644 web/src/pages/EditPart2Page/EditPart2Page.test.js diff --git a/web/src/Routes.js b/web/src/Routes.js index b538756..0efdf9b 100644 --- a/web/src/Routes.js +++ b/web/src/Routes.js @@ -16,15 +16,15 @@ const Routes = () => { {/* */} + {/* Ownership enforced routes */} + + + {/* End ownership enforced routes */} + {/* */} - {/* Ownership enforced routes */} - - {/* */} - {/* End ownership enforced routes */} - {/* GENERATED ROUTES BELOW, probably going to clean these up and delete most of them, but the CRUD functionality is useful for now */} {/* All private by default for safety and because the routes that are left after clean up will probably be admin pages */} diff --git a/web/src/components/Breadcrumb/Breadcrumb.js b/web/src/components/Breadcrumb/Breadcrumb.js index 31f2727..fe921fb 100644 --- a/web/src/components/Breadcrumb/Breadcrumb.js +++ b/web/src/components/Breadcrumb/Breadcrumb.js @@ -1,16 +1,21 @@ import { getActiveClasses } from "get-active-classes" -const Breadcrumb = ({ userName, partTitle, className }) => { +import InputText from 'src/components/InputText' + +const Breadcrumb = ({ userName, partTitle, onPartTitleChange, className }) => { return (

.
- + {userName}
.
- - {partTitle} - +

) } diff --git a/web/src/components/EditUser2Cell/EditUser2Cell.js b/web/src/components/EditUser2Cell/EditUser2Cell.js index 147921e..850f260 100644 --- a/web/src/components/EditUser2Cell/EditUser2Cell.js +++ b/web/src/components/EditUser2Cell/EditUser2Cell.js @@ -1,5 +1,6 @@ import { useMutation, useFlash } from '@redwoodjs/web' import { navigate, routes } from '@redwoodjs/router' + import UserProfile from 'src/components/UserProfile' export const QUERY = gql` diff --git a/web/src/components/InputText/InputText.js b/web/src/components/InputText/InputText.js new file mode 100644 index 0000000..93826dd --- /dev/null +++ b/web/src/components/InputText/InputText.js @@ -0,0 +1,21 @@ +import { getActiveClasses } from 'get-active-classes' + +const InputText = ({value, isEditable, onChange ,className}) => { + return ( + <> +
+
+ +
+ {value} + + ) +} + +export default InputText diff --git a/web/src/components/InputText/InputText.stories.js b/web/src/components/InputText/InputText.stories.js new file mode 100644 index 0000000..612cc72 --- /dev/null +++ b/web/src/components/InputText/InputText.stories.js @@ -0,0 +1,7 @@ +import InputText from './InputText' + +export const generated = () => { + return +} + +export default { title: 'Components/InputText' } diff --git a/web/src/components/InputText/InputText.test.js b/web/src/components/InputText/InputText.test.js new file mode 100644 index 0000000..d16c361 --- /dev/null +++ b/web/src/components/InputText/InputText.test.js @@ -0,0 +1,11 @@ +import { render } from '@redwoodjs/testing' + +import InputText from './InputText' + +describe('InputText', () => { + it('renders successfully', () => { + expect(() => { + render() + }).not.toThrow() + }) +}) diff --git a/web/src/components/Part2Cell/Part2Cell.js b/web/src/components/Part2Cell/Part2Cell.js index 3314d4a..3fd5a18 100644 --- a/web/src/components/Part2Cell/Part2Cell.js +++ b/web/src/components/Part2Cell/Part2Cell.js @@ -1,10 +1,7 @@ -import Editor from "rich-markdown-editor"; +import { useMutation, useFlash } from '@redwoodjs/web' +import { navigate, routes } from '@redwoodjs/router' -// import Part from 'src/components/Part' -import ImageUploader from 'src/components/ImageUploader' -import Breadcrumb from 'src/components/Breadcrumb' -import EmojiReaction from 'src/components/EmojiReaction' -import Button from 'src/components/Button' +import PartProfile from 'src/components/PartProfile' export const QUERY = gql` query FIND_PART_BY_USERNAME_TITLE($userName: String!, $partTitle: String!) { @@ -34,77 +31,6 @@ export const Empty = () =>
Empty
export const Failure = ({ error }) =>
Error: {error.message}
-export const Success = ({ userPart, variables }) => { - return ( - <> -
- - {/* Side column */} - - - {/* main project center column */} -
- - { userPart?.Part?.mainImage && {}} - aspectRatio={16/9} - imageUrl={userPart?.Part?.mainImage} - />} -
- setInput({ - // ...input, - // bio: bioFn(), - // })} - /> -
-
- -
- - ) +export const Success = ({ userPart, variables: {isEditable} }) => { + return } diff --git a/web/src/components/PartProfile/PartProfile.js b/web/src/components/PartProfile/PartProfile.js new file mode 100644 index 0000000..e713235 --- /dev/null +++ b/web/src/components/PartProfile/PartProfile.js @@ -0,0 +1,92 @@ +import {useState} from 'react' +import Editor from "rich-markdown-editor"; + +import ImageUploader from 'src/components/ImageUploader' +import Breadcrumb from 'src/components/Breadcrumb' +import EmojiReaction from 'src/components/EmojiReaction' +import Button from 'src/components/Button' + +const PartProfile = ({userPart, isEditable}) => { + const part = userPart?.Part + const [input, setInput] = useState({ + title: part.title, + mainImage: part.mainImage, + description: part.description, + }) + const hi = () => {} + return ( + <> +
+ + {/* Side column */} + + + {/* main project center column */} +
+ + { input?.mainImage && {}} + aspectRatio={16/9} + isEditable={isEditable} + imageUrl={input?.mainImage} + />} +
+ setInput({ + // ...input, + // bio: bioFn(), + // })} + /> +
+
+ +
+ + ) +} + +export default PartProfile diff --git a/web/src/components/PartProfile/PartProfile.stories.js b/web/src/components/PartProfile/PartProfile.stories.js new file mode 100644 index 0000000..e663ed3 --- /dev/null +++ b/web/src/components/PartProfile/PartProfile.stories.js @@ -0,0 +1,7 @@ +import PartProfile from './PartProfile' + +export const generated = () => { + return +} + +export default { title: 'Components/PartProfile' } diff --git a/web/src/components/PartProfile/PartProfile.test.js b/web/src/components/PartProfile/PartProfile.test.js new file mode 100644 index 0000000..10b4d70 --- /dev/null +++ b/web/src/components/PartProfile/PartProfile.test.js @@ -0,0 +1,11 @@ +import { render } from '@redwoodjs/testing' + +import PartProfile from './PartProfile' + +describe('PartProfile', () => { + it('renders successfully', () => { + expect(() => { + render() + }).not.toThrow() + }) +}) diff --git a/web/src/components/ProfileTextInput/ProfileTextInput.js b/web/src/components/ProfileTextInput/ProfileTextInput.js index b8de516..e3d4bf6 100644 --- a/web/src/components/ProfileTextInput/ProfileTextInput.js +++ b/web/src/components/ProfileTextInput/ProfileTextInput.js @@ -1,5 +1,6 @@ -import {Fragment, useState} from 'react' -import { getActiveClasses } from "get-active-classes" +import {Fragment} from 'react' + +import InputText from 'src/components/InputText' const ProfileTextInput = ({fields, isEditable, onChange= () => {}}) => { return ( @@ -8,16 +9,12 @@ const ProfileTextInput = ({fields, isEditable, onChange= () => {}}) => { {Object.entries(fields).map(([property, value]) => ( {property}: -
-
- onChange({...fields, [property]: target.value})} - value={value} - type="text" - /> -
- {value} + onChange({...fields, [property]: target.value})} + isEditable={isEditable} + /> ))}
diff --git a/web/src/components/Svg/Svg.js b/web/src/components/Svg/Svg.js index da2db9a..d228c1d 100644 --- a/web/src/components/Svg/Svg.js +++ b/web/src/components/Svg/Svg.js @@ -1,18 +1,27 @@ const Svg = ({name, className: className2, strokeWidth = 2}) => { const svgs = { - "plus-circle": - + "chevron-down": + , - "plus": - + "dots-vertical": + , "pencil": , - "dots-vertical": - - + "plus": + + , + "plus-circle": + + , + "save": + + , + "terminal": + + , } return
diff --git a/web/src/pages/EditPart2Page/EditPart2Page.js b/web/src/pages/EditPart2Page/EditPart2Page.js new file mode 100644 index 0000000..25bf0ee --- /dev/null +++ b/web/src/pages/EditPart2Page/EditPart2Page.js @@ -0,0 +1,12 @@ +import MainLayout from 'src/layouts/MainLayout' +import Part2Cell from 'src/components/Part2Cell' + +const EditPart2Page = ({userName, partTitle}) => { + return ( + + + + ) +} + +export default EditPart2Page diff --git a/web/src/pages/EditPart2Page/EditPart2Page.stories.js b/web/src/pages/EditPart2Page/EditPart2Page.stories.js new file mode 100644 index 0000000..75fa45f --- /dev/null +++ b/web/src/pages/EditPart2Page/EditPart2Page.stories.js @@ -0,0 +1,7 @@ +import EditPart2Page from './EditPart2Page' + +export const generated = () => { + return +} + +export default { title: 'Pages/EditPart2Page' } diff --git a/web/src/pages/EditPart2Page/EditPart2Page.test.js b/web/src/pages/EditPart2Page/EditPart2Page.test.js new file mode 100644 index 0000000..d234ad5 --- /dev/null +++ b/web/src/pages/EditPart2Page/EditPart2Page.test.js @@ -0,0 +1,11 @@ +import { render } from '@redwoodjs/testing' + +import EditPart2Page from './EditPart2Page' + +describe('EditPart2Page', () => { + it('renders successfully', () => { + expect(() => { + render() + }).not.toThrow() + }) +})