#730 add user settings

src/backend/functions/users.ts

@@ -16,11 +16,33 @@ import {
   buildNotFoundResponse,
   buildSuccessResponse,
   routeMatcher,
-  User
+  User,
+  AuthenticatedUser
 } from 'utils';
 
 const prisma = new PrismaClient();
 
+const authUserQueryArgs = Prisma.validator<Prisma.UserArgs>()({
+  include: {
+    userSettings: true
+  }
+});
+
+const authenticatedUserTransformer = (
+  user: Prisma.UserGetPayload<typeof authUserQueryArgs>
+): AuthenticatedUser => {
+  return {
+    userId: user.userId,
+    firstName: user.firstName,
+    lastName: user.lastName,
+    googleAuthId: user.googleAuthId,
+    email: user.email,
+    emailId: user.emailId,
+    role: user.role,
+    defaultTheme: user.userSettings?.defaultTheme
+  };
+};
+
 const usersTransformer = (user: Prisma.UserGetPayload<null>): User => {
   if (user === null) throw new TypeError('User not found');
 
@@ -70,7 +92,10 @@ const logUserIn: ApiRouteFunction = async (_params, event) => {
   if (!payload) throw new Error('Auth server response payload invalid');
   const { sub: userId } = payload; // google user id
   // check if user is already in the database via Google ID
-  let user = await prisma.user.findUnique({ where: { googleAuthId: userId } });
+  let user = await prisma.user.findUnique({
+    where: { googleAuthId: userId },
+    ...authUserQueryArgs
+  });
 
   // if not in database, create user in database
   if (user === null) {
@@ -83,8 +108,10 @@ const logUserIn: ApiRouteFunction = async (_params, event) => {
         lastName: payload['family_name']!,
         googleAuthId: userId,
         email: payload['email']!,
-        emailId
-      }
+        emailId,
+        userSettings: { create: {} }
+      },
+      ...authUserQueryArgs
     });
     user = createdUser;
   }
@@ -97,7 +124,32 @@ const logUserIn: ApiRouteFunction = async (_params, event) => {
     }
   });
 
-  return buildSuccessResponse(usersTransformer(user));
+  return buildSuccessResponse(authenticatedUserTransformer(user));
+};
+
+/** Get settings for the specified user */
+const getUserSettings: ApiRouteFunction = async (params: { id: string }) => {
+  const userId: number = parseInt(params.id);
+  const user = await prisma.user.findUnique({
+    where: { userId },
+    include: { userSettings: true }
+  });
+  if (!user) return buildNotFoundResponse('user', `#${params.id}`);
+  if (!user.userSettings) return buildNotFoundResponse('user settings', `#${params.id}`);
+  return buildSuccessResponse(user.userSettings);
+};
+
+/** Update settings for the specified user */
+const updateUserSettings: ApiRouteFunction = async (params: { id: string }, event) => {
+  const userId: number = parseInt(params.id);
+  if (!event.body) return buildClientFailureResponse('No settings found to update.');
+  const body = JSON.parse(event.body!);
+  if (!body.defaultTheme) return buildClientFailureResponse('No defaultTheme found for settings.');
+  await prisma.user.update({
+    where: { userId },
+    data: { userSettings: { update: { defaultTheme: body.defaultTheme } } }
+  });
+  return buildSuccessResponse({ message: `Successfully updated settings for user ${userId}.` });
 };
 
 // Define all valid routes for the endpoint
@@ -116,6 +168,16 @@ const routes: ApiRoute[] = [
     path: `${API_URL}${apiRoutes.USERS_LOGIN}`,
     httpMethod: 'POST',
     func: logUserIn
+  },
+  {
+    path: `${API_URL}${apiRoutes.USER_SETTINGS_BY_USER_ID}`,
+    httpMethod: 'GET',
+    func: getUserSettings
+  },
+  {
+    path: `${API_URL}${apiRoutes.USER_SETTINGS_BY_USER_ID}`,
+    httpMethod: 'POST',
+    func: updateUserSettings
   }
 ];
 

src/backend/prisma/migrations/20220625223108_add_user_settings/migration.sql

@@ -0,0 +1,25 @@
+/*
+  Warnings:
+
+  - A unique constraint covering the columns `[userSettingsId]` on the table `User` will be added. If there are existing duplicate values, this will fail.
+
+*/
+-- CreateEnum
+CREATE TYPE "Theme" AS ENUM ('LIGHT', 'DARK');
+
+-- AlterTable
+ALTER TABLE "User" ADD COLUMN     "userSettingsId" TEXT;
+
+-- CreateTable
+CREATE TABLE "UserSettings" (
+    "id" TEXT NOT NULL,
+    "defaultTheme" "Theme" NOT NULL DEFAULT E'DARK',
+
+    PRIMARY KEY ("id")
+);
+
+-- CreateIndex
+CREATE UNIQUE INDEX "User.userSettingsId_unique" ON "User"("userSettingsId");
+
+-- AddForeignKey
+ALTER TABLE "User" ADD FOREIGN KEY ("userSettingsId") REFERENCES "UserSettings"("id") ON DELETE SET NULL ON UPDATE CASCADE;

