rage · mipyykko · Jan 12, 2023
diff --git a/frontend/components/CreateAccountForm.tsx b/frontend/components/CreateAccountForm.tsx
@@ -3,6 +3,7 @@ import { Component } from "react"
 import Link from "next/link"
 import { NextRouter, withRouter } from "next/router"
 
+import { ApolloClient } from "@apollo/client"
 import { CircularProgress, Paper, TextField, Typography } from "@mui/material"
 import { styled } from "@mui/material/styles"
 
@@ -60,6 +61,7 @@ export function capitalizeFirstLetter(string: string) {
 
 export interface CreateAccountFormProps {
   onComplete: (...args: any[]) => any
+  apolloClient?: ApolloClient<object>
   router: NextRouter
 }
 
@@ -109,11 +111,14 @@ class CreateAccountForm extends Component<CreateAccountFormProps> {
         password_confirmation: this.state.password_confirmation,
       })
 
-      await authenticate({
-        email: this.state.email ?? "",
-        password: this.state.password ?? "",
-        redirect: false,
-      })
+      await authenticate(
+        {
+          email: this.state.email ?? "",
+          password: this.state.password ?? "",
+          redirect: false,
+        },
+        this.props.apolloClient,
+      )
 
       this.props.onComplete()
     } catch (error: any) {
@@ -177,7 +182,7 @@ class CreateAccountForm extends Component<CreateAccountFormProps> {
         newState.error += t("emailNoAt")
         newState.errorObj.email = true
       }
-      if (email && email.indexOf(".") === -1) {
+      if (email.indexOf(".") === -1) {
         newState.error += t("emailNoPoint")
         newState.errorObj.email = true
       }

diff --git a/frontend/components/Dashboard/Editor/Course/CourseAliasEditForm.tsx b/frontend/components/Dashboard/Editor/Course/CourseAliasEditForm.tsx
@@ -51,7 +51,7 @@ const CourseAliasEditForm = () => {
               <>
                 {values.length ? (
                   values.map((alias, index: number) => (
-                    <Row>
+                    <Row key={`course-alias-${alias.course_code}`}>
                       <StyledFieldWithAnchor
                         id={`course_aliases[${index}].course_code`}
                         name={`course_aliases[${index}].course_code`}

diff --git a/frontend/components/Dashboard/StudyModules/ModuleCard.tsx b/frontend/components/Dashboard/StudyModules/ModuleCard.tsx
@@ -83,15 +83,15 @@ const NaviCardTitle = styled(Typography)`
 `
 
 interface ModuleCardProps {
-  module?: StudyModuleDetailedFieldsFragment
+  studyModule?: StudyModuleDetailedFieldsFragment
   loading?: boolean
 }
 
-function ModuleCard({ module, loading }: ModuleCardProps) {
-  const imageUrl = module
-    ? module.image
-      ? `../../../static/images/${module.image}`
-      : `../../../static/images/${module.slug}.jpg`
+function ModuleCard({ studyModule, loading }: ModuleCardProps) {
+  const imageUrl = studyModule
+    ? studyModule.image
+      ? `../../../static/images/${studyModule.image}`
+      : `../../../static/images/${studyModule.slug}.jpg`
     : "" // TODO: placeholder
 
   return (
@@ -126,7 +126,7 @@ function ModuleCard({ module, loading }: ModuleCardProps) {
             </NaviCardTitle>
           ) : (
             <NaviCardTitle align="left">
-              {module ? module.name : "New module"}
+              {studyModule?.name ?? "New module"}
             </NaviCardTitle>
           )}
 
@@ -138,10 +138,10 @@ function ModuleCard({ module, loading }: ModuleCardProps) {
             >
               <Skeleton variant="text" width="100%" />
             </ButtonWithPaddingAndMargin>
-          ) : module ? (
-            <Link href={`/study-modules/${module.slug}/edit`} passHref>
+          ) : studyModule ? (
+            <Link href={`/study-modules/${studyModule.slug}/edit`} passHref>
               {/* eslint-disable-next-line jsx-a11y/anchor-is-valid */}
-              <a aria-label={`Edit study module ${module.name}`}>
+              <a aria-label={`Edit study module ${studyModule.name}`}>
                 <ButtonWithPaddingAndMargin
                   variant="text"
                   color="secondary"

diff --git a/frontend/components/Dashboard/StudyModules/ModuleGrid.tsx b/frontend/components/Dashboard/StudyModules/ModuleGrid.tsx
@@ -20,8 +20,8 @@ const ModuleGrid = ({ modules, loading }: ModuleGridProps) => (
         ))
       ) : (
         <>
-          {modules?.map((module) => (
-            <ModuleCard key={module.slug} module={module} />
+          {modules?.map((studyModule) => (
+            <ModuleCard key={studyModule.slug} studyModule={studyModule} />
           ))}
           <ModuleCard key={"newmodule"} />
         </>

diff --git a/frontend/components/Dashboard/Users/UserInfo.tsx b/frontend/components/Dashboard/Users/UserInfo.tsx
@@ -139,7 +139,9 @@ const renderAvailableFields = (data: UserDetailedFieldsFragment) => {
       if (!content || !title) {
         return null
       }
-      return <InfoRow title={title} content={content} />
+      return (
+        <InfoRow title={title} content={content} key={`${data.id}-${field}`} />
+      )
     })
     .filter(notEmpty)
 }

diff --git a/frontend/components/FilterMenu.tsx b/frontend/components/FilterMenu.tsx
@@ -1,4 +1,4 @@
-import { useState } from "react"
+import React, { useCallback, useState } from "react"
 
 import { Clear, Search } from "@mui/icons-material"
 import {
@@ -135,16 +135,16 @@ export default function FilterMenu({
 
   useEffect(() => setLabelWidth(inputLabel?.current?.offsetWidth ?? 0), [])*/
 
-  const onSubmit = () => {
+  const onSubmit = useCallback(() => {
     setSearchVariables({
       ...searchVariables,
       search,
       hidden,
       handledBy,
     })
-  }
+  }, [searchVariables, search, hidden, handledBy, setSearchVariables])
 
-  const handleStatusChange =
+  const handleStatusChange = useCallback(
     (value: string) => (e: React.ChangeEvent<HTMLInputElement>) => {
       const newStatus = (
         e.target.checked
@@ -159,23 +159,63 @@ export default function FilterMenu({
         ...searchVariables,
         status: newStatus,
       })
-    }
+    },
+    [setStatus, setSearchVariables, searchVariables],
+  )
 
-  const handleHiddenChange = (e: React.ChangeEvent<HTMLInputElement>) => {
-    setHidden(e.target.checked)
-    setSearchVariables({
-      ...searchVariables,
-      hidden: e.target.checked,
-    })
-  }
+  const handleHiddenChange = useCallback(
+    (e: React.ChangeEvent<HTMLInputElement>) => {
+      setHidden(e.target.checked)
+      setSearchVariables({
+        ...searchVariables,
+        hidden: e.target.checked,
+      })
+    },
+    [setHidden, setSearchVariables, searchVariables],
+  )
 
-  const handleHandledByChange = (e: SelectChangeEvent<string>) => {
-    setHandledBy(e.target.value)
+  const handleHandledByChange = useCallback(
+    (e: SelectChangeEvent<string>) => {
+      setHandledBy(e.target.value)
+      setSearchVariables({
+        ...searchVariables,
+        handledBy: e.target.value,
+      })
+    },
+    [setHandledBy, setSearchVariables, searchVariables],
+  )
+
+  const handleSearchReset = useCallback(() => {
+    setSearch("")
+  }, [setSearch])
+
+  const handleSearchChange = useCallback(
+    (e: React.ChangeEvent<HTMLInputElement>) => {
+      setSearch(e.target.value)
+    },
+    [setSearch],
+  )
+
+  const handleSearchEnter = useCallback(
+    (e: React.KeyboardEvent<HTMLDivElement>) => {
+      if (e.key === "Enter") {
+        onSubmit()
+      }
+    },
+    [onSubmit],
+  )
+
+  const handleResetAll = useCallback(() => {
+    setHidden(true)
+    setHandledBy("")
+    setStatus([CourseStatus.Active, CourseStatus.Upcoming])
     setSearchVariables({
-      ...searchVariables,
-      handledBy: e.target.value,
+      search: "",
+      hidden: true,
+      handledBy: null,
+      status: [CourseStatus.Active, CourseStatus.Upcoming],
     })
-  }
+  }, [setHidden, setHandledBy, setStatus, setSearchVariables])
 
   return (
     <Container>
@@ -186,17 +226,13 @@ export default function FilterMenu({
           value={search}
           autoComplete="off"
           variant="outlined"
-          onChange={(e: React.ChangeEvent<HTMLInputElement>) =>
-            setSearch(e.target.value)
-          }
-          onKeyDown={(e) => e.key === "Enter" && onSubmit()}
+          onChange={handleSearchChange}
+          onKeyDown={handleSearchEnter}
           InputProps={{
             endAdornment: (
               <InputAdornment position="end">
                 <IconButton
-                  onClick={() => {
-                    setSearch("")
-                  }}
+                  onClick={handleSearchReset}
                   disabled={search === ""}
                   edge="end"
                   aria-label="clear search"
@@ -286,17 +322,7 @@ export default function FilterMenu({
           disabled={loading}
           color="secondary"
           variant="contained"
-          onClick={() => {
-            setHidden(true)
-            setHandledBy("")
-            setStatus([CourseStatus.Active, CourseStatus.Upcoming])
-            setSearchVariables({
-              search: "",
-              hidden: true,
-              handledBy: null,
-              status: [CourseStatus.Active, CourseStatus.Upcoming],
-            })
-          }}
+          onClick={handleResetAll}
         >
           {t("reset")}
         </Button>

diff --git a/frontend/components/HeaderBar/MoocLogo.tsx b/frontend/components/HeaderBar/MoocLogo.tsx
@@ -44,7 +44,8 @@ const MoocLogo = () => (
     <MoocLogoLink aria-label="MOOC.fi homepage">
       <MoocLogoAvatar
         alt="MOOC logo"
-        src={require("../../static/images/moocfi.svg")}
+        // src={require("../../static/images/moocfi.svg")}
+        src="/static/images/moocfi.svg"
       />
       <MoocLogoText>MOOC.fi</MoocLogoText>
     </MoocLogoLink>

diff --git a/frontend/components/Home/CourseAndModuleList.tsx b/frontend/components/Home/CourseAndModuleList.tsx
@@ -42,15 +42,15 @@ const CourseAndModuleList = () => {
   const { studyModules, modulesWithCourses } = useMemo(() => {
     let studyModules = modulesData?.study_modules ?? []
     const modulesWithCourses = studyModules
-      .map((module) => {
+      .map((studyModule) => {
         const moduleCourses = (courses ?? []).filter(
           (course) =>
             course.study_modules?.some(
               (courseModule) => courseModule.id === module.id,
             ) && course?.status !== CourseStatus.Ended,
         )
 
-        return { ...module, courses: moduleCourses }
+        return { ...studyModule, courses: moduleCourses }
       })
       .filter((m) => m.courses.length > 0)
 
@@ -126,8 +126,14 @@ const CourseAndModuleList = () => {
       </section>
       {language === "fi_FI" && (
         <section id="modules">
-          <ModuleNavi modules={studyModules} loading={modulesLoading} />
-          <ModuleList modules={modulesWithCourses} loading={modulesLoading} />
+          <ModuleNavi
+            modules={studyModules}
+            loading={coursesLoading || modulesLoading}
+          />
+          <ModuleList
+            modules={modulesWithCourses}
+            loading={coursesLoading || modulesLoading}
+          />
         </section>
       )}
       <CourseHighlights