Merge pull request #37 from Teknologforeningen/minor_improvements

Minor improvements
Teknologforeningen · Sep 4, 2023 · 4b1440f · 4b1440f
2 parents 9da260f + 0d4e341
commit 4b1440f
Show file tree

Hide file tree

Showing 6 changed files with 76 additions and 44 deletions.
diff --git a/components/Page.tsx b/components/Page.tsx
@@ -7,6 +7,7 @@ import { NationLogo } from '@components/footer/Logos'
 import Footer from '@components/footer'
 import TableOfContents from '@components/TableOfContents'
 import PageSection from '@components/PageSection'
+import Unauthorized from '@components/Unauthorized'
 
 const renderer: marked.RendererObject = {
   image(href: string | null): string {
@@ -24,34 +25,47 @@ type PageProps = {
   logos: NationLogo[]
   navbarLinks: NavbarLink[]
   isPrivate: boolean
+  unauthorized?: boolean
 }
 
-const Page: NextPage<PageProps> = ({ page, navbarLinks, logos, isPrivate }) => {
+const Page: NextPage<PageProps> = ({
+  page,
+  navbarLinks,
+  logos,
+  isPrivate,
+  unauthorized = false,
+}) => {
   return (
     <div className="flex min-h-screen flex-col bg-white">
       <Header navbarLinks={navbarLinks} />
       <div className="flex flex-grow justify-center">
         <div className="prose prose-sm mx-4 mb-12 mt-6 flex flex-col sm:mx-8 md:mx-16 md:mt-12">
-          <h1>{page?.title}</h1>
-          {page?.content && (
-            <div
-              dangerouslySetInnerHTML={{
-                __html: marked.parse(page.content ?? ''),
-              }}
-            />
+          {unauthorized ? (
+            <Unauthorized />
+          ) : (
+            <>
+              <h1>{page?.title}</h1>
+              {page?.content && (
+                <div
+                  dangerouslySetInnerHTML={{
+                    __html: marked.parse(page.content ?? ''),
+                  }}
+                />
+              )}
+              {page?.showTableOfContents && (
+                <TableOfContents sections={page.sections.data} />
+              )}
+              {page?.sections?.data.map((section, i) => (
+                <PageSection
+                  key={i}
+                  title={section.attributes.title}
+                  content={section.attributes.content}
+                  file_folders={section.attributes.file_folders.data}
+                  isPrivate={isPrivate}
+                />
+              ))}
+            </>
           )}
-          {page?.showTableOfContents && (
-            <TableOfContents sections={page.sections.data} />
-          )}
-          {page?.sections?.data.map((section, i) => (
-            <PageSection
-              key={i}
-              title={section.attributes.title}
-              content={section.attributes.content}
-              file_folders={section.attributes.file_folders.data}
-              isPrivate={isPrivate}
-            />
-          ))}
         </div>
       </div>
       <Footer logos={logos} />

diff --git a/components/PageSection.tsx b/components/PageSection.tsx
@@ -18,7 +18,9 @@ const PageSection = ({
   isPrivate,
 }: PageSectionProps) => (
   <div>
-    <h2 id={titleToAnchor(title)}>{title}</h2>
+    <h2 id={titleToAnchor(title)} className="scroll-mt-24">
+      {title}
+    </h2>
     <div
       dangerouslySetInnerHTML={{
         __html: marked.parse(content ?? ''),

diff --git a/components/TableOfContents.tsx b/components/TableOfContents.tsx
@@ -4,18 +4,23 @@ import { titleToAnchor } from '@utils/helpers'
 
 const TableOfContents = ({ sections }: { sections: Section[] }) => {
   return (
-    <ul>
-      {sections.map((section, i) => (
-        <li key={i}>
-          <Link
-            className="no-underline hover:underline"
-            href={`#${titleToAnchor(section.attributes.title)}`}
-          >
-            {section.attributes.title}
-          </Link>
-        </li>
-      ))}
-    </ul>
+    <>
+      <h2>Innehållsförteckning</h2>
+      <table className="table-auto border-separate text-sm">
+        <tbody>
+          {sections.map((section, i) => (
+            <tr key={i}>
+              <Link
+                className="no-underline hover:underline"
+                href={`#${titleToAnchor(section.attributes.title)}`}
+              >
+                {section.attributes.title}
+              </Link>
+            </tr>
+          ))}
+        </tbody>
+      </table>
+    </>
   )
 }
 

diff --git a/components/Unauthorized.tsx b/components/Unauthorized.tsx
@@ -0,0 +1,18 @@
+import { signIn } from 'next-auth/react'
+
+const Unauthorized = () => (
+  <>
+    <p>Denna sida kräver inloggning</p>
+    <button
+      onClick={(e) => {
+        e.preventDefault()
+        signIn('keycloak')
+      }}
+      className="mx-3 rounded-lg border p-2 hover:font-bold"
+    >
+      Logga in
+    </button>
+  </>
+)
+
+export default Unauthorized
diff --git a/pages/medlem/[privatePage].tsx b/pages/medlem/[privatePage].tsx
@@ -1,7 +1,5 @@
 import { GetServerSideProps, NextPage } from 'next'
 import { PageType } from '@models/page'
-import { signIn } from 'next-auth/react'
-import { useEffect } from 'react'
 import { Session } from 'next-auth'
 import { getSession } from 'next-auth/react'
 import { fetchPrivatePage } from '@lib/api/privatepage'
@@ -20,15 +18,9 @@ type PrivatePageProps = {
 const PrivatePage: NextPage<PrivatePageProps> = ({
   session,
   ...props
-}: PrivatePageProps) => {
-  useEffect(() => {
-    if (!session) {
-      signIn('keycloak')
-    }
-  }, [session])
-
-  return <Page {...props} isPrivate={true} />
-}
+}: PrivatePageProps) => (
+  <Page {...props} isPrivate={true} unauthorized={!session || !props.page} />
+)
 
 export const getServerSideProps: GetServerSideProps<{
   session: Session | null

diff --git a/utils/helpers.ts b/utils/helpers.ts
@@ -35,6 +35,7 @@ export const getLayoutProps = async (): Promise<LayoutProps> => {
 
 export const titleToAnchor = (title: string) => {
   return title
+    .trim()
     .replace(/ /g, '-')
     .replace(/[\/\\^$*+?.()|\[\]{}<>:;"'~,=@`#!%&]/g, '')
     .toLowerCase()