Web App version 2.0.0

.dockerignore

@@ -0,0 +1,8 @@
+Dockerfile
+.dockerignore
+node_modules
+yarn-debug.log
+README.md
+.next
+.git
+.env*.local

.env.local

@@ -1,6 +1,9 @@
+EVENT_EDITION = mock-edition-id
+
 WEBAPP_URL = http://localhost:3000
 
-CANNON_URL = https://cannon-staging-dev.sinfo.org/
+CANNON_URL = https://cannon-staging-dev.sinfo.org
+NEXT_PUBLIC_CANNON_URL = https://cannon-staging-dev.sinfo.org
 
 NEXTAUTH_SECRET = ZlnjlEkgh4hRX41tGPc3glhUMKJd8+HxGWqVe+l7jtA=
 
@@ -15,4 +18,4 @@ MICROSOFT_CLIENT_SECRET = G1.8Q~Xmy_ujVaWKSXBaxNADx9w02VjLV9T9RcA3
 
 FENIX_URL = https://fenix.tecnico.ulisboa.pt
 FENIX_CLIENT_ID = 1977390058176863
-FENIX_CLIENT_SECRET = 2z4JU3SLLFqZTc2wpqjXIBcl6BCaGoREn+BzjyhZEHFxhQNAI+ypt/O5uuCTP2b+a7FBxuPTzNZXpdB4mv6cDA==
+FENIX_CLIENT_SECRET = 2z4JU3SLLFqZTc2wpqjXIBcl6BCaGoREn+BzjyhZEHFxhQNAI+ypt/O5uuCTP2b+a7FBxuPTzNZXpdB4mv6cDA==

.github/workflows/build-production.yml

