h3n3/cadhub
1
0
Fork 0
Code Issues 35 Pull Requests Packages Projects Releases Wiki Activity

Merge pull request #117 from Irev-Dev/kurt/issue-116

Browse Source 
issue 116 upgrade to redwood 0.20 🔥
This commit was merged in pull request #117.
This commit is contained in:
Kurt Hutten
2020-11-19 19:51:34 +11:00
committed by GitHub
parent 14941bf256 eeb9616e1d
commit bebe4de360
44 changed files with 1204 additions and 2638 deletions
Download Patch File Download Diff File Expand all files Collapse all files

103
web/src/components/Comment/Comment.js
View File

@@ -1,103 +0,0 @@
import { useMutation, useFlash } from '@redwoodjs/web'
import { Link, routes, navigate } from '@redwoodjs/router'
const DELETE_COMMENT_MUTATION = gql`
mutation DeleteCommentMutation($id: String!) {
deleteComment(id: $id) {
id
}
}
`
const jsonDisplay = (obj) => {
return (
<pre>
<code>{JSON.stringify(obj, null, 2)}</code>
</pre>
)
}
const timeTag = (datetime) => {
return (
<time dateTime={datetime} title={datetime}>
{new Date(datetime).toUTCString()}
</time>
)
}
const checkboxInputTag = (checked) => {
return <input type="checkbox" checked={checked} disabled />
}
const Comment = ({ comment }) => {
const { addMessage } = useFlash()
const [deleteComment] = useMutation(DELETE_COMMENT_MUTATION, {
onCompleted: () => {
navigate(routes.comments())
addMessage('Comment deleted.', { classes: 'rw-flash-success' })
},
})
const onDeleteClick = (id) => {
if (confirm('Are you sure you want to delete comment ' + id + '?')) {
deleteComment({ variables: { id } })
}
}
return (
<>
<div className="rw-segment">
<header className="rw-segment-header">
<h2 className="rw-heading rw-heading-secondary">
Comment {comment.id} Detail
</h2>
</header>
<table className="rw-table">
<tbody>
<tr>
<th>Id</th>
<td>{comment.id}</td>
</tr>
<tr>
<th>Text</th>
<td>{comment.text}</td>
</tr>
<tr>
<th>User id</th>
<td>{comment.userId}</td>
</tr>
<tr>
<th>Part id</th>
<td>{comment.partId}</td>
</tr>
<tr>
<th>Created at</th>
<td>{timeTag(comment.createdAt)}</td>
</tr>
<tr>
<th>Updated at</th>
<td>{timeTag(comment.updatedAt)}</td>
</tr>
</tbody>
</table>
</div>
<nav className="rw-button-group">
<Link
to={routes.editComment({ id: comment.id })}
className="rw-button rw-button-blue"
>
Edit
</Link>
<a
href="#"
className="rw-button rw-button-red"
onClick={() => onDeleteClick(comment.id)}
>
Delete
</a>
</nav>
</>
)
}
export default Comment

22
web/src/components/CommentCell/CommentCell.js
View File

@@ -1,22 +0,0 @@
import Comment from 'src/components/Comment'
export const QUERY = gql`
query FIND_COMMENT_BY_ID($id: String!) {
comment: comment(id: $id) {
id
text
userId
partId
createdAt
updatedAt
}
}
`
export const Loading = () => <div>Loading...</div>
export const Empty = () => <div>Comment not found</div>
export const Success = ({ comment }) => {
return <Comment comment={comment} />
}

83
web/src/components/CommentForm/CommentForm.js
View File

