Merge pull request #7 from ecss-soton/feat-docker

Add Dockerfile support

.eslintrc.js

@@ -3,4 +3,7 @@ module.exports = {
   extends: ['plugin:@next/next/recommended', '@payloadcms'],
   ignorePatterns: ['**/payload-types.ts'],
   plugins: ['prettier'],
+  rules: {
+    'simple-import-sort/imports': 'warn',
+  },
 }

.prettierrc.js

@@ -5,4 +5,5 @@ module.exports = {
   singleQuote: true,
   trailingComma: 'all',
   arrowParens: 'avoid',
+  endOfLine: 'crlf'
 }

Dockerfile

@@ -7,7 +7,7 @@ COPY package*.json ./
 
 COPY . .
 RUN npm install
-RUN npm build
+RUN npm run build
 
 FROM base as runtime
 

README.md

@@ -46,7 +46,7 @@ cd new-web
 Install dependencies
 
 ```bash
-yarn install
+npm install
 ```
 
 The election backend requires the [stv-rs](https://crates.io/crates/stv-rs) command line tool. It can be installed using
@@ -59,6 +59,6 @@ cargo install stv-rs
 Start the server
 
 ```bash
-yarn run dev
+npm run dev
 ```
 

package.json

@@ -10,7 +10,7 @@
     "build:payload": "cross-env PAYLOAD_CONFIG_PATH=src/payload/payload.config.ts payload build",
     "build:server": "tsc --project tsconfig.server.json",
     "build:next": "cross-env PAYLOAD_CONFIG_PATH=dist/payload/payload.config.js NEXT_BUILD=true node dist/server.js",
-    "build": "cross-env NODE_ENV=production yarn build:payload && yarn build:server && yarn copyfiles && yarn build:next",
+    "build": "cross-env NODE_ENV=production npm run build:payload && npm run build:server && npm run copyfiles && npm run build:next",
     "serve": "cross-env PAYLOAD_CONFIG_PATH=dist/payload/payload.config.js NODE_ENV=production node dist/server.js",
     "copyfiles": "copyfiles -u 1 \"src/**/*.{html,css,scss,ttf,woff,woff2,eot,svg,jpg,png,js}\" dist/",
     "generate:types": "cross-env PAYLOAD_CONFIG_PATH=src/payload/payload.config.ts payload generate:types",

src/app/(pages)/login/page.tsx

@@ -1,14 +1,7 @@
-import React from 'react'
 import { Metadata } from 'next'
 import { redirect } from 'next/navigation'
-
-import { Gutter } from '../../_components/Gutter'
-import { RenderParams } from '../../_components/RenderParams'
 import { getMeUser } from '../../_utilities/getMeUser'
 import { mergeOpenGraph } from '../../_utilities/mergeOpenGraph'
-import LoginForm from './LoginForm'
-
-import classes from './index.module.scss'
 
 export default async function Login() {
   await getMeUser({

src/app/(pages)/posts/[slug]/page.tsx

@@ -3,7 +3,7 @@ import { Metadata } from 'next'
 import { draftMode } from 'next/headers'
 import { notFound } from 'next/navigation'
 
-import { Comment, Post } from '../../../../payload/payload-types'
+import { Post } from '../../../../payload/payload-types'
 import { fetchComments } from '../../../_api/fetchComments'
 import { fetchDoc } from '../../../_api/fetchDoc'
 import { fetchDocs } from '../../../_api/fetchDocs'

src/app/(pages)/projects/[slug]/page.tsx

@@ -6,7 +6,6 @@ import { notFound } from 'next/navigation'
 import { Project } from '../../../../payload/payload-types'
 import { fetchDoc } from '../../../_api/fetchDoc'
 import { fetchDocs } from '../../../_api/fetchDocs'
-import { RelatedPosts } from '../../../_blocks/RelatedPosts'
 import { Blocks } from '../../../_components/Blocks'
 import { ProjectHero } from '../../../_heros/ProjectHero'
 import { generateMeta } from '../../../_utilities/generateMeta'

src/app/(pages)/sponsors/[slug]/page.tsx

@@ -1,19 +1,11 @@
 import React from 'react'
-import { Metadata } from 'next'
 import { draftMode } from 'next/headers'
 import { notFound } from 'next/navigation'
 
 import { Sponsor } from '../../../../payload/payload-types'
-import { fetchDoc } from '../../../_api/fetchDoc'
 import { fetchDocs } from '../../../_api/fetchDocs'
-import { RelatedPosts } from '../../../_blocks/RelatedPosts'
-import { Blocks } from '../../../_components/Blocks'
-import { ProjectHero } from '../../../_heros/ProjectHero'
-import { generateMeta } from '../../../_utilities/generateMeta'
-import classes from "../../../_heros/ProjectHero/index.module.scss";
-import {Media} from "../../../_components/Media";
-import {SponsorPage} from "../../../_components/SponsorPage";
-import qs from "qs";
+import { SponsorPage } from '../../../_components/SponsorPage'
+import qs from 'qs'
 
 // Force this page to be dynamic so that Next.js does not cache it
 // See the note in '../../../[slug]/page.tsx' about this
@@ -24,55 +16,46 @@ export default async function Sponsor({ params: { slug } }) {
 
   let sponsor: Sponsor | null = null
 
-      const searchQuery = qs.stringify(
-        {
-          depth: 1,
-          sort: '-level',
-          where: {
-            slug: {
-              equals: slug,
-            },
-          },
+  const searchQuery = qs.stringify(
+    {
+      depth: 1,
+      sort: '-level',
+      where: {
+        slug: {
+          equals: slug,
         },
-        { encode: false },
-      )
-
-
-        try {
-          const req = await fetch(
-            `${process.env.NEXT_PUBLIC_SERVER_URL}/api/sponsors?${searchQuery}`,
-          )
-
-          const json = await req.json()
+      },
+    },
+    { encode: false },
+  )
 
-          const { docs } = json as { docs: (Sponsor)[] }
+  try {
+    const req = await fetch(`${process.env.NEXT_PUBLIC_SERVER_URL}/api/sponsors?${searchQuery}`)
 
-          sponsor = docs[0]
-        } catch (err) {
-          console.warn(err) // eslint-disable-line no-console
+    const json = await req.json()
 
-        }
+    const { docs } = json as { docs: Sponsor[] }
 
+    sponsor = docs[0]
+  } catch (err) {
+    console.warn(err) // eslint-disable-line no-console
+  }
 
   if (!sponsor) {
     notFound()
   }
 
   return (
     <React.Fragment>
-
-      <SponsorPage
-        sponsor={sponsor}
-      />
-
+      <SponsorPage sponsor={sponsor} />
     </React.Fragment>
   )
 }
 
 export async function generateStaticParams() {
   try {
     const projects = await fetchDocs<Sponsor>('sponsors')
-    return projects?.map(({slug}) => slug)
+    return projects?.map(({ slug }) => slug)
   } catch (error) {
     return []
   }

src/app/(pages)/styleguide/buttons/page.tsx

@@ -1,8 +1,6 @@
 import React, { Fragment } from 'react'
 import { Metadata } from 'next'
 import Link from 'next/link'
-
-import { CallToActionBlock } from '../../../_blocks/CallToAction'
 import { Button } from '../../../_components/Button'
 import { Gutter } from '../../../_components/Gutter'
 import { VerticalPadding } from '../../../_components/VerticalPadding'

src/app/_blocks/ArchiveBlock/index.tsx

@@ -6,9 +6,10 @@ import RichText from '../../_components/RichText'
 import { ArchiveBlockProps } from './types'
 
 import classes from './index.module.scss'
-import {SponsorArchive} from "../../_components/SponsorArchive";
-import {CommitteeArchive} from "../../_components/CommitteeArchive";
-import {SocietyArchive} from "../../_components/SocietyArchive";
+import { SponsorArchive } from '../../_components/SponsorArchive'
+import { CommitteeArchive } from '../../_components/CommitteeArchive'
+import { SocietyArchive } from '../../_components/SocietyArchive'
+import { Post, Project } from '../../../payload/payload-types'
 
 export const ArchiveBlock: React.FC<
   ArchiveBlockProps & {
@@ -27,53 +28,53 @@ export const ArchiveBlock: React.FC<
     categories,
   } = props
 
+  // const isPosts = (doc: any): doc is (Post | string) => relationTo === 'posts'
+  // const isProjects = (doc: any): doc is (Project | string) => relationTo === 'projects'
+  //
+  // const gg = isPosts(populatedDocs[0].value) ? populatedDocs[0].value : null
+  //
+  // .map((doc) => {
+  //   isPosts(doc.value) || isProjects(doc.value)
+  //
+  //   if (isPosts(doc.value)) {
+  //     return {relationTo: "posts", value: doc.value}
+  //   } else if (isProjects(doc.value)) {
+  //     return {relationTo: "projects", value: doc.value}
+  //   }
+  //   return null
+  // })
+
+  const allPopulatedDocs: (
+    | { relationTo: 'posts'; value: string | Post }
+    | { relationTo: 'projects'; value: string | Project }
+  )[] = populatedDocs.filter(Boolean) as (
+    | { relationTo: 'posts'; value: string | Post }
+    | { relationTo: 'projects'; value: string | Project }
+  )[]
+
   return (
     <div id={`block-${id}`} className={classes.archiveBlock}>
       {introContent && (
         <Gutter className={classes.introContent}>
-          <RichText content={introContent}/>
+          <RichText content={introContent} />
         </Gutter>
       )}
-      {relationTo === 'societies' &&
-        <SocietyArchive
-          populateBy={populateBy}
-          relationTo={relationTo}
-          populatedDocs={populatedDocs}
-          populatedDocsTotal={populatedDocsTotal}
-          selectedDocs={selectedDocs}
-          categories={categories}
-          limit={limit}
-          sort="-publishedAt"
-        />
-      }
-      {relationTo === 'committee' &&
-        <CommitteeArchive
-          populateBy={populateBy}
-          relationTo={relationTo}
-          populatedDocs={populatedDocs}
-          populatedDocsTotal={populatedDocsTotal}
-          selectedDocs={selectedDocs}
-          categories={categories}
-          limit={limit}
-          sort="-publishedAt"
-        />
-      }
-      {relationTo === 'sponsors' &&
-        <SponsorArchive/>
-      }
-      {relationTo === 'posts' || relationTo === 'projects' &&
-        <CollectionArchive
-          populateBy={populateBy}
-          relationTo={relationTo}
-          populatedDocs={populatedDocs}
-          populatedDocsTotal={populatedDocsTotal}
-          selectedDocs={selectedDocs}
-          categories={categories}
-          limit={limit}
-          sort="-publishedAt"
-        />
-      }
-
+      {relationTo === 'societies' && <SocietyArchive />}
+      {relationTo === 'committee' && <CommitteeArchive />}
+      {relationTo === 'sponsors' && <SponsorArchive />}
+      {relationTo === 'posts' ||
+        (relationTo === 'projects' && (
+          <CollectionArchive
+            populateBy={populateBy}
+            relationTo={relationTo}
+            populatedDocs={allPopulatedDocs}
+            populatedDocsTotal={populatedDocsTotal}
+            selectedDocs={selectedDocs}
+            categories={categories}
+            limit={limit}
+            sort="-publishedAt"
+          />
+        ))}
     </div>
   )
 }

src/app/_components/CollectionArchive/index.tsx

@@ -53,6 +53,7 @@ export const CollectionArchive: React.FC<Props> = props => {
   } = props
 
   const [results, setResults] = useState<Result>({
+    // @ts-ignore
     docs: (populateBy === 'collection'
       ? populatedDocs
       : populateBy === 'selection'