@@ -0,0 +1,59 @@
+name: Production Build Workflow
+
+on:
+  push:
+    tags:
+      - "v*.*.*"
+
+jobs:
+  docker:
+    runs-on: ubuntu-latest
+    steps:
+    - uses: actions/checkout@v4
+
+    - name: Set most recent tag
+      id: vars
+      run: echo ::set-output name=tag::${GITHUB_REF#refs/*/}
+
+    - uses: docker/setup-buildx-action@v3
+      name: Set up Docker Buildx
+
+    - uses: docker/login-action@v3
+      name: Login to DockerHub
+      with:
+        username: ${{ secrets.DOCKERHUB_USERNAME }}
+        password: ${{ secrets.DOCKERHUB_TOKEN }}
+
+    - uses: docker/build-push-action@v6
+      name: Build and Push WebApp Image
+      id: docker_build
+      with:
+        context: .
+        push: true
+        tags: orgsinfo/webapp:${{ step.vars.outputs.tag }}
+        file: Dockerfile.production
+
+    - name: WebApp Image Digest
+      run: echo ${{ steps.docker_build.outputs.digest }}
+
+  deploy:
+    needs: docker
+    runs-on: ubuntu-latest
+    steps:
+    - uses: actions/checkout@v4
+
+    - name: Set most recent tag
+      id: vars
+      run: echo ::set-output name=tag::${GITHUB_REF#refs/*/}
+
+    - name: Deploy the app to the cluster
+      uses: nickgronow/kubectl@master
+      with:
+        config_data: ${{ secrets.KUBE_CONFIG_DATA }}
+        args: set image deployment/webapp-production webapp-prod-app=orgsinfo/webapp:${{ steps.vars.outputs.tag }} --namespace=production
+
+    - name: Verify deployment
+      uses: nickgronow/kubectl@master
+      with:
+        config_data: ${{ secrets.KUBE_CONFIG_DATA }}
+        args: rollout status deployment/webapp-production --namespace=production

.github/workflows/build-staging.yml

@@ -0,0 +1,45 @@
+name: Staging Build Workflow
+
+on:
+  push:
+    branches:
+      - "staging"
+
+jobs:
+  docker:
+    runs-on: ubuntu-latest
+    steps:
+    - uses: actions/checkout@v4
+
+    - uses: docker/setup-buildx-action@v3
+      name: Set up Docker Buildx
+
+    - uses: docker/login-action@v3
+      name: Login to DockerHub
+      with:
+        username: ${{ secrets.DOCKERHUB_USERNAME }}
+        password: ${{ secrets.DOCKERHUB_TOKEN }}
+
+    - uses: docker/build-push-action@v6
+      name: Build and Push WebApp Image
+      id: docker_build
+      with:
+        context: .
+        push: true
+        tags: orgsinfo/webapp:latest
+        file: Dockerfile.staging
+
+    - name: WebApp Image Digest
+      run: echo ${{ steps.docker_build.outputs.digest }}
+
+  deploy:
+    needs: docker
+    runs-on: ubuntu-latest
+    steps:
+    - uses: actions/checkout@v4
+
+    - name: Deploy the webapp to the cluster
+      uses: nickgronow/kubectl@master
+      with:
+        config_data: ${{ secrets.KUBE_CONFIG_DATA }}
+        args: delete pod --selector="app=webapp-staging-app" --namespace=staging

.gitignore

@@ -31,7 +31,10 @@ yarn-error.log*
 *.tsbuildinfo
 next-env.d.ts
 
+# env
+.env*.local
+
 # added
 /src/app/cannon
 /src/services/TokenService.ts
-.vscode
+.vscode

Dockerfile.production

@@ -0,0 +1,53 @@
+FROM node:20-alpine AS base
+
+# 1. Install dependencies only when needed
+FROM base AS deps
+
+WORKDIR /app
+COPY package.json yarn.lock ./
+RUN yarn --frozen-lockfile
+
+
+# 2. Build the application
+FROM base AS builder
+
+ENV NEXT_PUBLIC_CANNON_URL="https://cannon.sinfo.org"
+
+WORKDIR /app
+COPY --from=deps /app/node_modules ./node_modules
+COPY . .
+RUN yarn run build
+
+
+# 3. Production image, copy all the files and run next
+FROM base AS runner
+
+WORKDIR /app
+ENV NODE_ENV=production
+
+# Disable Next.js telemetry during runtime
+ENV NEXT_TELEMETRY_DISABLED=1
+
+RUN addgroup -g 1001 -S nodejs
+RUN adduser -S nextjs -u 1001
+
+COPY --from=builder /app/public ./public
+
+# Set the correct permission for prerender cache
+RUN mkdir .next
+RUN chown nextjs:nodejs .next
+
+# Automatically leverage output traces to reduce image size
+# https://nextjs.org/docs/advanced-features/output-file-tracing
+COPY --from=builder --chown=nextjs:nodejs /app/.next/standalone ./
+COPY --from=builder --chown=nextjs:nodejs /app/.next/static ./.next/static
+
+USER nextjs
+
+EXPOSE 3000
+
+ENV PORT=3000
+ENV HOSTNAME="0.0.0.0"
+
+CMD ["server.js"]
+

Dockerfile.staging

@@ -0,0 +1,53 @@
+FROM node:20-alpine AS base
+
+# 1. Install dependencies only when needed
+FROM base AS deps
+
+WORKDIR /app
+COPY package.json yarn.lock ./
+RUN yarn --frozen-lockfile
+
+
+# 2. Build the application
+FROM base AS builder
+
+ENV NEXT_PUBLIC_CANNON_URL="https://cannon-staging.sinfo.org"
+
+WORKDIR /app
+COPY --from=deps /app/node_modules ./node_modules
+COPY . .
+RUN yarn run build
+
+
+# 3. Production image, copy all the files and run next
+FROM base AS runner
+
+WORKDIR /app
+ENV NODE_ENV=production
+
+# Disable Next.js telemetry during runtime
+ENV NEXT_TELEMETRY_DISABLED=1
+
+RUN addgroup -g 1001 -S nodejs
+RUN adduser -S nextjs -u 1001
+
+COPY --from=builder /app/public ./public
+
+# Set the correct permission for prerender cache
+RUN mkdir .next
+RUN chown nextjs:nodejs .next
+
+# Automatically leverage output traces to reduce image size
+# https://nextjs.org/docs/advanced-features/output-file-tracing
+COPY --from=builder --chown=nextjs:nodejs /app/.next/standalone ./
+COPY --from=builder --chown=nextjs:nodejs /app/.next/static ./.next/static
+
+USER nextjs
+
+EXPOSE 3000
+
+ENV PORT=3000
+ENV HOSTNAME="0.0.0.0"
+
+CMD ["server.js"]
+

next.config.js

@@ -1,8 +1,21 @@
 /** @type {import('next').NextConfig} */
 const nextConfig = {
-    images: {
-        domains: ["static.sinfo.org", "sinfo.ams3.cdn.digitaloceanspaces.com", "sonaesierracms-v2.cdnpservers.net"]
-    }
-}
+  output: "standalone",
+  images: {
+    remotePatterns: [
+      {
+        protocol: "http",
+        hostname: "**",
+      },
+      {
+        protocol: "https",
+        hostname: "**",
+      },
+    ],
+  },
+  experimental: {
+    instrumentationHook: true,
+  },
+};
 
-module.exports = nextConfig
+module.exports = nextConfig;

package.json

@@ -9,19 +9,34 @@
     "lint": "next lint"
   },
   "dependencies": {
+    "@types/country-list": "^2.1.4",
     "@types/node": "20.5.0",
     "@types/react": "18.2.20",
     "@types/react-dom": "18.2.7",
     "autoprefixer": "10.4.15",
+    "country-list": "^2.3.0",
     "eslint": "8.47.0",
-    "eslint-config-next": "13.4.17",
-    "next": "13.4.17",
-    "next-auth": "^4.23.1",
+    "eslint-config-next": "^14.1.0",
+    "lucide-react": "^0.469.0",
+    "moment": "^2.30.1",
+    "msw": "^2.6.5",
+    "next": "^14.1.0",
+    "next-auth": "4.24.11",
     "postcss": "8.4.28",
+    "qr-scanner": "^1.4.2",
     "react": "18.2.0",
+    "react-confetti": "^6.2.2",
     "react-dom": "18.2.0",
+    "react-hook-form": "^7.54.2",
+    "react-image-file-resizer": "^0.4.8",
     "react-qr-code": "^2.0.12",
-    "tailwindcss": "3.3.3",
+    "react-social-icons": "^6.18.0",
+    "react-use": "^17.6.0",
+    "sharp": "^0.33.5",
+    "tailwindcss": "3.4.17",
     "typescript": "5.1.6"
+  },
+  "devDependencies": {
+    "prettier": "^3.4.2"
   }
 }