@@ -1,83 +0,0 @@
import {
Form,
FormError,
FieldError,
Label,
TextField,
Submit,
} from '@redwoodjs/forms'
const CommentForm = (props) => {
const onSubmit = (data) => {
props.onSave(data, props?.comment?.id)
}
return (
<div className="rw-form-wrapper">
<Form onSubmit={onSubmit} error={props.error}>
<FormError
error={props.error}
wrapperClassName="rw-form-error-wrapper"
titleClassName="rw-form-error-title"
listClassName="rw-form-error-list"
/>
<Label
name="text"
className="rw-label"
errorClassName="rw-label rw-label-error"
>
Text
</Label>
<TextField
name="text"
defaultValue={props.comment?.text}
className="rw-input"
errorClassName="rw-input rw-input-error"
validation={{ required: true }}
/>
<FieldError name="text" className="rw-field-error" />
<Label
name="userId"
className="rw-label"
errorClassName="rw-label rw-label-error"
>
User id
</Label>
<TextField
name="userId"
defaultValue={props.comment?.userId}
className="rw-input"
errorClassName="rw-input rw-input-error"
validation={{ required: true }}
/>
<FieldError name="userId" className="rw-field-error" />
<Label
name="partId"
className="rw-label"
errorClassName="rw-label rw-label-error"
>
Part id
</Label>
<TextField
name="partId"
defaultValue={props.comment?.partId}
className="rw-input"
errorClassName="rw-input rw-input-error"
validation={{ required: true }}
/>
<FieldError name="partId" className="rw-field-error" />
<div className="rw-button-group">
<Submit disabled={props.loading} className="rw-button rw-button-blue">
Save
</Submit>
</div>
</Form>
</div>
)
}
export default CommentForm

109
web/src/components/Comments/Comments.js
View File

@@ -1,109 +0,0 @@
import { useMutation, useFlash } from '@redwoodjs/web'
import { Link, routes } from '@redwoodjs/router'
const DELETE_COMMENT_MUTATION = gql`
mutation DeleteCommentMutation($id: String!) {
deleteComment(id: $id) {
id
}
}
`
const MAX_STRING_LENGTH = 150
const truncate = (text) => {
let output = text
if (text && text.length > MAX_STRING_LENGTH) {
output = output.substring(0, MAX_STRING_LENGTH) + '...'
}
return output
}
const jsonTruncate = (obj) => {
return truncate(JSON.stringify(obj, null, 2))
}
const timeTag = (datetime) => {
return (
<time dateTime={datetime} title={datetime}>
{new Date(datetime).toUTCString()}
</time>
)
}
const checkboxInputTag = (checked) => {
return <input type="checkbox" checked={checked} disabled />
}
const CommentsList = ({ comments }) => {
const { addMessage } = useFlash()
const [deleteComment] = useMutation(DELETE_COMMENT_MUTATION, {
onCompleted: () => {
addMessage('Comment deleted.', { classes: 'rw-flash-success' })
},
})
const onDeleteClick = (id) => {
if (confirm('Are you sure you want to delete comment ' + id + '?')) {
deleteComment({ variables: { id }, refetchQueries: ['COMMENTS'] })
}
}
return (
<div className="rw-segment rw-table-wrapper-responsive">
<table className="rw-table">
<thead>
<tr>
<th>Id</th>
<th>Text</th>
<th>User id</th>
<th>Part id</th>
<th>Created at</th>
<th>Updated at</th>
<th>&nbsp;</th>
</tr>
</thead>
<tbody>
{comments.map((comment) => (
<tr key={comment.id}>
<td>{truncate(comment.id)}</td>
<td>{truncate(comment.text)}</td>
<td>{truncate(comment.userId)}</td>
<td>{truncate(comment.partId)}</td>
<td>{timeTag(comment.createdAt)}</td>
<td>{timeTag(comment.updatedAt)}</td>
<td>
<nav className="rw-table-actions">
<Link
to={routes.comment({ id: comment.id })}
title={'Show comment ' + comment.id + ' detail'}
className="rw-button rw-button-small"
>
Show
</Link>
<Link
to={routes.editComment({ id: comment.id })}
title={'Edit comment ' + comment.id}
className="rw-button rw-button-small rw-button-blue"
>
Edit
</Link>
<a
href="#"
title={'Delete comment ' + comment.id}
className="rw-button rw-button-small rw-button-red"
onClick={() => onDeleteClick(comment.id)}
>
Delete
</a>
</nav>
</td>
</tr>
))}
</tbody>
</table>
</div>
)
}
export default CommentsList

33
web/src/components/CommentsCell/CommentsCell.js
View File

@@ -1,33 +0,0 @@
import { Link, routes } from '@redwoodjs/router'
import Comments from 'src/components/Comments'
export const QUERY = gql`
query COMMENTS {
comments {
id
text
userId
partId
createdAt
updatedAt
}
}
`
export const Loading = () => <div>Loading...</div>
export const Empty = () => {
return (
<div className="rw-text-center">
{'No comments yet. '}
<Link to={routes.newComment()} className="rw-link">
{'Create one?'}
</Link>
</div>
)
}
export const Success = ({ comments }) => {
return <Comments comments={comments} />
}

