✨ Improve boards page, show if Public/Restricted

public/locales/en/common.json

@@ -51,5 +51,7 @@
   "attributes": {
     "width": "Width",
     "height": "Height"
-  }
+  },
+  "public": "Public",
+  "restricted": "Restricted"
 }

src/pages/board/index.tsx

@@ -25,7 +25,6 @@ export default function BoardPage({
 
 type BoardGetServerSideProps = {
   config: ConfigType;
-  dockerEnabled: boolean;
   _nextI18Next?: SSRConfig['_nextI18Next'];
 };
 

src/pages/manage/boards/index.tsx

@@ -18,34 +18,35 @@ import {
   IconDeviceFloppy,
   IconDotsVertical,
   IconFolderFilled,
+  IconLock,
+  IconLockOff,
   IconPlus,
   IconStack,
   IconStarFilled,
   IconTrash,
 } from '@tabler/icons-react';
-import { createServerSideHelpers } from '@trpc/react-query/server';
-import { GetServerSideProps } from 'next';
-import { useSession } from 'next-auth/react';
+import { GetServerSidePropsContext, InferGetServerSidePropsType } from 'next';
 import { useTranslation } from 'next-i18next';
 import Head from 'next/head';
 import Link from 'next/link';
-import superjson from 'superjson';
 import { openCreateBoardModal } from '~/components/Manage/Board/create-board.modal';
 import { openDeleteBoardModal } from '~/components/Manage/Board/delete-board.modal';
 import { ManageLayout } from '~/components/layout/Templates/ManageLayout';
 import { boardRouter } from '~/server/api/routers/board';
 import { getServerAuthSession } from '~/server/auth';
-import { prisma } from '~/server/db';
 import { sleep } from '~/tools/client/time';
 import { getServerSideTranslations } from '~/tools/server/getServerSideTranslations';
 import { checkForSessionOrAskForLogin } from '~/tools/server/loginBuilder';
 import { manageNamespaces } from '~/tools/server/translation-namespaces';
 import { api } from '~/utils/api';
 
-const BoardsPage = () => {
-  const { data: sessionData } = useSession();
+// Infer return type from the `getServerSideProps` function
+export default function BoardsPage({
+  boards,
+  session,
+}: InferGetServerSidePropsType<typeof getServerSideProps>) {
   const { data, refetch } = api.boards.all.useQuery(undefined, {
-    staleTime: 0,
+    initialData: boards,
     cacheTime: 1000 * 60 * 5, // Cache for 5 minutes
   });
   const { mutateAsync } = api.user.makeDefaultDashboard.useMutation({
@@ -68,7 +69,7 @@ const BoardsPage = () => {
 
       <Group position="apart">
         <Title mb="xl">{t('pageTitle')}</Title>
-        {sessionData?.user.isAdmin && (
+        {session?.user.isAdmin && (
           <Button
             onClick={openCreateBoardModal}
             leftIcon={<IconPlus size="1rem" />}
@@ -79,7 +80,6 @@ const BoardsPage = () => {
         )}
       </Group>
 
-      {data && (
       <SimpleGrid
         cols={3}
         spacing="lg"
@@ -97,12 +97,17 @@ const BoardsPage = () => {
                 {board.name}
               </Text>
               <Group spacing="xs" noWrap>
+                <Badge leftSection={<IconFolderFilled size=".7rem" />} color="pink" variant="light">
+                  {t('cards.badges.fileSystem')}
+                </Badge>
                 <Badge
-                    leftSection={<IconFolderFilled size=".7rem" />}
-                    color="pink"
+                  leftSection={
+                    board.allowGuests ? <IconLock size=".7rem" /> : <IconLockOff size=".7rem" />
+                  }
+                  color="green"
                   variant="light"
                 >
-                    {t('cards.badges.fileSystem')}
+                  {board.allowGuests ? t('common:public') : t('common:restricted')}
                 </Badge>
                 {board.isDefaultForUser && (
                   <Badge
@@ -170,7 +175,7 @@ const BoardsPage = () => {
                   >
                     <Text size="sm">{t('cards.menu.setAsDefault')}</Text>
                   </Menu.Item>
-                    {sessionData?.user.isAdmin && (
+                  {session?.user.isAdmin && (
                     <>
                       <Menu.Divider />
                       <Menu.Item
@@ -202,43 +207,40 @@ const BoardsPage = () => {
           </Card>
         ))}
       </SimpleGrid>
-      )}
     </ManageLayout>
   );
-};
+}
 
-export const getServerSideProps: GetServerSideProps = async (ctx) => {
-  const session = await getServerAuthSession(ctx);
-
-  const result = checkForSessionOrAskForLogin(ctx, session, () => true);
-  if (result) {
+export const getServerSideProps = async (context: GetServerSidePropsContext) => {
+  const session = await getServerAuthSession({ req: context.req, res: context.res });
+  const result = checkForSessionOrAskForLogin(
+    context,
+    session,
+    () => session?.user.isAdmin == true
+  );
+  if (result !== undefined) {
     return result;
   }
 
-  const helpers = createServerSideHelpers({
-    router: boardRouter,
-    ctx: {
-      session,
-      cookies: ctx.req.cookies,
-      prisma: prisma,
-    },
-    transformer: superjson,
+  const caller = boardRouter.createCaller({
+    session: session,
+    cookies: context.req.cookies,
   });
 
-  await helpers.all.prefetch();
+  const boards = await caller.all();
 
   const translations = await getServerSideTranslations(
     manageNamespaces,
-    ctx.locale,
-    ctx.req,
-    ctx.res
+    context.locale,
+    context.req,
+    context.res
   );
+
   return {
     props: {
+      boards,
+      session,
       ...translations,
-      trpcState: helpers.dehydrate(),
     },
   };
 };
-
-export default BoardsPage;

src/server/api/routers/board.ts

@@ -25,6 +25,7 @@ export const boardRouter = createTRPCRouter({
 
         return {
           name: name,
+          allowGuests: config.settings.access.allowGuests,
           countApps: countApps,
           countWidgets: config.widgets.length,
           countCategories: config.categories.length,

src/tools/server/loginBuilder.ts

@@ -1,8 +1,8 @@
 import {
-  GetServerSideProps,
   GetServerSidePropsContext,
   GetServerSidePropsResult,
   PreviewData,
+  Redirect
 } from 'next';
 
 import { Session } from 'next-auth';
@@ -13,13 +13,12 @@ export const checkForSessionOrAskForLogin = (
   context: GetServerSidePropsContext<ParsedUrlQuery, PreviewData>,
   session: Session | null,
   accessCallback: () => boolean
-): GetServerSidePropsResult<any> | undefined => {
+): GetServerSidePropsResult<never> | undefined => {
   const permitted = accessCallback();
 
   // user is logged in but does not have the required access
   if (session?.user && !permitted) {
     return {
-      props: {},
       redirect: {
         destination: '/401',
         permanent: false
@@ -34,7 +33,6 @@ export const checkForSessionOrAskForLogin = (
 
   // user is logged out and needs to sign in
   return {
-    props: {},
     redirect: {
       destination: `/auth/login?redirectAfterLogin=${context.resolvedUrl}`,
       permanent: false,