Merge branch 'main' into trevor/express-checkin

.env.example

@@ -1,3 +1,7 @@
 NEXT_PUBLIC_ACM_API_URL="https://api.acmucsd.com/api/v2"
 NEXT_PUBLIC_KLEFKI_API_URL=""
-NEXT_PUBLIC_TOTP_KEY=""
+NEXT_PUBLIC_TOTP_KEY=""
+
+# Set this environment variable to any string if you're connecting 
+# to the production API and want to use production file size limits.
+# process.env.NEXT_PUBLIC_PRODUCTION

.eslintrc.json

@@ -38,5 +38,10 @@
       }
     ]
   },
-  "ignorePatterns": "src/**/*.d.ts"
+  "ignorePatterns": [
+    "src/**/*.d.ts",
+    "**/public/sw.js",
+    "**/public/workbox-*.js",
+    "**/public/worker-*.js"
+  ]
 }

.gitignore

@@ -36,3 +36,11 @@ yarn-error.log*
 # typescript
 *.tsbuildinfo
 next-env.d.ts
+
+# PWA files
+**/public/sw.js
+**/public/workbox-*.js
+**/public/worker-*.js
+**/public/sw.js.map
+**/public/workbox-*.js.map
+**/public/worker-*.js.map

.vscode/settings.json

@@ -3,17 +3,15 @@
   "editor.formatOnSave": true,
   "typescript.preferences.importModuleSpecifier": "non-relative",
   "editor.codeActionsOnSave": {
-    "source.fixAll": true,
-    "source.organizeImports": true
+    "source.fixAll": "explicit",
+    "source.organizeImports": "explicit"
   },
   "css.validate": false,
   "less.validate": false,
   "scss.validate": false,
-  "stylelint.validate": [
-    "scss"
-  ],
+  "stylelint.validate": ["scss"],
   "files.associations": {
     "*.env.development": "env",
     "*.env.production": "env"
   }
-}
+}

cypress/e2e/pages/edit-profile.cy.ts

@@ -0,0 +1,35 @@
+/// <reference types="cypress" />
+
+describe('Edit Profile Page', () => {
+  beforeEach(() => {
+    cy.login('standard');
+    cy.location('pathname').should('equal', '/');
+    cy.visit('/profile/edit');
+    cy.location('pathname').should('equal', '/profile/edit');
+  });
+
+  it('Should update profile preview', () => {
+    // write something new to make sure it can save
+    cy.typeInForm('First', new Date().toISOString());
+    cy.get('button').contains('Save').click();
+
+    cy.fixture('profile').then(profile => {
+      const { first, last, bio, major, year } = profile;
+
+      cy.typeInForm('First', first);
+      cy.typeInForm('Last', last);
+      cy.selectInForm('Major', major);
+      cy.selectInForm('Graduation Year', year);
+      cy.typeInForm('Biography', bio);
+      cy.get('button').contains('Save').click();
+
+      cy.get('.Toastify').contains('Changes saved!').should('exist');
+
+      cy.get('section:contains("Current Profile")').within(() => {
+        Object.values(profile).forEach((value: string | number) => {
+          cy.contains(value).should('exist');
+        });
+      });
+    });
+  });
+});

cypress/fixtures/profile.json

@@ -0,0 +1,7 @@
+{
+  "first": "John",
+  "last": "Doe",
+  "bio": "I am a testing account.",
+  "major": "Computer Engineering",
+  "year": "2026"
+}

cypress/support/commands.ts

@@ -1 +1,50 @@
+declare global {
+  namespace Cypress {
+    interface Chainable {
+      /**
+       * Log in as the specified user, pulling details from accounts.json
+       * @example cy.login('standard')
+       */
+      login(account: string): Chainable<void>;
+
+      /**
+       * Type text into a form input or textarea under specified label
+       * @param label - text of label that the input is a child of
+       * @param value - text to be typed into input
+       */
+      typeInForm(label: string, value: string): Chainable<void>;
+
+      /**
+       * Select the given option in a select under specified label
+       * @param label - text of label that the select is a child of
+       * @param value - option to be selected
+       */
+      selectInForm(label: string, value: string): Chainable<void>;
+    }
+  }
+}
+
+Cypress.Commands.add('login', (account: string) => {
+  cy.fixture('accounts.json').then(accs => {
+    if (!(account in accs))
+      throw new Error(`Account '${account}' isn't specified in \`accounts.json\``);
+    const { email, password } = accs[account];
+
+    cy.visit('/login');
+    cy.get('input[name="email"]').type(email);
+    cy.get('input[name="password"]').type(password);
+    cy.get('button').contains('Sign In').click();
+  });
+});
+
+Cypress.Commands.add('typeInForm', (label: string, value: string) => {
+  cy.get(`label:contains("${label}") input, label:contains("${label}") textarea`).as('input');
+  cy.get('@input').clear();
+  cy.get('@input').type(value as string);
+});
+
+Cypress.Commands.add('selectInForm', (label: string, value: string | number) => {
+  cy.get(`label:contains("${label}") select`).select(value);
+});
+
 export {};

next.config.js

@@ -1,6 +1,31 @@
 const env = process.env.NODE_ENV;
 const isDevelopment = env !== 'production';
 
+const runtimeCaching = require('next-pwa/cache');
+
+// By default, next-pwa serves from the cache while updating the cache with a
+// network request. This results in faster page loads, but the data will be
+// stale, most notable when checking into an event (membership points will be
+// out of date) or enabling "Preview store as member" on the admin page. Note
+// that this only applies to static routes (e.g. /store but not /u/[uuid]).
+//
+// This makes it fetch data from the server (then falling back to the cache if
+// the user is offline). This will result in slower page loads, but the data
+// will always be up-to-date.
+// https://github.com/vercel/next.js/discussions/52024#discussioncomment-6325542
+const nextData = runtimeCaching.find(entry => entry.options.cacheName === 'next-data');
+if (nextData) {
+  nextData.handler = 'NetworkFirst';
+}
+
+const withPWA = require('next-pwa')({
+  dest: 'public',
+  runtimeCaching,
+  register: true,
+  skipWaiting: true,
+  disable: isDevelopment,
+});
+
 /** @type {import('next').NextConfig} */
 const nextConfig = {
   eslint: {
@@ -37,4 +62,4 @@ const nextConfig = {
   },
 };
 
-module.exports = nextConfig;
+module.exports = withPWA(nextConfig);

package.json

@@ -4,7 +4,7 @@
   "private": true,
   "packageManager": "[email protected]",
   "engines": {
-    "node": ">=18",
+    "node": "18.x",
     "yarn": ">=1.22",
     "npm": "use-yarn-not-npm"
   },
@@ -36,8 +36,10 @@
     "ics": "^3.7.2",
     "luxon": "^3.3.0",
     "next": "^13.2.5-canary.30",
+    "next-pwa": "^5.6.0",
     "next-themes": "^0.2.1",
     "react": "18.2.0",
+    "react-confetti": "^6.1.0",
     "react-dom": "18.2.0",
     "react-hook-form": "^7.43.0",
     "react-icons": "^4.4.0",