@@ -36,7 +36,7 @@ export const Success = ({ user }) => {
|
||||
const { addMessage } = useFlash()
|
||||
const [updateUser, { loading, error }] = useMutation(UPDATE_USER_MUTATION, {
|
||||
onCompleted: ({ updateUserByUserName }) => {
|
||||
navigate(routes.user2({ userName: updateUserByUserName.userName }))
|
||||
navigate(routes.user({ userName: updateUserByUserName.userName }))
|
||||
addMessage('User updated.', { classes: 'rw-flash-success' })
|
||||
},
|
||||
})
|
||||
@@ -1,6 +1,6 @@
|
||||
// Define your own mock data here:
|
||||
export const standard = (/* vars, { ctx, req } */) => ({
|
||||
editUser2: {
|
||||
editUser: {
|
||||
id: 42,
|
||||
},
|
||||
})
|
||||
@@ -1,5 +1,5 @@
|
||||
import { Loading, Empty, Failure, Success } from './EditUser2Cell'
|
||||
import { standard } from './EditUser2Cell.mock'
|
||||
import { Loading, Empty, Failure, Success } from './EditUserCell'
|
||||
import { standard } from './EditUserCell.mock'
|
||||
|
||||
export const loading = () => {
|
||||
return Loading ? <Loading /> : null
|
||||
@@ -17,4 +17,4 @@ export const success = () => {
|
||||
return Success ? <Success {...standard()} /> : null
|
||||
}
|
||||
|
||||
export default { title: 'Cells/EditUser2Cell' }
|
||||
export default { title: 'Cells/EditUserCell' }
|
||||
@@ -1,8 +1,8 @@
|
||||
import { render, screen } from '@redwoodjs/testing'
|
||||
import { Loading, Empty, Failure, Success } from './EditUser2Cell'
|
||||
import { standard } from './EditUser2Cell.mock'
|
||||
import { Loading, Empty, Failure, Success } from './EditUserCell'
|
||||
import { standard } from './EditUserCell.mock'
|
||||
|
||||
describe('EditUser2Cell', () => {
|
||||
describe('EditUserCell', () => {
|
||||
test('Loading renders successfully', () => {
|
||||
render(<Loading />)
|
||||
// Use screen.debug() to see output
|
||||
@@ -20,7 +20,7 @@ describe('EditUser2Cell', () => {
|
||||
})
|
||||
|
||||
test('Success renders successfully', async () => {
|
||||
render(<Success editUser2={standard().editUser2} />)
|
||||
render(<Success editUser={standard().editUser} />)
|
||||
expect(screen.getByText(/42/i)).toBeInTheDocument()
|
||||
})
|
||||
})
|
||||
@@ -48,7 +48,7 @@ const IdeToolbar = ({ canEdit, isChanges, onSave, onExport, userNamePart }) => {
|
||||
/>
|
||||
</div>
|
||||
<div className="text-indigo-400 ml-2 mr-8">
|
||||
<Link to={routes.user2({ userName: userNamePart?.userName })}>
|
||||
<Link to={routes.user({ userName: userNamePart?.userName })}>
|
||||
{userNamePart?.userName}
|
||||
</Link>
|
||||
</div>
|
||||
@@ -58,7 +58,7 @@ const IdeToolbar = ({ canEdit, isChanges, onSave, onExport, userNamePart }) => {
|
||||
className="ml-3 shadow-md hover:shadow-lg border-indigo-600 border-2 border-opacity-0 hover:border-opacity-100 bg-indigo-800 text-indigo-200"
|
||||
shouldAnimateHover
|
||||
onClick={() => {
|
||||
navigate(routes.part2(userNamePart))
|
||||
navigate(routes.part(userNamePart))
|
||||
}}
|
||||
>
|
||||
Part Profile
|
||||
|
||||
@@ -1,166 +0,0 @@
|
||||
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_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
|
||||
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>Empty</div>
|
||||
|
||||
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.part2({
|
||||
userName: updatePart.user.userName,
|
||||
partTitle: updatePart.title,
|
||||
})
|
||||
)
|
||||
addMessage('Part updated.', { classes: 'rw-flash-success' })
|
||||
},
|
||||
})
|
||||
const [createUser] = useMutation(CREATE_PART_MUTATION, {
|
||||
onCompleted: ({ createPart }) => {
|
||||
navigate(
|
||||
routes.part2({
|
||||
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}
|
||||
/>
|
||||
)
|
||||
}
|
||||
@@ -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}
|
||||
/>
|
||||
)
|
||||
}
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
// Define your own mock data here:
|
||||
export const standard = (/* vars, { ctx, req } */) => ({
|
||||
part2: {
|
||||
part: {
|
||||
id: 42,
|
||||
},
|
||||
})
|
||||
@@ -1,5 +1,5 @@
|
||||
import { Loading, Empty, Failure, Success } from './Part2Cell'
|
||||
import { standard } from './Part2Cell.mock'
|
||||
import { Loading, Empty, Failure, Success } from './PartCell'
|
||||
import { standard } from './PartCell.mock'
|
||||
|
||||
export const loading = () => {
|
||||
return Loading ? <Loading /> : null
|
||||
@@ -17,4 +17,4 @@ export const success = () => {
|
||||
return Success ? <Success {...standard()} /> : null
|
||||
}
|
||||
|
||||
export default { title: 'Cells/Part2Cell' }
|
||||
export default { title: 'Cells/PartCell' }
|
||||
@@ -1,8 +1,8 @@
|
||||
import { render, screen } from '@redwoodjs/testing'
|
||||
import { Loading, Empty, Failure, Success } from './Part2Cell'
|
||||
import { standard } from './Part2Cell.mock'
|
||||
import { Loading, Empty, Failure, Success } from './PartCell'
|
||||
import { standard } from './PartCell.mock'
|
||||
|
||||
describe('Part2Cell', () => {
|
||||
describe('PartCell', () => {
|
||||
test('Loading renders successfully', () => {
|
||||
render(<Loading />)
|
||||
// Use screen.debug() to see output
|
||||
@@ -20,7 +20,7 @@ describe('Part2Cell', () => {
|
||||
})
|
||||
|
||||
test('Success renders successfully', async () => {
|
||||
render(<Success part2={standard().part2} />)
|
||||
render(<Success part={standard().part} />)
|
||||
expect(screen.getByText(/42/i)).toBeInTheDocument()
|
||||
})
|
||||
})
|
||||
@@ -28,7 +28,7 @@ const PartProfile = ({
|
||||
isEditable &&
|
||||
!canEdit &&
|
||||
navigate(
|
||||
routes.part2({ userName: userPart.userName, partTitle: part?.title })
|
||||
routes.part({ userName: userPart.userName, partTitle: part?.title })
|
||||
)
|
||||
}, [currentUser])
|
||||
const [input, setInput] = useState({
|
||||
@@ -54,7 +54,7 @@ const PartProfile = ({
|
||||
return
|
||||
}
|
||||
navigate(
|
||||
routes.editPart2({ userName: userPart?.userName, partTitle: part?.title })
|
||||
routes.editPart({ userName: userPart?.userName, partTitle: part?.title })
|
||||
)
|
||||
}
|
||||
return (
|
||||
@@ -73,7 +73,7 @@ const PartProfile = ({
|
||||
width={300}
|
||||
/>
|
||||
<h4 className="text-indigo-800 text-xl underline text-right py-4">
|
||||
<Link to={routes.user2({ userName: userPart?.userName })}>
|
||||
<Link to={routes.user({ userName: userPart?.userName })}>
|
||||
{userPart?.name}
|
||||
</Link>
|
||||
</h4>
|
||||
@@ -177,7 +177,7 @@ const PartProfile = ({
|
||||
</div>
|
||||
<div className="ml-4 font-roboto">
|
||||
<div className="text-gray-800 font-bold text-lg mb-1">
|
||||
<Link to={routes.user2({ userName: user?.userName })}>
|
||||
<Link to={routes.user({ userName: user?.userName })}>
|
||||
{user?.userName}
|
||||
</Link>
|
||||
</div>
|
||||
|
||||
@@ -16,7 +16,7 @@ const PartsList = ({ parts }) => {
|
||||
key={`${user?.userName}--${title}`}
|
||||
>
|
||||
<Link
|
||||
to={routes.part2({ userName: user?.userName, partTitle: title })}
|
||||
to={routes.part({ userName: user?.userName, partTitle: title })}
|
||||
>
|
||||
<div className="flex items-center p-2 bg-gray-200 border-gray-300 rounded-t-lg border-t border-l border-r">
|
||||
<div className="w-8 h-8 overflow-hidden rounded-full border border-indigo-300 shadow">
|
||||
|
||||
@@ -11,9 +11,7 @@ const UserProfile = ({ user, isEditable, loading, onSave, error }) => {
|
||||
const { currentUser } = useAuth()
|
||||
const canEdit = currentUser?.sub === user.id
|
||||
useEffect(() => {
|
||||
isEditable &&
|
||||
!canEdit &&
|
||||
navigate(routes.user2({ userName: user.userName }))
|
||||
isEditable && !canEdit && navigate(routes.user({ userName: user.userName }))
|
||||
}, [currentUser])
|
||||
const [input, setInput] = useState({
|
||||
userName: user.userName,
|
||||
@@ -67,7 +65,7 @@ const UserProfile = ({ user, isEditable, loading, onSave, error }) => {
|
||||
className="bg-indigo-200"
|
||||
iconName="pencil"
|
||||
onClick={() =>
|
||||
navigate(routes.editUser2({ userName: user.userName }))
|
||||
navigate(routes.editUser({ userName: user.userName }))
|
||||
}
|
||||
>
|
||||
Edit Profile
|
||||
|
||||
Reference in New Issue
Block a user