src/backend/prisma/schema.prisma

@@ -32,6 +32,11 @@ enum Role {
   GUEST
 }
 
+enum Theme {
+  LIGHT
+  DARK
+}
+
 enum Scope_CR_Why_Type {
   ESTIMATION
   SCHOOL
@@ -53,6 +58,9 @@ model User {
   email                   String           @unique
   emailId                 String?          @unique
   role                    Role             @default(GUEST)
+  userSettingsId          String?          @unique
+  userSettings            UserSettings?    @relation(fields: [userSettingsId], references: [id])
+  // Relation references
   submittedChangeRequests Change_Request[] @relation(name: "submittedChangeRequests")
   reviewedChangeRequests  Change_Request[] @relation(name: "reviewedChangeRequests")
   markedAsProjectLead     Activation_CR[]  @relation(name: "markAsProjectLead")
@@ -74,6 +82,12 @@ model Session {
   deviceInfo String?
 }
 
+model UserSettings {
+  id           String @id @default(uuid())
+  user         User?
+  defaultTheme Theme  @default(DARK)
+}
+
 model Change_Request {
   crId                    Int            @id @default(autoincrement())
   submitterId             Int

src/backend/prisma/seed-data/risks.ts

@@ -5,14 +5,18 @@
 
 const dbSeedRisk1: any = {
   projectId: 1,
-  detail: 'This one might be a bit too expensive',
-  createdByUserId: 1
+  createdByUserId: 1,
+  fields: {
+    detail: 'This one might be a bit too expensive'
+  }
 };
 
 const dbSeedRisk2: any = {
   projectId: 1,
-  detail: 'Risky Risk 123',
-  createdByUserId: 1
+  createdByUserId: 1,
+  fields: {
+    detail: 'Risky Risk 123'
+  }
 };
 
 export const dbSeedAllRisks: any[] = [dbSeedRisk1, dbSeedRisk2];

src/backend/prisma/seed.ts

@@ -15,7 +15,7 @@ const prisma = new PrismaClient();
 
 const performSeed: () => Promise<void> = async () => {
   for (const seedUser of dbSeedAllUsers) {
-    await prisma.user.create({ data: { ...seedUser } });
+    await prisma.user.create({ data: { ...seedUser, userSettings: { create: {} } } });
   }
 
   for (const seedSession of dbSeedAllSessions) {
@@ -44,7 +44,7 @@ const performSeed: () => Promise<void> = async () => {
       data: {
         createdBy: { connect: { userId: seedRisk.createdByUserId } },
         project: { connect: { projectId: seedRisk.projectId } },
-        ...seedRisk
+        ...seedRisk.fields
       }
     });
   }

src/frontend/app/app-public/app-public.tsx

@@ -20,7 +20,7 @@ const AppPublic: React.FC = () => {
   document.body.style.backgroundColor = theme.bgColor;
 
   return (
-    <html className={theme.name}>
+    <html className={theme.cardBg}>
       <Switch>
         <Route path={routes.LOGIN}>
           <Login

src/frontend/pages/LoginPage/login-page/login-page.test.tsx

@@ -3,6 +3,7 @@
  * See the LICENSE file in the repository root folder for details.
  */
 
+import themes from '../../../../shared/themes';
 import { render, screen } from '../../../../test-support/test-utils';
 import LoginPage from './login-page';
 
@@ -16,6 +17,7 @@ const renderComponent = () => {
       devFormSubmit={(e) => e}
       prodSuccess={(r) => r}
       prodFailure={(r) => r}
+      theme={themes[0]}
     />
   );
 };

src/frontend/pages/LoginPage/login-page/login-page.tsx

@@ -7,13 +7,14 @@ import GoogleLogin from 'react-google-login';
 import { Card } from 'react-bootstrap';
 import styles from './login-page.module.css';
 import LoginDev from '../login-dev/login-dev';
-import { useTheme } from '../../../../services/theme.hooks';
+import { Theme } from '../../../../shared/types';
 
 interface LoginPageProps {
   devSetRole: (role: string) => void;
   devFormSubmit: (e: any) => any;
   prodSuccess: (res: any) => any;
   prodFailure: (res: any) => any;
+  theme: Theme;
 }
 
 /**
@@ -23,10 +24,9 @@ const LoginPage: React.FC<LoginPageProps> = ({
   devSetRole,
   devFormSubmit,
   prodSuccess,
-  prodFailure
+  prodFailure,
+  theme
 }) => {
-  const theme = useTheme();
-
   return (
     <Card bg={theme.cardBg} className={'mx-auto mt-sm-5 ' + styles.card}>
       <Card.Body>

src/frontend/pages/LoginPage/login.test.tsx

@@ -19,7 +19,7 @@ const renderComponent = () => {
     history.listen((loc) => {
       pushed.push(loc.pathname);
     });
-    return <Login postLoginRedirect={routes.HOME} />;
+    return <Login postLoginRedirect={{ url: routes.HOME, search: '' }} />;
   };
   const RouterWrapper = routerWrapperBuilder({ path: routes.LOGIN, route: routes.LOGIN });
   return render(

src/frontend/pages/LoginPage/login.tsx

@@ -7,11 +7,12 @@ import { useState } from 'react';
 import { useHistory } from 'react-router';
 import { Role } from '@prisma/client';
 import { exampleAllUsers } from '../../../test-support/test-data/users.stub';
+import { useTheme } from '../../../services/theme.hooks';
 import { useAuth } from '../../../services/auth.hooks';
-import LoginPage from './login-page/login-page';
-import './login.module.css';
 import { routes } from '../../../shared/routes';
+import LoginPage from './login-page/login-page';
 import LoadingIndicator from '../../components/loading-indicator/loading-indicator';
+import './login.module.css';
 
 interface LoginProps {
   postLoginRedirect: { url: string; search: string };
@@ -23,6 +24,7 @@ interface LoginProps {
 const Login: React.FC<LoginProps> = ({ postLoginRedirect }) => {
   const [devUserRole, setDevUserRole] = useState<string>(Role.APP_ADMIN);
   const history = useHistory();
+  const theme = useTheme();
   const auth = useAuth();
 
   if (auth.isLoading) return <LoadingIndicator />;
@@ -46,7 +48,10 @@ const Login: React.FC<LoginProps> = ({ postLoginRedirect }) => {
   const verifyLogin = async (response: any) => {
     const { id_token } = response.getAuthResponse();
     if (!id_token) throw new Error('Invalid login object');
-    await auth.signin(id_token);
+    const authedUser = await auth.signin(id_token);
+    if (authedUser.defaultTheme && authedUser.defaultTheme !== theme.name) {
+      theme.toggleTheme!(authedUser.defaultTheme);
+    }
     redirectAfterLogin();
   };
 
@@ -60,6 +65,7 @@ const Login: React.FC<LoginProps> = ({ postLoginRedirect }) => {
       devFormSubmit={devFormSubmit}
       prodSuccess={verifyLogin}
       prodFailure={handleFailure}
+      theme={theme}
     />
   );
 };

src/frontend/pages/SettingsPage/settings.test.tsx

@@ -7,6 +7,15 @@ import { render, screen, routerWrapperBuilder } from '../../../test-support/test
 import { routes } from '../../../shared/routes';
 import Settings from './settings';
 
+jest.mock('./user-settings/user-settings', () => {
+  return {
+    __esModule: true,
+    default: () => {
+      return <div>user-settings</div>;
+    }
+  };
+});
+
 /**
  * Sets up the component under test with the desired values and renders it.
  */
@@ -44,4 +53,9 @@ describe('settings page component', () => {
     renderComponent();
     expect(screen.getByText(/Role:/)).toBeInTheDocument();
   });
+
+  it('renders user settings component', () => {
+    renderComponent();
+    expect(screen.getByText('user-settings')).toBeInTheDocument();
+  });
 });

src/frontend/pages/SettingsPage/settings.tsx

@@ -8,6 +8,7 @@ import { Alert, Col, Container, Form, Row } from 'react-bootstrap';
 import { useAuth } from '../../../services/auth.hooks';
 import PageTitle from '../../layouts/page-title/page-title';
 import PageBlock from '../../layouts/page-block/page-block';
+import UserSettings from './user-settings/user-settings';
 
 const Settings: React.FC = () => {
   const auth = useAuth();
@@ -39,7 +40,7 @@ const Settings: React.FC = () => {
           </Row>
         </Container>
       </PageBlock>
-      <PageBlock title="User Settings">
+      <PageBlock title="User Details">
         <Container fluid>
           <Row>
             <Col md={4} lg={2}>
@@ -60,6 +61,7 @@ const Settings: React.FC = () => {
           </Row>
         </Container>
       </PageBlock>
+      <UserSettings userId={auth.user?.userId!} />
     </Container>
   );
 };