feat: client only

Author: plutov

.github/workflows/test.yaml

@@ -7,8 +7,8 @@ on:
     branches:
       - main
 jobs:
-  lint:
-    name: Lint Go
+  lint-test-go:
+    name: Lint and Test Go
     runs-on: ubuntu-latest
     steps:
       - name: Install Go
@@ -24,18 +24,6 @@ jobs:
         with:
           working-directory: ./api
 
-  test:
-    name: Test Go
-    runs-on: ubuntu-latest
-    steps:
-      - name: Install Go
-        uses: actions/setup-go@v5
-        with:
-          go-version: 1.24
-
-      - name: Check out code
-        uses: actions/checkout@v4
-
       - name: Run Tests
         working-directory: ./api
         run: go test -v -bench=. -race ./...
@@ -45,7 +33,7 @@ jobs:
     runs-on: ubuntu-latest
     strategy:
       matrix:
-        node_version: [20]
+        node_version: [22]
 
     steps:
       - name: Check out code

README.md

@@ -268,37 +268,24 @@ Where `{SURVEY_ID}` id the UUID of a given survey.
 
 ## Installation & Deployment
 
-You can build and run both API and UI with Docker Compose:
+### API and Postgres with Docker Compose
+
+You can build and run both API and Postgres with Docker Compose:
 
 ```
 docker-compose up -d --build
 ```
 
