diff --git a/web/package.json b/web/package.json
index beb4868..db3c665 100644
--- a/web/package.json
+++ b/web/package.json
@@ -28,6 +28,8 @@
"prop-types": "^15.7.2",
"react": "^16.13.1",
"react-dom": "^16.13.1",
+ "rich-markdown-editor": "^11.0.2",
+ "styled-components": "^5.2.0",
"three": "^0.118.3"
},
"devDependencies": {
diff --git a/web/src/Routes.js b/web/src/Routes.js
index 9fa6d36..200ecb1 100644
--- a/web/src/Routes.js
+++ b/web/src/Routes.js
@@ -15,6 +15,7 @@ const Routes = () => {
+
diff --git a/web/src/components/IdePartCell/IdePartCell.js b/web/src/components/IdePartCell/IdePartCell.js
new file mode 100644
index 0000000..3b95c0b
--- /dev/null
+++ b/web/src/components/IdePartCell/IdePartCell.js
@@ -0,0 +1,46 @@
+import { useMutation, useFlash } from '@redwoodjs/web'
+import { navigate, routes } from '@redwoodjs/router'
+import Part from 'src/components/Part'
+
+export const QUERY = gql`
+ query FIND_PART_BY_ID($id: Int!) {
+ part: part(id: $id) {
+ id
+ title
+ description
+ code
+ mainImage
+ createdAt
+ }
+ }
+`
+
+const UPDATE_PART_MUTATION = gql`
+ mutation UpdatePartMutation($id: Int!, $input: UpdatePartInput!) {
+ updatePart(id: $id, input: $input) {
+ id
+ }
+ }
+`
+
+export const Loading = () => Loading...
+
+export const Empty = () => Part not found
+
+export const Success = ({ part }) => {
+ const { addMessage } = useFlash()
+ const [updatePart, { loading, error }] = useMutation(UPDATE_PART_MUTATION, {
+ onCompleted: () => {
+ // navigate(routes.part({id: updatePart.id}))
+ addMessage('Part updated.', { classes: 'rw-flash-success' })
+ },
+ })
+ console.log({updatePart})
+
+
+ const saveCode = (input, id) => {
+ console.log(id, input, 'wowow')
+ updatePart({ variables: { id, input } })
+ }
+ return
+}
diff --git a/web/src/components/IdePartCell/IdePartCell.mock.js b/web/src/components/IdePartCell/IdePartCell.mock.js
new file mode 100644
index 0000000..b267638
--- /dev/null
+++ b/web/src/components/IdePartCell/IdePartCell.mock.js
@@ -0,0 +1,6 @@
+// Define your own mock data here:
+export const standard = (/* vars, { ctx, req } */) => ({
+ idePart: {
+ id: 42,
+ },
+})
diff --git a/web/src/components/IdePartCell/IdePartCell.stories.js b/web/src/components/IdePartCell/IdePartCell.stories.js
new file mode 100644
index 0000000..0a2b0d7
--- /dev/null
+++ b/web/src/components/IdePartCell/IdePartCell.stories.js
@@ -0,0 +1,20 @@
+import { Loading, Empty, Failure, Success } from './IdePartCell'
+import { standard } from './IdePartCell.mock'
+
+export const loading = () => {
+ return Loading ? : null
+}
+
+export const empty = () => {
+ return Empty ? : null
+}
+
+export const failure = () => {
+ return Failure ? : null
+}
+
+export const success = () => {
+ return Success ? : null
+}
+
+export default { title: 'Cells/IdePartCell' }
diff --git a/web/src/components/IdePartCell/IdePartCell.test.js b/web/src/components/IdePartCell/IdePartCell.test.js
new file mode 100644
index 0000000..a5f77fc
--- /dev/null
+++ b/web/src/components/IdePartCell/IdePartCell.test.js
@@ -0,0 +1,26 @@
+import { render, screen } from '@redwoodjs/testing'
+import { Loading, Empty, Failure, Success } from './IdePartCell'
+import { standard } from './IdePartCell.mock'
+
+describe('IdePartCell', () => {
+ test('Loading renders successfully', () => {
+ render()
+ // Use screen.debug() to see output
+ expect(screen.getByText('Loading...')).toBeInTheDocument()
+ })
+
+ test('Empty renders successfully', async () => {
+ render()
+ expect(screen.getByText('Empty')).toBeInTheDocument()
+ })
+
+ test('Failure renders successfully', async () => {
+ render()
+ expect(screen.getByText(/Oh no/i)).toBeInTheDocument()
+ })
+
+ test('Success renders successfully', async () => {
+ render()
+ expect(screen.getByText(/42/i)).toBeInTheDocument()
+ })
+})
diff --git a/web/src/components/PartCell/PartCell.js b/web/src/components/PartCell/PartCell.js
index 3b95c0b..2efcdcc 100644
--- a/web/src/components/PartCell/PartCell.js
+++ b/web/src/components/PartCell/PartCell.js
@@ -1,46 +1,32 @@
-import { useMutation, useFlash } from '@redwoodjs/web'
-import { navigate, routes } from '@redwoodjs/router'
-import Part from 'src/components/Part'
-export const QUERY = gql`
- query FIND_PART_BY_ID($id: Int!) {
- part: part(id: $id) {
- id
- title
- description
- code
- mainImage
- createdAt
- }
- }
-`
+import {QUERY as reExportQuery} from 'src/components/EditPartCell'
+import Editor from "rich-markdown-editor";
-const UPDATE_PART_MUTATION = gql`
- mutation UpdatePartMutation($id: Int!, $input: UpdatePartInput!) {
- updatePart(id: $id, input: $input) {
- id
- }
- }
-`
+export const QUERY = reExportQuery
export const Loading = () => Loading...
-export const Empty = () => Part not found
+export const Empty = () => Empty
+
+export const Failure = ({ error }) => Error: {error.message}
export const Success = ({ part }) => {
- const { addMessage } = useFlash()
- const [updatePart, { loading, error }] = useMutation(UPDATE_PART_MUTATION, {
- onCompleted: () => {
- // navigate(routes.part({id: updatePart.id}))
- addMessage('Part updated.', { classes: 'rw-flash-success' })
- },
- })
- console.log({updatePart})
-
-
- const saveCode = (input, id) => {
- console.log(id, input, 'wowow')
- updatePart({ variables: { id, input } })
- }
- return
+ console.log(part)
+ return (
+ <>
+
+
+
+
+
+
{part.title}
+
+
+