60
web/src/components/EditCommentCell/EditCommentCell.js
View File

@@ -1,60 +0,0 @@
import { useMutation, useFlash } from '@redwoodjs/web'
import { navigate, routes } from '@redwoodjs/router'
import CommentForm from 'src/components/CommentForm'
export const QUERY = gql`
query FIND_COMMENT_BY_ID($id: String!) {
comment: comment(id: $id) {
id
text
userId
partId
createdAt
updatedAt
}
}
`
const UPDATE_COMMENT_MUTATION = gql`
mutation UpdateCommentMutation($id: String!, $input: UpdateCommentInput!) {
updateComment(id: $id, input: $input) {
id
}
}
`
export const Loading = () => <div>Loading...</div>
export const Success = ({ comment }) => {
const { addMessage } = useFlash()
const [updateComment, { loading, error }] = useMutation(
UPDATE_COMMENT_MUTATION,
{
onCompleted: () => {
navigate(routes.comments())
addMessage('Comment updated.', { classes: 'rw-flash-success' })
},
}
)
const onSave = (input, id) => {
updateComment({ variables: { id, input } })
}
return (
<div className="rw-segment">
<header className="rw-segment-header">
<h2 className="rw-heading rw-heading-secondary">
Edit Comment {comment.id}
</h2>
</header>
<div className="rw-segment-main">
<CommentForm
comment={comment}
onSave={onSave}
error={error}
loading={loading}
/>
</div>
</div>
)
}

52
web/src/components/EditPartCell/EditPartCell.js
View File

@@ -1,52 +0,0 @@
import { useMutation, useFlash } from '@redwoodjs/web'
import { navigate, routes } from '@redwoodjs/router'
import PartForm from 'src/components/PartForm'
export const QUERY = gql`
query FIND_PART_BY_ID($id: String!) {
part: part(id: $id) {
id
title
description
code
mainImage
createdAt
updatedAt
userId
}
}
`
const UPDATE_PART_MUTATION = gql`
mutation UpdatePartMutation($id: String!, $input: UpdatePartInput!) {
updatePart(id: $id, input: $input) {
id
}
}
`
export const Loading = () => <div>Loading...</div>
export const Success = ({ part }) => {
const { addMessage } = useFlash()
const [updatePart, { loading, error }] = useMutation(UPDATE_PART_MUTATION, {
onCompleted: () => {
navigate(routes.parts())
addMessage('Part updated.', { classes: 'rw-flash-success' })
},
})
const onSave = (input, id) => {
updatePart({ variables: { id, input } })
}
return (
<div className="rw-segment">
<header className="rw-segment-header">
<h2 className="rw-heading rw-heading-secondary">Edit Part {part.id}</h2>
</header>
<div className="rw-segment-main">
<PartForm part={part} onSave={onSave} error={error} loading={loading} />
</div>
</div>
)
}

63
web/src/components/EditPartReactionCell/EditPartReactionCell.js
View File

@@ -1,63 +0,0 @@
import { useMutation, useFlash } from '@redwoodjs/web'
import { navigate, routes } from '@redwoodjs/router'
import PartReactionForm from 'src/components/PartReactionForm'
export const QUERY = gql`
query FIND_PART_REACTION_BY_ID($id: String!) {
partReaction: partReaction(id: $id) {
id
emote
userId
partId
createdAt
updatedAt
}
}
`
const UPDATE_PART_REACTION_MUTATION = gql`
mutation UpdatePartReactionMutation(
$id: String!
$input: UpdatePartReactionInput!
) {
updatePartReaction(id: $id, input: $input) {
id
}
}
`
export const Loading = () => <div>Loading...</div>
export const Success = ({ partReaction }) => {
const { addMessage } = useFlash()
const [updatePartReaction, { loading, error }] = useMutation(
UPDATE_PART_REACTION_MUTATION,
{
onCompleted: () => {
navigate(routes.partReactions())
addMessage('PartReaction updated.', { classes: 'rw-flash-success' })
},
}
)
const onSave = (input, id) => {
updatePartReaction({ variables: { id, input } })
}
return (
<div className="rw-segment">
<header className="rw-segment-header">
<h2 className="rw-heading rw-heading-secondary">
Edit PartReaction {partReaction.id}
</h2>
</header>
<div className="rw-segment-main">
<PartReactionForm
partReaction={partReaction}
onSave={onSave}
error={error}
loading={loading}
/>
</div>
</div>
)
}