src/app/(authenticated)/companies/CompaniesList.tsx

@@ -0,0 +1,51 @@
+"use client";
+
+import GridList from "@/components/GridList";
+import { CompanyTile } from "@/components/company";
+import { useState } from "react";
+
+interface CompaniesListProps {
+  companies: Company[];
+}
+
+export default function CompaniesList({ companies }: CompaniesListProps) {
+  const [filteredCompanies, setFilteredCompanies] =
+    useState<Company[]>(companies);
+  let debounce: NodeJS.Timeout;
+
+  function handleSearch(text: string) {
+    debounce && clearTimeout(debounce);
+    debounce = setTimeout(() => {
+      if (text === "") {
+        setFilteredCompanies(companies);
+      } else {
+        setFilteredCompanies(
+          companies.filter((company) =>
+            company.name.toLowerCase().includes(text.toLowerCase()),
+          ),
+        );
+      }
+    }, 300);
+  }
+
+  return (
+    <>
+      <div className="sticky top-16 pt-4 px-4 z-20">
+        <input
+          type="text"
+          placeholder="Search companies"
+          className="w-full p-2 border rounded-md shadow-md"
+          onChange={(e) => {
+            handleSearch(e.target.value);
+          }}
+        />
+      </div>
+      <GridList title="Companies">
+        {filteredCompanies.length === 0 && <div>No companies found</div>}
+        {filteredCompanies.map((c) => (
+          <CompanyTile key={c.id} company={c} />
+        ))}
+      </GridList>
+    </>
+  );
+}