👨🏻‍💼 Build JAdmin: Journaly Admin Tools

packages/web/components/Dashboard/JAdmin/JAdmin.tsx

@@ -0,0 +1,118 @@
+import React from 'react'
+import Link from 'next/link'
+import theme from '@/theme'
+import { useUsersQuery, UserWithLanguagesFragmentFragment as UserType } from '@/generated/graphql'
+import Button, { ButtonVariant } from '@/components/Button'
+
+type UserInfoProps = {
+  user: UserType
+}
+
+const UserInfo: React.FC<UserInfoProps> = ({ user }) => {
+  return (
+    <tr>
+      <td className="id-col">
+        <Link href={`/dashboard/jadmin/posts?id=${user.id}`}>
+          <a className="j-link">{user.id}</a>
+        </Link>
+      </td>
+      <td>{user.handle}</td>
+      <td>{user.name}</td>
+      <td>{user.email}</td>
+      <td>{user.userRole}</td>
+      <td>
+        <Button className="user-action-btn" variant={ButtonVariant.Link}>
+          Update
+        </Button>
+      </td>
+      <style jsx>{`
+        td {
+          border-bottom: 1px solid #ededed;
+          border-right: 1px solid #ededed;
+          position: relative;
+          padding: 4px 12px;
+        }
+
+        td:last-child {
+          border-right: none;
+          width: 150px;
+        }
+
+        td:last-child :global(.user-action-btn) {
+          width: 100%;
+        }
+
+        .id-col {
+          text-align: center;
+        }
+      `}</style>
+    </tr>
+  )
+}
+
+const JAdmin = () => {
+  const { data } = useUsersQuery()
+
+  return (
+    <div>
+      <div>
+        <h2>Manage Users</h2>
+        <table>
+          <thead>
+            <tr>
+              <th>ID</th>
+              <th>Handle</th>
+              <th>Name</th>
+              <th>Email</th>
+              <th>Permissions</th>
+              <th>⬇︎</th>
+            </tr>
+          </thead>
+          <tbody>
+            {data?.users.map((user) => (
+              <UserInfo user={user} key={user.id} />
+            ))}
+          </tbody>
+        </table>
+      </div>
+      <style jsx>{`
+        h2 {
+          font-size: 32px;
+          lint-height: 40px;
+          margin-bottom: 40px;
+        }
+
+        table {
+          background-color: ${theme.colors.white};
+          border-spacing: 0;
+          width: 100%;
+          border: 1px solid #ededed;
+        }
+
+        thead {
+          font-size: 10px;
+          font-weight: 700;
+        }
+
+        th {
+          border-bottom: 1px solid #ededed;
+          border-right: 1px solid #ededed;
+          position: relative;
+          padding: 5px;
+          text-transform: uppercase;
+        }
+
+        th:last-child {
+          border-right: none;
+          width: 150px;
+        }
+
+        tr:hover {
+          background-color: #e8f4f8;
+        }
+      `}</style>
+    </div>
+  )
+}
+
+export default JAdmin

packages/web/components/Dashboard/JAdmin/JAdminPosts.tsx

@@ -0,0 +1,130 @@
+import React from 'react'
+import theme from '@/theme'
+import {
+  PostCardFragmentFragment as PostType,
+  usePostsQuery,
+  PostStatus,
+  useUserByIdQuery,
+} from '@/generated/graphql'
+import Button, { ButtonVariant } from '@/components/Button'
+import { useRouter } from 'next/router'
+
+type PostInfoProps = {
+  post: PostType
+}
+
+const PostInfo: React.FC<PostInfoProps> = ({ post }) => {
+  return (
+    <tr>
+      <td className="id-col">{post.id}</td>
+      <td>{post.title}</td>
+      <td>{post.createdAt}</td>
+      <td>
+        <Button className="user-action-btn" variant={ButtonVariant.Link}>
+          Update
+        </Button>
+      </td>
+      <style jsx>{`
+        td {
+          border-bottom: 1px solid #ededed;
+          border-right: 1px solid #ededed;
+          position: relative;
+          padding: 4px 12px;
+        }
+
+        td:last-child {
+          border-right: none;
+          width: 150px;
+        }
+
+        td:last-child :global(.user-action-btn) {
+          width: 100%;
+        }
+
+        .id-col {
+          text-align: center;
+        }
+      `}</style>
+    </tr>
+  )
+}
+
+const JAdminPosts = () => {
+  const router = useRouter()
+  const authorIdParam = router.query.id as string
+  const authorId = parseInt(authorIdParam, 10)
+
+  const { data: authorData } = useUserByIdQuery({
+    variables: {
+      id: authorId,
+    },
+  })
+
+  const { data } = usePostsQuery({
+    variables: {
+      first: 10,
+      skip: 0,
+      authorId,
+      status: PostStatus.Published,
+    },
+  })
+
+  return (
+    <div>
+      <div>
+        <h2>Manage Posts By: {authorData?.userById.handle}</h2>
+        <table>
+          <thead>
+            <tr>
+              <th>ID</th>
+              <th>Title</th>
+              <th>Created At</th>
+              <th>⬇︎</th>
+            </tr>
+          </thead>
+          <tbody>
+            {data?.posts && data.posts.posts.map((post) => <PostInfo post={post} key={post.id} />)}
+          </tbody>
+        </table>
+      </div>
+      <style jsx>{`
+        h2 {
+          font-size: 32px;
+          lint-height: 40px;
+          margin-bottom: 40px;
+        }
+
+        table {
+          background-color: ${theme.colors.white};
+          border-spacing: 0;
+          width: 100%;
+          border: 1px solid #ededed;
+        }
+
+        thead {
+          font-size: 10px;
+          font-weight: 700;
+        }
+
+        th {
+          border-bottom: 1px solid #ededed;
+          border-right: 1px solid #ededed;
+          position: relative;
+          padding: 5px;
+          text-transform: uppercase;
+        }
+
+        th:last-child {
+          border-right: none;
+          width: 150px;
+        }
+
+        tr:hover {
+          background-color: #e8f4f8;
+        }
+      `}</style>
+    </div>
+  )
+}
+
+export default JAdminPosts

