@spacemade/ui 0.0.1

package/src/pages/admin/versions/[id].tsx

@@ -0,0 +1,211 @@
+import { useEffect } from 'react'
+import type { GetServerSideProps } from 'next'
+import Link from 'next/link'
+import { useDisclosure } from '@chakra-ui/react'
+import Badge from '@components/common/badge/Badge'
+import Button from '@components/common/button/Button'
+import { AdminLayout } from '@components/common/layout/admin/AdminLayout'
+import WithAuth from '@components/hoc/WithAuth'
+import { UpdateProductVersionModal } from '@components/product/modal/UpdateProductVersionModal'
+import { APIHelpers } from '@helpers/api'
+import { FullDateAndTimeFormat } from '@helpers/date'
+import { useRouter } from '@lib/next-router'
+import { ProductVersionStatus } from '@store/model'
+import { useGetOneProductVersionQuery } from '@store/slice/api/productVersionsApiSlice'
+
+const statusColor = (status: ProductVersionStatus) => {
+  if (status === ProductVersionStatus.Active) return 'success'
+  if (status === ProductVersionStatus.Deprecated) return 'secondary'
+  return 'warning'
+}
+
+const VersionDetail = () => {
+  const {
+    query: { id },
+    push: redirect,
+  } = useRouter()
+  const editModal = useDisclosure()
+  const createModal = useDisclosure()
+  const { data: version, isError } = useGetOneProductVersionQuery(
+    {
+      id: id?.toString() as string,
+      isAdmin: true,
+    },
+    { skip: !id }
+  )
+
+  useEffect(() => {
+    if (isError) {
+      redirect('/admin/versions')
+    }
+  }, [isError, redirect])
+
+  if (!version) return null
+
+  const product = version.product
+
+  return (
+    <AdminLayout>
+      <div className='d-flex align-items-start justify-content-between gap-3 mb-4'>
+        <div>
+          <div className='mb-2'>
+            <Link href='/admin/versions' className='text-primary text-decoration-none'>
+              Versions
+            </Link>
+            {product ? (
+              <>
+                <span className='mx-2 text-muted'>/</span>
+                <Link
+                  href={`/admin/products/${product.id}`}
+                  className='text-primary text-decoration-none'
+                >
+                  {product.name}
+                </Link>
+              </>
+            ) : null}
+          </div>
+          <h1 className='mb-0'>{version.name}</h1>
+        </div>
+
+        {product ? (
+          <div className='d-flex gap-2'>
+            <Button color='primary' className='text-white' onClick={editModal.onOpen}>
+              Edit
+            </Button>
+            <Button color='primary' className='text-white' onClick={createModal.onOpen}>
+              Add Version
+            </Button>
+          </div>
+        ) : null}
+      </div>
+
+      <section className='border rounded bg-white mb-4'>
+        <div className='border-bottom px-4 py-3'>
+          <h2 className='h5 mb-0'>Version summary</h2>
+        </div>
+        <div className='row g-0 px-4 py-3'>
+          <div className='col-md-4 py-2'>
+            <div className='text-muted small'>Version</div>
+            <div>{version.name}</div>
+          </div>
+          <div className='col-md-4 py-2'>
+            <div className='text-muted small'>Product</div>
+            <div>
+              {product ? (
+                <Link href={`/admin/products/${product.id}`}>{product.name}</Link>
+              ) : (
+                version.productId
+              )}
+            </div>
+          </div>
+          <div className='col-md-4 py-2'>
+            <div className='text-muted small'>Status</div>
+            <Badge
+              className='px-3'
+              bgColor={statusColor(version.versionStatus)}
+              textColor={version.versionStatus === ProductVersionStatus.Active ? 'white' : 'dark'}
+              label={version.versionStatus}
+            />
+          </div>
+          <div className='col-md-4 py-2'>
+            <div className='text-muted small'>Rank</div>
+            <div>{version.rank}</div>
+          </div>
+          <div className='col-md-4 py-2'>
+            <div className='text-muted small'>Created</div>
+            <div>{FullDateAndTimeFormat(version.createdAt)}</div>
+          </div>
+          <div className='col-md-4 py-2'>
+            <div className='text-muted small'>Modified</div>
+            <div>{FullDateAndTimeFormat(version.updatedAt)}</div>
+          </div>
+        </div>
+      </section>
+
+      <section className='border rounded bg-white mb-4'>
+        <div className='border-bottom px-4 py-3'>
+          <h2 className='h5 mb-0'>Version information</h2>
+        </div>
+        <div className='px-4 py-3'>
+          <div className='mb-4'>
+            <div className='text-muted small'>Description</div>
+            <div style={{ whiteSpace: 'pre-wrap' }}>{version.description || '-'}</div>
+          </div>
+          <div>
+            <div className='text-muted small'>Resource URL</div>
+            <div className='text-break'>{version.resourceUrl || '-'}</div>
+          </div>
+        </div>
+      </section>
+
+      <section className='border rounded bg-white mb-4'>
+        <div className='border-bottom px-4 py-3'>
+          <h2 className='h5 mb-0'>Resource spec</h2>
+        </div>
+        <div className='px-4 py-3'>
+          <pre className='mb-0' style={{ whiteSpace: 'pre-wrap' }}>{version.resourceSpec || '-'}</pre>
+        </div>
+      </section>
+
+      <section className='border rounded bg-white'>
+        <div className='border-bottom px-4 py-3'>
+          <h2 className='h5 mb-0'>Resource params</h2>
+        </div>
+        <div className='px-4 py-3'>
+          <pre className='mb-0' style={{ whiteSpace: 'pre-wrap' }}>{version.resourceParams || '-'}</pre>
+        </div>
+      </section>
+
+      {product ? (
+        <>
+          <UpdateProductVersionModal
+            version={version}
+            product={product}
+            isOpen={editModal.isOpen}
+            onClose={editModal.onClose}
+          />
+          <UpdateProductVersionModal
+            version={null}
+            product={product}
+            isOpen={createModal.isOpen}
+            onClose={createModal.onClose}
+          />
+        </>
+      ) : null}
+    </AdminLayout>
+  )
+}
+
+export const getServerSideProps: GetServerSideProps = async (context) => {
+  const id = context.query.id
+  const data = await APIHelpers.get(`/admin/product-versions/${id}`, {
+    Cookie: context.req.headers.cookie || '',
+  })
+
+  const version:
+    | {
+        name: string
+        description?: string
+      }
+    | undefined = data.version
+
+  if (!version) {
+    return {
+      redirect: {
+        destination: '/admin/versions',
+        permanent: false,
+      },
+    }
+  }
+
+  return {
+    props: {
+      pageTitle: `Version: ${version.name}`,
+      pageDescription: version.description || '',
+      isAppNav: true,
+      showDetailTopNav: true,
+    },
+  }
+}
+
+export default WithAuth(VersionDetail, { needSystemAdminRole: true })

