Attempt to at move app into app sub dir

app/web/src/components/EditUserCell/EditUserCell.js

@@ -0,0 +1,58 @@
+import { useMutation, useFlash } from '@redwoodjs/web'
+import { navigate, routes } from '@redwoodjs/router'
+
+import UserProfile from 'src/components/UserProfile'
+
+export const QUERY = gql`
+  query FIND_USER_BY_ID($userName: String!) {
+    user: userName(userName: $userName) {
+      id
+      userName
+      name
+      createdAt
+      updatedAt
+      image
+      bio
+    }
+  }
+`
+
+const UPDATE_USER_MUTATION = gql`
+  mutation UpdateUserMutation($userName: String!, $input: UpdateUserInput!) {
+    updateUserByUserName(userName: $userName, input: $input) {
+      id
+      userName
+    }
+  }
+`
+
+export const Loading = () => <div className="h-screen">Loading...</div>
+
+export const Empty = () => <div className="h-full">Empty</div>
+
+export const Failure = ({ error }) => <div>Error: {error.message}</div>
+
+export const Success = ({ user, refetch, variables: { isEditable } }) => {
+  const { addMessage } = useFlash()
+  const [updateUser, { loading, error }] = useMutation(UPDATE_USER_MUTATION, {
+    onCompleted: ({ updateUserByUserName }) => {
+      navigate(routes.user({ userName: updateUserByUserName.userName }))
+      addMessage('User updated.', { classes: 'rw-flash-success' })
+    },
+  })
+
+  const onSave = async (userName, input) => {
+    await updateUser({ variables: { userName, input } })
+    refetch()
+  }
+
+  return (
+    <UserProfile
+      user={user}
+      onSave={onSave}
+      loading={loading}
+      error={error}
+      isEditable={isEditable}
+    />
+  )
+}

app/web/src/components/EditUserCell/EditUserCell.mock.js

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

app/web/src/components/EditUserCell/EditUserCell.stories.js

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

app/web/src/components/EditUserCell/EditUserCell.test.js

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