51
web/src/components/EditUserCell/EditUserCell.js
View File

@@ -1,51 +0,0 @@
import { useMutation, useFlash } from '@redwoodjs/web'
import { navigate, routes } from '@redwoodjs/router'
import UserForm from 'src/components/UserForm'
export const QUERY = gql`
query FIND_USER_BY_ID($id: String!) {
user: user(id: $id) {
id
userName
email
createdAt
updatedAt
image
bio
}
}
`
const UPDATE_USER_MUTATION = gql`
mutation UpdateUserMutation($id: String!, $input: UpdateUserInput!) {
updateUser(id: $id, input: $input) {
id
}
}
`
export const Loading = () => <div>Loading...</div>
export const Success = ({ user }) => {
const { addMessage } = useFlash()
const [updateUser, { loading, error }] = useMutation(UPDATE_USER_MUTATION, {
onCompleted: () => {
navigate(routes.users())
addMessage('User updated.', { classes: 'rw-flash-success' })
},
})
const onSave = (input, id) => {
updateUser({ variables: { id, input } })
}
return (
<div className="rw-segment">
<header className="rw-segment-header">
<h2 className="rw-heading rw-heading-secondary">Edit User {user.id}</h2>
</header>
<div className="rw-segment-main">
<UserForm user={user} onSave={onSave} error={error} loading={loading} />
</div>
</div>
)
}

41
web/src/components/NewComment/NewComment.js
View File

@@ -1,41 +0,0 @@
import { useMutation, useFlash } from '@redwoodjs/web'
import { navigate, routes } from '@redwoodjs/router'
import CommentForm from 'src/components/CommentForm'
const CREATE_COMMENT_MUTATION = gql`
mutation CreateCommentMutation($input: CreateCommentInput!) {
createComment(input: $input) {
id
}
}
`
const NewComment = () => {
const { addMessage } = useFlash()
const [createComment, { loading, error }] = useMutation(
CREATE_COMMENT_MUTATION,
{
onCompleted: () => {
navigate(routes.comments())
addMessage('Comment created.', { classes: 'rw-flash-success' })
},
}
)
const onSave = (input) => {
createComment({ variables: { input } })
}
return (
<div className="rw-segment">
<header className="rw-segment-header">
<h2 className="rw-heading rw-heading-secondary">New Comment</h2>
</header>
<div className="rw-segment-main">
<CommentForm onSave={onSave} loading={loading} error={error} />
</div>
</div>
)
}
export default NewComment

38
web/src/components/NewPart/NewPart.js
View File

@@ -1,38 +0,0 @@
import { useMutation, useFlash } from '@redwoodjs/web'
import { navigate, routes } from '@redwoodjs/router'
import PartForm from 'src/components/PartForm'
const CREATE_PART_MUTATION = gql`
mutation CreatePartMutation($input: CreatePartInput!) {
createPart(input: $input) {
id
}
}
`
const NewPart = () => {
const { addMessage } = useFlash()
const [createPart, { loading, error }] = useMutation(CREATE_PART_MUTATION, {
onCompleted: () => {
navigate(routes.parts())
addMessage('Part created.', { classes: 'rw-flash-success' })
},
})
const onSave = (input) => {
createPart({ variables: { input } })
}
return (
<div className="rw-segment">
<header className="rw-segment-header">
<h2 className="rw-heading rw-heading-secondary">New Part</h2>
</header>
<div className="rw-segment-main">
<PartForm onSave={onSave} loading={loading} error={error} />
</div>
</div>
)
}
export default NewPart

41
web/src/components/NewPartReaction/NewPartReaction.js
View File

@@ -1,41 +0,0 @@
import { useMutation, useFlash } from '@redwoodjs/web'
import { navigate, routes } from '@redwoodjs/router'
import PartReactionForm from 'src/components/PartReactionForm'
const CREATE_PART_REACTION_MUTATION = gql`
mutation TogglePartReactionMutation($input: TogglePartReactionInput!) {
togglePartReaction(input: $input) {
id
}
}
`
const NewPartReaction = () => {
const { addMessage } = useFlash()
const [togglePartReaction, { loading, error }] = useMutation(
CREATE_PART_REACTION_MUTATION,
{
onCompleted: () => {
navigate(routes.partReactions())
addMessage('PartReaction created.', { classes: 'rw-flash-success' })
},
}
)
const onSave = (input) => {
togglePartReaction({ variables: { input } })
}
return (
<div className="rw-segment">
<header className="rw-segment-header">
<h2 className="rw-heading rw-heading-secondary">New PartReaction</h2>
</header>
<div className="rw-segment-main">
<PartReactionForm onSave={onSave} loading={loading} error={error} />
</div>
</div>
)
}
export default NewPartReaction