package/src/pages/admin/versions/index.tsx

@@ -0,0 +1,25 @@
+import AppPageTitle from '@components/common/header/AppPageTitle'
+import { AdminLayout } from '@components/common/layout/admin/AdminLayout'
+import WithAuth from '@components/hoc/WithAuth'
+import { ProductVersionsAdminTable } from '@components/product/table/ProductVersionsAdminTable'
+
+const VersionList = () => {
+  return (
+    <AdminLayout>
+      <AppPageTitle title='Versions' />
+      <div className='my-4'>
+        <ProductVersionsAdminTable />
+      </div>
+    </AdminLayout>
+  )
+}
+
+VersionList.getInitialProps = async () => {
+  return {
+    pageTitle: 'Versions',
+    isAppNav: true,
+    showDetailTopNav: true,
+  }
+}
+
+export default WithAuth(VersionList, { needSystemAdminRole: true })

package/src/pages/blog/[postSlug].tsx

@@ -0,0 +1,106 @@
+import type { NextPage } from 'next'
+import SideNavLayout from '@components/common/layout/SideNavLayout'
+import { PostDetailPage } from '@components/post/block/PostDetailPage'
+import { BlogCategoriesSideNav } from '@components/post/nav/BlogCategoriesSideNav'
+
+import { getOnePost, getRunningQueriesThunk } from '@store/slice/api/postApiSlice'
+import { wrapper } from '@store/store'
+import { keysToCamel } from '@helpers/data-transform'
+import { generatePageDescription } from '@helpers/string'
+import { ApiEntityNames } from '@helpers/types'
+
+type BlogPostDetailProps = {
+  isPreview: boolean
+  categorySlug?: string | null
+}
+
+const toJsonSafe = <T,>(value: T): T =>
+  JSON.parse(JSON.stringify(value)) as T
+
+const BlogPostDetail: NextPage<BlogPostDetailProps> = ({ isPreview, categorySlug }) => {
+  return (
+    <SideNavLayout
+      sidebarTopContent={() => (
+      <>
+        <h2 className="sidebar-heading">Blog</h2>
+      </>
+      )}
+      sidebarContent={(isCollapsed) =>
+      !isCollapsed ? (
+        <BlogCategoriesSideNav parentPath="blog" activeSlug={categorySlug} />
+      ) : null
+      }
+    >
+      <div className={!isPreview ? 'mt-3' : ''}>
+      <PostDetailPage isPreview={isPreview} />
+      </div>
+    </SideNavLayout>
+  )
+}
+
+export const getServerSideProps = wrapper.getServerSideProps(
+  (store) => async (context) => {
+    const slug = context.query.postSlug
+    const isPreview = context.query.preview === 'true'
+
+    if (!slug) {
+      return { redirect: { destination: '/blog', permanent: false } }
+    }
+
+    const ars = {
+      slug: slug?.toString(),
+      getForAccount: isPreview,
+      entities: [
+        ApiEntityNames.post_category,
+        ApiEntityNames.owner,
+        ApiEntityNames.tags,
+        ApiEntityNames.product,
+        ApiEntityNames.provider,
+        ApiEntityNames.provider_model,
+      ],
+      cookie: context.req.headers.cookie || '',
+    }
+
+    store.dispatch(getOnePost.initiate(ars))
+    await Promise.all(store.dispatch(getRunningQueriesThunk()))
+
+    const { data: post } = getOnePost.select(ars)(store.getState())
+
+    if (!post) {
+      return { redirect: { destination: '/blog', permanent: false } }
+    }
+
+    const categorySlug = post.categories?.[0]?.slug || null
+    const categoryName = post.categories?.[0]?.name || null
+    const rawAuthor = post.owner ? keysToCamel(post.owner) : null
+    const author = rawAuthor ? toJsonSafe(rawAuthor) : null
+
+    return {
+      props: {
+        isPreview,
+        categorySlug,
+        pageTitle: post.name,
+        pageDescription:
+          post.intro || generatePageDescription(`<body>${post.content}</body>` || ''),
+        pageSocialImage: post.featuredMedia?.media.sourceUrl || '',
+        furlImageAltText: post.featuredMedia?.media.details?.altText || '',
+        articleProps: {
+          articleSlug: post.slug,
+          content: post.content,
+          categoryName,
+          publishedTime: post.createdAt,
+          modifiedTime: post.updatedAt,
+          author,
+          tags: post.tags?.map((tag) => tag.name) || [],
+          articleReadTime: `${post.minutesToRead} minute${post.minutesToRead !== 1 ? 's' : ''}`,
+        },
+        includeSmallFooter: true,
+        breadcrumbSchema: [
+          { position: 2, name: post.name, item: `/${post.slug}` },
+        ],
+      },
+    }
+  }
+)
+
+export default BlogPostDetail

