Add basic part page

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 = () => <div>Loading...</div>
+
+export const Empty = () => <div>Part not found</div>
+
+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 <Part part={{...part, code: part.code}} saveCode={saveCode} loading={loading} error={error} />
+}

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,
+  },
+})

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 ? <Loading /> : null
+}
+
+export const empty = () => {
+  return Empty ? <Empty /> : null
+}
+
+export const failure = () => {
+  return Failure ? <Failure error={new Error('Oh no')} /> : null
+}
+
+export const success = () => {
+  return Success ? <Success {...standard()} /> : null
+}
+
+export default { title: 'Cells/IdePartCell' }

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(<Loading />)
+    // Use screen.debug() to see output
+    expect(screen.getByText('Loading...')).toBeInTheDocument()
+  })
+
+  test('Empty renders successfully', async () => {
+    render(<Empty />)
+    expect(screen.getByText('Empty')).toBeInTheDocument()
+  })
+
+  test('Failure renders successfully', async () => {
+    render(<Failure error={new Error('Oh no')} />)
+    expect(screen.getByText(/Oh no/i)).toBeInTheDocument()
+  })
+
+  test('Success renders successfully', async () => {
+    render(<Success idePart={standard().idePart} />)
+    expect(screen.getByText(/42/i)).toBeInTheDocument()
+  })
+})

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 = () => <div>Loading...</div>
 
-export const Empty = () => <div>Part not found</div>
+export const Empty = () => <div>Empty</div>
+
+export const Failure = ({ error }) => <div>Error: {error.message}</div>
 
 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 <Part part={{...part, code: part.code}} saveCode={saveCode} loading={loading} error={error} />
+  console.log(part)
+  return (
+    <>
+      <div className="max-w-7xl mx-auto">
+        <div className="flex justify-center">
+          <img src={part.mainImage} />
+        </div>
+        <div className="bg-white p-8 my-12 min-h-md">
+          <h2 className="text-4xl py-4">{part.title}</h2>
+          <Editor
+            className="bg-indigo-700"
+            defaultValue={part.description}
+            readOnly
+          />
+        </div>
+      </div>
+    </>
+  )
 }