38
web/src/components/NewUser/NewUser.js
View File

@@ -1,38 +0,0 @@
import { useMutation, useFlash } from '@redwoodjs/web'
import { navigate, routes } from '@redwoodjs/router'
import UserForm from 'src/components/UserForm'
const CREATE_USER_MUTATION = gql`
mutation CreateUserMutation($input: CreateUserInput!) {
createUser(input: $input) {
id
}
}
`
const NewUser = () => {
const { addMessage } = useFlash()
const [createUser, { loading, error }] = useMutation(CREATE_USER_MUTATION, {
onCompleted: () => {
navigate(routes.users())
addMessage('User created.', { classes: 'rw-flash-success' })
},
})
const onSave = (input) => {
createUser({ variables: { input } })
}
return (
<div className="rw-segment">
<header className="rw-segment-header">
<h2 className="rw-heading rw-heading-secondary">New User</h2>
</header>
<div className="rw-segment-main">
<UserForm onSave={onSave} loading={loading} error={error} />
</div>
</div>
)
}
export default NewUser

111
web/src/components/Part/Part.js
View File

@@ -1,111 +0,0 @@
import { useMutation, useFlash } from '@redwoodjs/web'
import { Link, routes, navigate } from '@redwoodjs/router'
const DELETE_PART_MUTATION = gql`
mutation DeletePartMutation($id: String!) {
deletePart(id: $id) {
id
}
}
`
const jsonDisplay = (obj) => {
return (
<pre>
<code>{JSON.stringify(obj, null, 2)}</code>
</pre>
)
}
const timeTag = (datetime) => {
return (
<time dateTime={datetime} title={datetime}>
{new Date(datetime).toUTCString()}
</time>
)
}
const checkboxInputTag = (checked) => {
return <input type="checkbox" checked={checked} disabled />
}
const Part = ({ part }) => {
const { addMessage } = useFlash()
const [deletePart] = useMutation(DELETE_PART_MUTATION, {
onCompleted: () => {
navigate(routes.parts())
addMessage('Part deleted.', { classes: 'rw-flash-success' })
},
})
const onDeleteClick = (id) => {
if (confirm('Are you sure you want to delete part ' + id + '?')) {
deletePart({ variables: { id } })
}
}
return (
<>
<div className="rw-segment">
<header className="rw-segment-header">
<h2 className="rw-heading rw-heading-secondary">
Part {part.id} Detail
</h2>
</header>
<table className="rw-table">
<tbody>
<tr>
<th>Id</th>
<td>{part.id}</td>
</tr>
<tr>
<th>Title</th>
<td>{part.title}</td>
</tr>
<tr>
<th>Description</th>
<td>{part.description}</td>
</tr>
<tr>
<th>Code</th>
<td>{part.code}</td>
</tr>
<tr>
<th>Main image</th>
<td>{part.mainImage}</td>
</tr>
<tr>
<th>Created at</th>
<td>{timeTag(part.createdAt)}</td>
</tr>
<tr>
<th>Updated at</th>
<td>{timeTag(part.updatedAt)}</td>
</tr>
<tr>
<th>User id</th>
<td>{part.userId}</td>
</tr>
</tbody>
</table>
</div>
<nav className="rw-button-group">
<Link
to={routes.editPart({ id: part.id })}
className="rw-button rw-button-blue"
>
Edit
</Link>
<a
href="#"
className="rw-button rw-button-red"
onClick={() => onDeleteClick(part.id)}
>
Delete
</a>
</nav>
</>
)
}
export default Part

103
web/src/components/PartReaction/PartReaction.js
View File

