issue-148 Clean up files with "2" in them

resolves #148

web/src/components/PartCell/PartCell.js

@@ -1,24 +1,166 @@
-import Part from 'src/components/Part'
+import { useMutation, useFlash } from '@redwoodjs/web'
+import { navigate, routes } from '@redwoodjs/router'
+import { useAuth } from '@redwoodjs/auth'
+
+import PartProfile from 'src/components/PartProfile'
 
 export const QUERY = gql`
-  query FIND_PART_BY_ID($id: String!) {
-    part: part(id: $id) {
+  query FIND_PART_BY_USERNAME_TITLE(
+    $userName: String!
+    $partTitle: String
+    $currentUserId: String
+  ) {
+    userPart: userName(userName: $userName) {
+      id
+      name
+      userName
+      bio
+      image
+      Part(partTitle: $partTitle) {
+        id
+        title
+        description
+        code
+        mainImage
+        createdAt
+        updatedAt
+        userId
+        Reaction {
+          emote
+        }
+        userReactions: Reaction(userId: $currentUserId) {
+          emote
+        }
+        Comment {
+          id
+          text
+          user {
+            userName
+            image
+          }
+        }
+      }
+    }
+  }
+`
+
+const UPDATE_PART_MUTATION = gql`
+  mutation UpdatePartMutation($id: String!, $input: UpdatePartInput!) {
+    updatePart: updatePart(id: $id, input: $input) {
       id
       title
-      description
-      code
-      mainImage
-      createdAt
-      updatedAt
-      userId
+      user {
+        id
+        userName
+      }
+    }
+  }
+`
+const CREATE_PART_MUTATION = gql`
+  mutation CreatePartMutation($input: CreatePartInput!) {
+    createPart(input: $input) {
+      id
+      title
+      user {
+        id
+        userName
+      }
+    }
+  }
+`
+const TOGGLE_REACTION_MUTATION = gql`
+  mutation ToggleReactionMutation($input: TogglePartReactionInput!) {
+    togglePartReaction(input: $input) {
+      id
+      emote
+    }
+  }
+`
+const CREATE_COMMENT_MUTATION = gql`
+  mutation CreateCommentMutation($input: CreateCommentInput!) {
+    createComment(input: $input) {
+      id
+      text
     }
   }
 `
 
 export const Loading = () => <div>Loading...</div>
 
-export const Empty = () => <div>Part not found</div>
+export const Empty = () => <div>Empty</div>
 
-export const Success = ({ part }) => {
-  return <Part part={part} />
+export const Failure = ({ error }) => <div>Error: {error.message}</div>
+
+export const Success = ({ userPart, variables: { isEditable }, refetch }) => {
+  const { currentUser } = useAuth()
+  const { addMessage } = useFlash()
+  const [updateUser, { loading, error }] = useMutation(UPDATE_PART_MUTATION, {
+    onCompleted: ({ updatePart }) => {
+      navigate(
+        routes.part({
+          userName: updatePart.user.userName,
+          partTitle: updatePart.title,
+        })
+      )
+      addMessage('Part updated.', { classes: 'rw-flash-success' })
+    },
+  })
+  const [createUser] = useMutation(CREATE_PART_MUTATION, {
+    onCompleted: ({ createPart }) => {
+      navigate(
+        routes.part({
+          userName: createPart?.user?.userName,
+          partTitle: createPart?.title,
+        })
+      )
+      addMessage('Part Created.', { classes: 'rw-flash-success' })
+    },
+  })
+  const onSave = (id, input) => {
+    if (!id) {
+      createUser({ variables: { input } })
+      return
+    }
+    updateUser({ variables: { id, input } })
+  }
+
+  const [toggleReaction] = useMutation(TOGGLE_REACTION_MUTATION, {
+    onCompleted: () => refetch(),
+  })
+  const onReaction = (emote) =>
+    toggleReaction({
+      variables: {
+        input: {
+          emote,
+          userId: currentUser.sub,
+          partId: userPart?.Part?.id,
+        },
+      },
+    })
+
+  const [createComment] = useMutation(CREATE_COMMENT_MUTATION, {
+    onCompleted: () => refetch(),
+  })
+  const onComment = (text) =>
+    createComment({
+      variables: {
+        input: {
+          text,
+          userId: currentUser.sub,
+          partId: userPart?.Part?.id,
+        },
+      },
+    })
+
+  return (
+    <PartProfile
+      userPart={userPart}
+      onSave={onSave}
+      loading={loading}
+      error={error}
+      isEditable={isEditable}
+      onReaction={onReaction}
+      onComment={onComment}
+    />
+  )
 }

web/src/components/PartCell/PartCell.mock.js

@@ -0,0 +1,6 @@
+// Define your own mock data here:
+export const standard = (/* vars, { ctx, req } */) => ({
+  part: {
+    id: 42,
+  },
+})

web/src/components/PartCell/PartCell.stories.js

@@ -0,0 +1,20 @@
+import { Loading, Empty, Failure, Success } from './PartCell'
+import { standard } from './PartCell.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/PartCell' }

web/src/components/PartCell/PartCell.test.js

@@ -0,0 +1,26 @@
+import { render, screen } from '@redwoodjs/testing'
+import { Loading, Empty, Failure, Success } from './PartCell'
+import { standard } from './PartCell.mock'
+
+describe('PartCell', () => {
+  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 part={standard().part} />)
+    expect(screen.getByText(/42/i)).toBeInTheDocument()
+  })
+})