packages/web/components/Dashboard/JAdmin/index.ts

@@ -0,0 +1 @@
+export { default } from './JAdmin'

packages/web/generated/graphql.tsx

@@ -1551,11 +1551,7 @@ export type UserStatsQuery = { __typename?: 'Query' } & {
 export type UsersQueryVariables = Exact<{ [key: string]: never }>
 
 export type UsersQuery = { __typename?: 'Query' } & {
-  users: Array<
-    { __typename?: 'User' } & Pick<User, 'id' | 'name' | 'email'> & {
-        posts: Array<{ __typename?: 'Post' } & Pick<Post, 'id' | 'title' | 'body'>>
-      }
-  >
+  users: Array<{ __typename?: 'User' } & UserWithLanguagesFragmentFragment>
 }
 
 export const UserFragmentFragmentDoc = gql`
@@ -5005,16 +5001,10 @@ export type UserStatsQueryResult = ApolloReactCommon.QueryResult<
 export const UsersDocument = gql`
   query users {
     users {
-      id
-      name
-      email
-      posts {
-        id
-        title
-        body
-      }
+      ...UserWithLanguagesFragment
     }
   }
+  ${UserWithLanguagesFragmentFragmentDoc}
 `
 
 /**

packages/web/graphql/user/users.graphql

@@ -1,12 +1,5 @@
 query users {
   users {
-    id
-    name
-    email
-    posts {
-      id
-      title
-      body
-    }
+    ...UserWithLanguagesFragment
   }
 }

packages/web/pages/dashboard/jadmin/index.tsx

@@ -0,0 +1,28 @@
+import React from 'react'
+import { NextPage } from 'next'
+// import AuthGate from '@/components/AuthGate'
+import JAdmin from '@/components/Dashboard/JAdmin'
+import { withApollo } from '@/lib/apollo'
+import DashboardLayout from '@/components/Layouts/DashboardLayout'
+
+type InitialProps = {
+  namespacesRequired: string[]
+}
+
+const JAdminPage: NextPage<InitialProps> = () => {
+  return (
+    <>
+      <DashboardLayout>
+        <JAdmin />
+      </DashboardLayout>
+    </>
+  )
+}
+
+JAdminPage.getInitialProps = async () => {
+  return {
+    namespacesRequired: ['common'],
+  }
+}
+
+export default withApollo(JAdminPage)

packages/web/pages/dashboard/jadmin/posts.tsx

@@ -0,0 +1,28 @@
+import React from 'react'
+import { NextPage } from 'next'
+// import AuthGate from '@/components/AuthGate'
+import JAdminPosts from '@/components/Dashboard/JAdmin/JAdminPosts'
+import { withApollo } from '@/lib/apollo'
+import DashboardLayout from '@/components/Layouts/DashboardLayout'
+
+type InitialProps = {
+  namespacesRequired: string[]
+}
+
+const JAdminPostsPage: NextPage<InitialProps> = () => {
+  return (
+    <>
+      <DashboardLayout>
+        <JAdminPosts />
+      </DashboardLayout>
+    </>
+  )
+}
+
+JAdminPostsPage.getInitialProps = async () => {
+  return {
+    namespacesRequired: ['common'],
+  }
+}
+
+export default withApollo(JAdminPostsPage)

packages/web/pages/dashboard/my-feed.tsx

@@ -9,7 +9,7 @@ import AuthGate from '@/components/AuthGate'
 import WelcomeModal from '@/components/Modals/WelcomeModal'
 import { InitialSearchFilters } from '@/components/Dashboard/MyFeed'
 
-interface InitialProps {
+type InitialProps = {
   namespacesRequired: string[]
   initialSearchFilters: InitialSearchFilters | null
 }