@@ -1,103 +0,0 @@
import { useMutation, useFlash } from '@redwoodjs/web'
import { Link, routes, navigate } from '@redwoodjs/router'
const DELETE_PART_REACTION_MUTATION = gql`
mutation DeletePartReactionMutation($id: String!) {
deletePartReaction(id: $id) {
id
}
}
`
const jsonDisplay = (obj) => {
return (
<pre>
<code>{JSON.stringify(obj, null, 2)}</code>
</pre>
)
}
const timeTag = (datetime) => {
return (
<time dateTime={datetime} title={datetime}>
{new Date(datetime).toUTCString()}
</time>
)
}
const checkboxInputTag = (checked) => {
return <input type="checkbox" checked={checked} disabled />
}
const PartReaction = ({ partReaction }) => {
const { addMessage } = useFlash()
const [deletePartReaction] = useMutation(DELETE_PART_REACTION_MUTATION, {
onCompleted: () => {
navigate(routes.partReactions())
addMessage('PartReaction deleted.', { classes: 'rw-flash-success' })
},
})
const onDeleteClick = (id) => {
if (confirm('Are you sure you want to delete partReaction ' + id + '?')) {
deletePartReaction({ variables: { id } })
}
}
return (
<>
<div className="rw-segment">
<header className="rw-segment-header">
<h2 className="rw-heading rw-heading-secondary">
PartReaction {partReaction.id} Detail
</h2>
</header>
<table className="rw-table">
<tbody>
<tr>
<th>Id</th>
<td>{partReaction.id}</td>
</tr>
<tr>
<th>Emote</th>
<td>{partReaction.emote}</td>
</tr>
<tr>
<th>User id</th>
<td>{partReaction.userId}</td>
</tr>
<tr>
<th>Part id</th>
<td>{partReaction.partId}</td>
</tr>
<tr>
<th>Created at</th>
<td>{timeTag(partReaction.createdAt)}</td>
</tr>
<tr>
<th>Updated at</th>
<td>{timeTag(partReaction.updatedAt)}</td>
</tr>
</tbody>
</table>
</div>
<nav className="rw-button-group">
<Link
to={routes.editPartReaction({ id: partReaction.id })}
className="rw-button rw-button-blue"
>
Edit
</Link>
<a
href="#"
className="rw-button rw-button-red"
onClick={() => onDeleteClick(partReaction.id)}
>
Delete
</a>
</nav>
</>
)
}
export default PartReaction

22
web/src/components/PartReactionCell/PartReactionCell.js
View File

@@ -1,22 +0,0 @@
import PartReaction from 'src/components/PartReaction'
export const QUERY = gql`
query FIND_PART_REACTION_BY_ID($id: String!) {
partReaction: partReaction(id: $id) {
id
emote
userId
partId
createdAt
updatedAt
}
}
`
export const Loading = () => <div>Loading...</div>
export const Empty = () => <div>PartReaction not found</div>
export const Success = ({ partReaction }) => {
return <PartReaction partReaction={partReaction} />
}

83
web/src/components/PartReactionForm/PartReactionForm.js
View File

@@ -1,83 +0,0 @@
import {
Form,
FormError,
FieldError,
Label,
TextField,
Submit,
} from '@redwoodjs/forms'
const PartReactionForm = (props) => {
const onSubmit = (data) => {
props.onSave(data, props?.partReaction?.id)
}
return (
<div className="rw-form-wrapper">
<Form onSubmit={onSubmit} error={props.error}>
<FormError
error={props.error}
wrapperClassName="rw-form-error-wrapper"
titleClassName="rw-form-error-title"
listClassName="rw-form-error-list"
/>
<Label
name="emote"
className="rw-label"
errorClassName="rw-label rw-label-error"
>
Emote
</Label>
<TextField
name="emote"
defaultValue={props.partReaction?.emote}
className="rw-input"
errorClassName="rw-input rw-input-error"
validation={{ required: true }}
/>
<FieldError name="emote" className="rw-field-error" />
<Label
name="userId"
className="rw-label"
errorClassName="rw-label rw-label-error"
>
User id
</Label>
<TextField
name="userId"
defaultValue={props.partReaction?.userId}
className="rw-input"
errorClassName="rw-input rw-input-error"
validation={{ required: true }}
/>
<FieldError name="userId" className="rw-field-error" />
<Label
name="partId"
className="rw-label"
errorClassName="rw-label rw-label-error"
>
Part id
</Label>
<TextField
name="partId"
defaultValue={props.partReaction?.partId}
className="rw-input"
errorClassName="rw-input rw-input-error"
validation={{ required: true }}
/>
<FieldError name="partId" className="rw-field-error" />
<div className="rw-button-group">
<Submit disabled={props.loading} className="rw-button rw-button-blue">
Save
</Submit>
</div>
</Form>
</div>
)
}
export default PartReactionForm

