Add types to StackWithBorder & TeamMember; fix all frontend typecheck errors

frontend/src/api/index.ts

@@ -29,6 +29,7 @@ import type {
   SuccessResponseDTO,
   TeamDTO,
   TeamResponseDTO,
+  TeamUpdateDTO,
   UserDTO,
   UserListDto,
 } from "./types/dto";
@@ -272,7 +273,7 @@ export class ApiClient {
    * @param team.teamImg The team's image
    * @param team.owner The team's owner
    */
-  public async updateTeam(team: TeamDTO): Promise<void> {
+  public async updateTeam(team: TeamUpdateDTO): Promise<void> {
     await this.put<ApplicationControllerMethods["updateTeam"]>(
       "/application/team",
       team,
@@ -314,7 +315,6 @@ export class ApiClient {
   ): Promise<void> {
     await this.delete<ApplicationControllerMethods["removeUserFromTeam"]>(
       `/application/team/${teamId}/members/${userId}`,
-      {} as never,
     );
   }
 

frontend/src/components/base/stack-with-border.tsx

@@ -1,13 +1,18 @@
 import * as React from "react";
 import { Stack, Tooltip } from "@mui/material";
 
-// TODO types. text and tooltip are optional
+interface StackWithBorderProps {
+  text?: string;
+  tooltip?: string;
+  children?: React.ReactNode;
+}
+
 /**
  * I typically use this to display some text and a few buttons,
  * with multiple of this on top of each other, like a table.
  * Maybe these components should use tables instead, idk. It looks nice.
  */
-export const StackWithBorder = ({ text, children, tooltip }) => {
+export const StackWithBorder = ({ text, children, tooltip }: StackWithBorderProps) => {
   return (
     <div
       style={{

frontend/src/components/pages/edit-team.tsx

@@ -6,7 +6,7 @@ import { RoundedImage } from "../base/image";
 import { Spacer } from "../base/flex";
 import { TextInput, TextInputType } from "../base/text-input";
 import { api, useApi } from "../../hooks/use-api";
-import { Card, CardContent, TextField, Stack } from "@mui/material";
+import { Card, CardContent } from "@mui/material";
 import { UserListDto, TeamResponseDTO } from "../../api/types/dto";
 import { useLoginContext } from "../../contexts/login-context";
 import { useHistory } from "react-router-dom";
@@ -16,11 +16,17 @@ import { PageHeader } from "../base/page-header";
 import { useNotificationContext } from "../../contexts/notification-context";
 import { StackWithBorder } from "../base/stack-with-border";
 
+interface TeamMemberRequestProps {
+  user: UserListDto;
+  updateTeamInProgress: boolean;
+  acceptUserToTeam: (user: UserListDto) => void;
+}
+
 const TeamMemberRequest = ({
   user,
   updateTeamInProgress,
   acceptUserToTeam,
-}) => {
+}: TeamMemberRequestProps) => {
   return (
     <StackWithBorder text={user.firstName}>
       <Button
@@ -38,14 +44,21 @@ const TeamMemberRequest = ({
   );
 };
 
-// TODO types
+interface TeamMemberProps {
+  team: TeamResponseDTO;
+  user: UserListDto;
+  updateTeamInProgress: boolean;
+  onSetOwner: (user: UserListDto) => void;
+  onRemove: (user: UserListDto) => void;
+}
+
 const TeamMember = ({
   team,
   user,
   updateTeamInProgress,
   onSetOwner,
   onRemove,
-}) => {
+}: TeamMemberProps) => {
   const { user: loginStateUser } = useLoginContext();
   const loggedInAsAdmin = loginStateUser?.role === UserRole.Root;
   const loggedInAsOwner = loginStateUser?.id === team.owner?.id;
@@ -129,7 +142,6 @@ export const EditTeam = ({ team }: { team: TeamResponseDTO }) => {
     async (apiClient, wasTriggeredManually) => {
       if (wasTriggeredManually) {
         await apiClient.updateTeam({
-          ...team,
           id: team.id,
           title,
           description,

frontend/src/components/pages/rating-form.tsx

@@ -4,7 +4,6 @@ import {
   RadioGroup,
   FormControlLabel,
   Radio,
-  Tooltip,
 } from "@mui/material";
 import { api } from "../../hooks/use-api";
 import { useLoginContext } from "../../contexts/login-context";