package/src/pages/blog/c/[categorySlug]/index.tsx

@@ -0,0 +1,126 @@
+import type { NextPage } from 'next'
+import SideNavLayout from '@components/common/layout/SideNavLayout'
+import { BlogCategoriesSideNav } from '@components/post/nav/BlogCategoriesSideNav'
+import { PostList } from '@components/post/block/PostList'
+
+import { Category } from '@store/model'
+import {
+  getApprovedPosts,
+  getRunningQueriesThunk,
+} from '@store/slice/api/postApiSlice'
+import { wrapper } from '@store/store'
+import { APIHelpers } from '@helpers/api'
+import { keysToCamel } from '@helpers/data-transform'
+import {
+  getCorrectPageLimitNumber,
+  getCorrectPageNumber,
+} from '@helpers/data-transform/paging'
+import { PageProps } from '@helpers/types/page-props'
+
+const BlogCategory: NextPage<PageProps & { category: Category }> = ({
+  category,
+}) => {
+  return (
+    <SideNavLayout
+      sidebarTopContent={() => (
+        <>
+          <h2 className="sidebar-heading">Blog</h2>
+        </>
+      )}
+      sidebarContent={(isCollapsed) =>
+        !isCollapsed ? <BlogCategoriesSideNav parentPath="blog" /> : null
+      }
+    >
+      <PostList categoryId={category.id} hideCategoryAccordion />
+    </SideNavLayout>
+  )
+}
+
+export const getServerSideProps = wrapper.getServerSideProps(
+  (store) => async (context) => {
+    const nameLike = context.query.nameLike
+    const slug = context.query.categorySlug
+    const page = context.query.page
+    const pageNumber = getCorrectPageNumber(page)
+    const limit = context.query.limit
+    const limitNumber = getCorrectPageLimitNumber(limit, 13)
+
+    const data = await APIHelpers.get(`/categories/post/${slug}`, {
+      Cookie: context.req.headers.cookie || '',
+    })
+
+    const category:
+      | {
+          id: string
+          slug: string
+          name: string
+          description: string | null
+        }
+      | undefined = data.category
+
+    if (!category) {
+      return {
+        redirect: {
+          destination: '/blog',
+          permanent: false,
+        },
+      }
+    }
+
+    const cookie = context.req.headers.cookie || ''
+
+    store.dispatch(
+      getApprovedPosts.initiate({
+        nameLike: nameLike?.toString() || '',
+        categoryIds: [category.id],
+        limit: limitNumber,
+        page: pageNumber,
+        includeAds: true,
+        getForTagOnly: false,
+        cookie,
+      })
+    )
+
+    store.dispatch(
+      getApprovedPosts.initiate({
+        isFeatured: true,
+        categoryIds: [category.id],
+        limit: 1,
+        cookie,
+      })
+    )
+
+    await Promise.all(store.dispatch(getRunningQueriesThunk()))
+
+    const title = page
+      ? `Posts about ${category.name} - Page ${page}`
+      : `Posts about ${category.name}`
+
+    return {
+      props: {
+        pageTitle: title,
+        pageDescription: `Explore a wide range of informative articles on ${
+          category.name
+        }, insights, and industry updates. Stay informed and ahead of the curve with our diverse collection of news and posts covering the latest trends and developments in the industry. ${
+          page ? 'Page - ' + page : ''
+        }`,
+        category: keysToCamel(category),
+        breadcrumbSchema: [
+          {
+            position: 2,
+            name: `Blog`,
+            item: `/blog`,
+          },
+          {
+            position: 3,
+            name: title,
+            item: `/blog/${category.slug}`,
+          },
+        ],
+        includeSmallFooter: true,
+      },
+    }
+  }
+)
+
+export default BlogCategory

