Attempt to at move app into app sub dir

2021-05-01 07:32:21 +10:00
parent 9db76458d1
commit 78677a99f8
220 changed files with 1 additions and 1 deletions
--- a/app/web/src/components/Users/Users.js
+++ b/app/web/src/components/Users/Users.js
@@ -0,0 +1,97 @@
+import { useMutation, useFlash } from '@redwoodjs/web'
+import { Link, routes } from '@redwoodjs/router'
+
+const DELETE_USER_MUTATION = gql`
+  mutation DeleteUserMutation($id: String!) {
+    deleteUser(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 UsersList = ({ users }) => {
+  const { addMessage } = useFlash()
+  const [deleteUser] = useMutation(DELETE_USER_MUTATION, {
+    onCompleted: () => {
+      addMessage('User deleted.', { classes: 'rw-flash-success' })
+    },
+  })
+
+  const onDeleteClick = (id) => {
+    if (confirm('Are you sure you want to delete user ' + id + '?')) {
+      deleteUser({ variables: { id }, refetchQueries: ['USERS'] })
+    }
+  }
+
+  return (
+    <div className="rw-segment rw-table-wrapper-responsive">
+      <table className="rw-table">
+        <thead>
+          <tr>
+            <th>Id</th>
+            <th>User name</th>
+            <th>Email</th>
+            <th>Created at</th>
+            <th>Updated at</th>
+            <th>Image</th>
+            <th>Bio</th>
+            <th>&nbsp;</th>
+          </tr>
+        </thead>
+        <tbody>
+          {users.map((user) => (
+            <tr key={user.id}>
+              <td>{truncate(user.id)}</td>
+              <td>{truncate(user.userName)}</td>
+              <td>{truncate(user.email)}</td>
+              <td>{timeTag(user.createdAt)}</td>
+              <td>{timeTag(user.updatedAt)}</td>
+              <td>{truncate(user.image)}</td>
+              <td>{truncate(user.bio)}</td>
+              <td>
+                <nav className="rw-table-actions">
+                  <a
+                    href="#"
+                    title={'Delete user ' + user.id}
+                    className="rw-button rw-button-small rw-button-red"
+                    onClick={() => onDeleteClick(user.id)}
+                  >
+                    Delete
+                  </a>
+                </nav>
+              </td>
+            </tr>
+          ))}
+        </tbody>
+      </table>
+    </div>
+  )
+}
+
+export default UsersList