-And you should be able to access the UI on [localhost:3000](http://localhost:3000)
-
-You can deploy individual services to any cloud provider or self host them.
-
-- Go backend
-- Next.js frontend
-- Postgres database
-
-### Environment Variables
+Environment variables:
 
 API:
 
 - `DATABASE_URL` - Postgres connection string
 - `SURVEYS_DIR` - Directory with surveys, e.g. `/root/surveys`. It's suggested to use mounted volume for this directory.
 - `UPLOADS_DIR` - Directory for uploading files from the survey forms.
 
-UI:
-
-- `CONSOLE_API_ADDR` - Public address of the Go backend. Need to be accessible from the browser.
-- `CONSOLE_API_ADDR_INTERNAL` - Internal address of the Go backend, e.g. `http://api:8080` (could be the same as `CONSOLE_API_ADDR`).
-
 ### Run UI with npm
 
-It's also possible to run UI using `npm`:
-
 ```
 cd ui
 npm install
@@ -307,13 +294,12 @@ npm run dev
 
 ### Run API locally
 
-Assuming you have Postgres running locally, you can run the API with:
+Assuming you have Postgres running locally (`docker-compose up -d postgres`), you can run the API with:
 
 ```
 cd api
 export DATABASE_URL="postgres://user:pass@localhost:5432/formulosity?sslmode=disable"
 export SURVEYS_DIR="./surveys"
-export UPLOADS_DIR="./uploads"
 go run main.go
 ```
 

compose.yaml

@@ -14,17 +14,6 @@ services:
     volumes:
       - ./api/surveys:/root/surveys
       - ./api/uploads:/root/uploads
-  ui:
-    restart: always
-    build:
-      context: ./ui
-    ports:
-      - "3000:3000"
-    environment:
-      - CONSOLE_API_ADDR_INTERNAL=http://api:8080
-      - CONSOLE_API_ADDR=http://localhost:9900
-    depends_on:
-      - api
   postgres:
     image: postgres:16.0-alpine
     restart: always

ui/.env.example

@@ -1,5 +1,4 @@
-CONSOLE_API_ADDR=http://localhost:9900
-CONSOLE_API_ADDR_INTERNAL=http://localhost:9900
+NEXT_PUBLIC_API_ADDR=http://localhost:9900
 IRON_SESSION_SECRET=not_very_secret_replace_me
 HTTP_BASIC_AUTH=user:pass
 

ui/Dockerfile

@@ -1,23 +1,37 @@
-import { Metadata } from 'next'
+'use client'
+
+import { useEffect, useState } from 'react'
 
 import AppLayout from 'components/app/AppLayout'
 import { SurveysPage } from 'components/app/SurveysPage'
 import { ErrCode } from 'components/ui/ErrCode'
 import { getSurveys } from 'lib/api'
+import { Survey } from 'lib/types'
 
-export const metadata: Metadata = {
-  title: 'Formulosity',
-}
+export default function AppPage() {
+  const [surveys, setSurveys] = useState<Survey[]>([])
+  const [errMsg, setErrMsg] = useState('')
+  const [loading, setLoading] = useState(true)
 
-export default async function AppPage() {
-  let errMsg = ''
+  useEffect(() => {
+    const fetchSurveys = async () => {
+      const surveysResp = await getSurveys()
+      if (surveysResp.error) {
+        setErrMsg('Failed to fetch surveys')
+      } else {
+        setSurveys(surveysResp.data.data)
+      }
+      setLoading(false)
+    }
+    fetchSurveys()
+  }, [])
 
-  let surveys = []
-  const surveysResp = await getSurveys()
-  if (surveysResp.error) {
-    errMsg = 'Failed to fetch surveys'
-  } else {
-    surveys = surveysResp.data.data
+  if (loading) {
+    return (
+      <AppLayout>
+        <div>Loading...</div>
+      </AppLayout>
+    )
   }
 
   if (errMsg) {
@@ -28,11 +42,9 @@ export default async function AppPage() {
     )
   }
 
-  const apiURL = process.env.CONSOLE_API_ADDR || ''
-
   return (
     <AppLayout>
-      <SurveysPage surveys={surveys} apiURL={apiURL} />
+      <SurveysPage surveys={surveys} />
     </AppLayout>
   )
 }

ui/src/app/app/page.tsx

@@ -1,49 +1,70 @@
-import { Metadata } from 'next'
+'use client'
+
+import { useEffect, useState } from 'react'
+import { useParams } from 'next/navigation'
 
 import AppLayout from 'components/app/AppLayout'
 import { ErrCode } from 'components/ui/ErrCode'
 import { getSurveys, getSurveySessions } from 'lib/api'
 import { Survey, SurveySessionsLimit } from 'lib/types'
 import { SurveyResponsesPage } from 'components/app/SurveyResponsesPage'
 
-export const metadata: Metadata = {
-  title: 'Survey Responses',
-}
+export default function ResponsesPage() {
+  const params = useParams()
+  const [currentSurvey, setCurrentSurvey] = useState<Survey | undefined>(
+    undefined
+  )
+  const [errMsg, setErrMsg] = useState('')
+  const [loading, setLoading] = useState(true)
 
-export default async function ResponsesPage({
-  params,
-}: {
-  params: { survey_uuid: string }
-}) {
-  let errMsg = ''
+  useEffect(() => {
+    const fetchData = async () => {
+      if (!params.survey_uuid) return
 
-  let currentSurvey = undefined
-  const surveysResp = await getSurveys()
-  if (surveysResp.error) {
-    errMsg = 'Unable to fetch surveys'
-  } else {
-    const surveys = surveysResp.data.data
-    const survey = surveys.find(
-      (survey: Survey) => survey.uuid === params.survey_uuid
-    )
-    if (!survey) {
-      errMsg = 'Survey not found'
-    } else {
-      currentSurvey = survey
+      const surveysResp = await getSurveys()
+      if (surveysResp.error) {
+        setErrMsg('Unable to fetch surveys')
+        setLoading(false)
+        return
+      }
+
+      const surveys = surveysResp.data.data
+      const survey = surveys.find(
+        (survey: Survey) => survey.uuid === params.survey_uuid
+      )
+
+      if (!survey) {
+        setErrMsg('Survey not found')
+        setLoading(false)
+        return
+      }
 
       const surveySessionsResp = await getSurveySessions(
-        currentSurvey.uuid,
-        `limit=${SurveySessionsLimit}&offset=0&sort_by=created_at&order=desc`,
-        ''
+        survey.uuid,
+        `limit=${SurveySessionsLimit}&offset=0&sort_by=created_at&order=desc`
       )
+
       if (surveySessionsResp.error) {
-        errMsg = 'Unable to fetch survey sessions'
+        setErrMsg('Unable to fetch survey sessions')
       } else {
-        currentSurvey = surveySessionsResp.data.data.survey
-        currentSurvey.sessions = surveySessionsResp.data.data.sessions
-        currentSurvey.pages_count = surveySessionsResp.data.data.pages_count
+        const updatedSurvey = surveySessionsResp.data.data.survey
+        updatedSurvey.sessions = surveySessionsResp.data.data.sessions
+        updatedSurvey.pages_count = surveySessionsResp.data.data.pages_count
+        setCurrentSurvey(updatedSurvey)
       }
+
+      setLoading(false)
     }
+
+    fetchData()
+  }, [params.survey_uuid])
+
+  if (loading) {
+    return (
+      <AppLayout>
+        <div>Loading...</div>
+      </AppLayout>
+    )
   }
 
   if (errMsg) {
@@ -54,11 +75,9 @@ export default async function ResponsesPage({
     )
   }
 
-  const apiURL = process.env.CONSOLE_API_ADDR || ''
-
   return (
     <AppLayout>
-      <SurveyResponsesPage currentSurvey={currentSurvey} apiURL={apiURL} />
+      <SurveyResponsesPage currentSurvey={currentSurvey!} />
     </AppLayout>
   )
 }

ui/src/app/app/surveys/[survey_uuid]/responses/page.tsx

@@ -1,34 +1,11 @@
+'use client'
+
 import 'styles/global.css'
 import { ReactNode } from 'react'
-import { Metadata } from 'next'
-import { siteConfig } from 'lib/siteConfig'
-
-export const metadata: Metadata = {
-  title: {
-    default: siteConfig.name,
-    template: `%s | ${siteConfig.name}`,
-  },
-  description: siteConfig.description,
-  keywords: [],
-  alternates: {
-    canonical: '/',
-  },
-  openGraph: {
-    type: 'website',
-    locale: 'en_US',
-    title: siteConfig.name,
-    description: siteConfig.description,
-    siteName: siteConfig.name,
-  },
-  icons: {
-    icon: '/favicon.ico',
-  },
-  manifest: '/manifest.webmanifest',
-}
 
 type LayoutProps = { children?: ReactNode }
 
-export default async function RootLayout({ children }: LayoutProps) {
+export default function RootLayout({ children }: LayoutProps) {
   return (
     <html lang="en" className="dark" suppressHydrationWarning>
       <head />