package/src/pages/blog/index.tsx

@@ -0,0 +1,37 @@
+import type { NextPage } from 'next'
+import SideNavLayout from '@components/common/layout/SideNavLayout'
+import { PostList } from '@components/post/block/PostList'
+import { BlogCategoriesSideNav } from '@components/post/nav/BlogCategoriesSideNav'
+import { useUserAuthContext } from '@context'
+
+type NewsListProps = {
+  isLoggedIn?: boolean
+}
+
+const NewsList: NextPage<NewsListProps> = ({ isLoggedIn }) => {
+  const { user } = useUserAuthContext()
+  const isUserLoggedIn = typeof isLoggedIn === 'boolean' ? isLoggedIn : Boolean(user)
+
+  return (
+    <SideNavLayout
+      sidebarTopContent={() => (
+        <>
+          <h2 className="sidebar-heading">Blog</h2>
+        </>
+      )}
+      sidebarContent={(isCollapsed) =>
+        !isCollapsed ? <BlogCategoriesSideNav parentPath="blog" /> : null
+      }
+    >
+      <div className={!isUserLoggedIn ? 'mt-3' : ''}>
+        <PostList hideCategoryAccordion />
+      </div>
+    </SideNavLayout>
+  )
+}
+
+NewsList.getInitialProps = async () => {
+  return { pageTitle: 'Blog' }
+}
+
+export default NewsList