112
web/src/components/PartReactions/PartReactions.js
View File

@@ -1,112 +0,0 @@
import { useMutation, useFlash } from '@redwoodjs/web'
import { Link, routes } from '@redwoodjs/router'
const DELETE_PART_REACTION_MUTATION = gql`
mutation DeletePartReactionMutation($id: String!) {
deletePartReaction(id: $id) {
id
}
}
`
const MAX_STRING_LENGTH = 150
const truncate = (text) => {
let output = text
if (text && text.length > MAX_STRING_LENGTH) {
output = output.substring(0, MAX_STRING_LENGTH) + '...'
}
return output
}
const jsonTruncate = (obj) => {
return truncate(JSON.stringify(obj, null, 2))
}
const timeTag = (datetime) => {
return (
<time dateTime={datetime} title={datetime}>
{new Date(datetime).toUTCString()}
</time>
)
}
const checkboxInputTag = (checked) => {
return <input type="checkbox" checked={checked} disabled />
}
const PartReactionsList = ({ partReactions }) => {
const { addMessage } = useFlash()
const [deletePartReaction] = useMutation(DELETE_PART_REACTION_MUTATION, {
onCompleted: () => {
addMessage('PartReaction deleted.', { classes: 'rw-flash-success' })
},
})
const onDeleteClick = (id) => {
if (confirm('Are you sure you want to delete partReaction ' + id + '?')) {
deletePartReaction({
variables: { id },
refetchQueries: ['PART_REACTIONS'],
})
}
}
return (
<div className="rw-segment rw-table-wrapper-responsive">
<table className="rw-table">
<thead>
<tr>
<th>Id</th>
<th>Emote</th>
<th>User id</th>
<th>Part id</th>
<th>Created at</th>
<th>Updated at</th>
<th>&nbsp;</th>
</tr>
</thead>
<tbody>
{partReactions.map((partReaction) => (
<tr key={partReaction.id}>
<td>{truncate(partReaction.id)}</td>
<td>{truncate(partReaction.emote)}</td>
<td>{truncate(partReaction.userId)}</td>
<td>{truncate(partReaction.partId)}</td>
<td>{timeTag(partReaction.createdAt)}</td>
<td>{timeTag(partReaction.updatedAt)}</td>
<td>
<nav className="rw-table-actions">
<Link
to={routes.partReaction({ id: partReaction.id })}
title={'Show partReaction ' + partReaction.id + ' detail'}
className="rw-button rw-button-small"
>
Show
</Link>
<Link
to={routes.editPartReaction({ id: partReaction.id })}
title={'Edit partReaction ' + partReaction.id}
className="rw-button rw-button-small rw-button-blue"
>
Edit
</Link>
<a
href="#"
title={'Delete partReaction ' + partReaction.id}
className="rw-button rw-button-small rw-button-red"
onClick={() => onDeleteClick(partReaction.id)}
>
Delete
</a>
</nav>
</td>
</tr>
))}
</tbody>
</table>
</div>
)
}
export default PartReactionsList

33
web/src/components/PartReactionsCell/PartReactionsCell.js
View File

@@ -1,33 +0,0 @@
import { Link, routes } from '@redwoodjs/router'
import PartReactions from 'src/components/PartReactions'
export const QUERY = gql`
query PART_REACTIONS {
partReactions {
id
emote
userId
partId
createdAt
updatedAt
}
}
`
export const Loading = () => <div>Loading...</div>
export const Empty = () => {
return (
<div className="rw-text-center">
{'No partReactions yet. '}
<Link to={routes.newPartReaction()} className="rw-link">
{'Create one?'}
</Link>
</div>
)
}
export const Success = ({ partReactions }) => {
return <PartReactions partReactions={partReactions} />
}

107
web/src/components/User/User.js
View File

@@ -1,107 +0,0 @@
import { useMutation, useFlash } from '@redwoodjs/web'
import { Link, routes, navigate } from '@redwoodjs/router'
const DELETE_USER_MUTATION = gql`
mutation DeleteUserMutation($id: String!) {
deleteUser(id: $id) {
id
}
}
`
const jsonDisplay = (obj) => {
return (
<pre>
<code>{JSON.stringify(obj, null, 2)}</code>
</pre>
)
}
const timeTag = (datetime) => {
return (
<time dateTime={datetime} title={datetime}>
{new Date(datetime).toUTCString()}
</time>
)
}
const checkboxInputTag = (checked) => {
return <input type="checkbox" checked={checked} disabled />
}
const User = ({ user }) => {
const { addMessage } = useFlash()
const [deleteUser] = useMutation(DELETE_USER_MUTATION, {
onCompleted: () => {
navigate(routes.users())
addMessage('User deleted.', { classes: 'rw-flash-success' })
},
})
const onDeleteClick = (id) => {
if (confirm('Are you sure you want to delete user ' + id + '?')) {
deleteUser({ variables: { id } })
}
}
return (
<>
<div className="rw-segment">
<header className="rw-segment-header">
<h2 className="rw-heading rw-heading-secondary">
User {user.id} Detail
</h2>
</header>
<table className="rw-table">
<tbody>
<tr>
<th>Id</th>
<td>{user.id}</td>
</tr>
<tr>
<th>User name</th>
<td>{user.userName}</td>
</tr>
<tr>
<th>Email</th>
<td>{user.email}</td>
</tr>
<tr>
<th>Created at</th>
<td>{timeTag(user.createdAt)}</td>
</tr>
<tr>
<th>Updated at</th>
<td>{timeTag(user.updatedAt)}</td>
</tr>
<tr>
<th>Image</th>
<td>{user.image}</td>
</tr>
<tr>
<th>Bio</th>
<td>{user.bio}</td>
</tr>
</tbody>
</table>
</div>
<nav className="rw-button-group">
<Link
to={routes.editUser({ id: user.id })}
className="rw-button rw-button-blue"
>
Edit
</Link>
<a
href="#"
className="rw-button rw-button-red"
onClick={() => onDeleteClick(user.id)}
>
Delete
</a>
</nav>
</>
)
}
export default User

23
web/src/components/UserCell/UserCell.js
View File

@@ -1,23 +0,0 @@
import User from 'src/components/User'
export const QUERY = gql`
query FIND_USER_BY_ID($id: String!) {
user: user(id: $id) {
id
userName
email
createdAt
updatedAt
image
bio
}
}
`
export const Loading = () => <div>Loading...</div>
export const Empty = () => <div>User not found</div>
export const Success = ({ user }) => {
return <User user={user} />
}

99
web/src/components/UserForm/UserForm.js
View File

@@ -1,99 +0,0 @@
import {
Form,
FormError,
FieldError,
Label,
TextField,
Submit,
} from '@redwoodjs/forms'
const UserForm = (props) => {
const onSubmit = (data) => {
props.onSave(data, props?.user?.id)
}
return (
<div className="rw-form-wrapper">
<Form onSubmit={onSubmit} error={props.error}>
<FormError
error={props.error}
wrapperClassName="rw-form-error-wrapper"
titleClassName="rw-form-error-title"
listClassName="rw-form-error-list"
/>
<Label
name="userName"
className="rw-label"
errorClassName="rw-label rw-label-error"
>
User name
</Label>
<TextField
name="userName"
defaultValue={props.user?.userName}
className="rw-input"
errorClassName="rw-input rw-input-error"
validation={{ required: true }}
/>
<FieldError name="userName" className="rw-field-error" />
<Label
name="email"
className="rw-label"
errorClassName="rw-label rw-label-error"
>
Email
</Label>
<TextField
name="email"
defaultValue={props.user?.email}
className="rw-input"
errorClassName="rw-input rw-input-error"
validation={{ required: true }}
/>
<FieldError name="email" className="rw-field-error" />
<Label
name="image"
className="rw-label"
errorClassName="rw-label rw-label-error"
>
Image
</Label>
<TextField
name="image"
defaultValue={props.user?.image}
className="rw-input"
errorClassName="rw-input rw-input-error"
validation={{ required: true }}
/>
<FieldError name="image" className="rw-field-error" />
<Label
name="bio"
className="rw-label"
errorClassName="rw-label rw-label-error"
>
Bio
</Label>
<TextField
name="bio"
defaultValue={props.user?.bio}
className="rw-input"
errorClassName="rw-input rw-input-error"
validation={{ required: true }}
/>
<FieldError name="bio" className="rw-field-error" />
<div className="rw-button-group">
<Submit disabled={props.loading} className="rw-button rw-button-blue">
Save
</Submit>
</div>
</Form>
</div>
)
}
export default UserForm