Show confetti after registering a user

app/routes/users/components/Confetti.css

@@ -0,0 +1,6 @@
+.confetti {
+  position: fixed;
+  width: 100%;
+  height: 100%;
+  pointer-events: none;
+}

app/routes/users/components/Confetti.tsx

@@ -0,0 +1,20 @@
+import { useEffect, useState } from 'react';
+import Realistic from 'react-canvas-confetti/dist/presets/realistic';
+import styles from './Confetti.css';
+import type { TConductorInstance } from 'react-canvas-confetti/dist/types';
+
+const Confetti = () => {
+  const [conductor, setConductor] = useState<TConductorInstance>();
+
+  const onInit = ({ conductor }: { conductor: TConductorInstance }) => {
+    setConductor(conductor);
+  };
+
+  useEffect(() => {
+    conductor?.run({ speed: 1.5, duration: 1500 });
+  });
+
+  return <Realistic className={styles.confetti} onInit={onInit} />;
+};
+
+export default Confetti;

app/routes/users/components/UserConfirmation.tsx

@@ -4,7 +4,7 @@ import { normalize } from 'normalizr';
 import qs from 'qs';
 import { useState } from 'react';
 import { Field } from 'react-final-form';
-import { Link } from 'react-router-dom';
+import { Link, useLocation } from 'react-router-dom';
 import { User } from 'app/actions/ActionTypes';
 import {
   createUser,
@@ -26,18 +26,9 @@ import { useAppDispatch, useAppSelector } from 'app/store/hooks';
 import { spyValues } from 'app/utils/formSpyUtils';
 import { createValidator, required, sameAs } from 'app/utils/validation';
 import { validPassword } from '../utils';
+import Confetti from './Confetti';
 import PasswordField from './PasswordField';
 
-const loadData = ({ location: { search } }, dispatch) => {
-  const { token } = qs.parse(search, {
-    ignoreQueryPrefix: true,
-  });
-
-  if (token && typeof token === 'string') {
-    return dispatch(validateRegistrationToken(token));
-  }
-};
-
 export type FormValues = {
   username?: string;
   firstName?: string;
@@ -54,7 +45,21 @@ const UserConfirmationForm = () => {
 
   const token = useAppSelector((state) => state.auth.registrationToken);
 
-  usePreparedEffect('fetchUserConfirmation', () => loadData, []);
+  const { search } = useLocation();
+
+  usePreparedEffect(
+    'fetchUserConfirmation',
+    () => {
+      const { token } = qs.parse(search, {
+        ignoreQueryPrefix: true,
+      });
+
+      if (token && typeof token === 'string') {
+        return dispatch(validateRegistrationToken(token));
+      }
+    },
+    []
+  );
 
   const dispatch = useAppDispatch();
 
@@ -76,24 +81,29 @@ const UserConfirmationForm = () => {
 
   if (submitSucceeded) {
     return (
-      <Content>
-        <h1>Du er nå registrert!</h1>
-        <Card severity="warning">
-          <Card.Header>Er du student?</Card.Header>
-          <span>
-            For å kunne melde deg på arrangementer i Abakus må du verifisere at
-            du er student.
-          </span>
-        </Card>
-        <Flex column gap="1rem">
-          <Link to="/users/me/settings/student-confirmation/">
-            <Button success>Verifiser studentstatus</Button>
-          </Link>
-          <Link to="/">
-            <Button>Eller gå til hovedsiden</Button>
-          </Link>
-        </Flex>
-      </Content>
+      <>
+        <Confetti />
+
+        <Content>
+          <h1>Du er nå registrert!</h1>
+
+          <Card severity="warning">
+            <Card.Header>Er du student?</Card.Header>
+            <span>
+              For å kunne melde deg på arrangementer i Abakus må du verifisere
+              at du er student.
+            </span>
+          </Card>
+          <Flex gap="1rem">
+            <Link to="/users/me/settings/student-confirmation/">
+              <Button success>Verifiser studentstatus</Button>
+            </Link>
+            <Link to="/">
+              <Button>Eller gå til hovedsiden</Button>
+            </Link>
+          </Flex>
+        </Content>
+      </>
     );
   }
 

package.json

@@ -81,6 +81,7 @@
     "postcss": "^8.4.31",
     "qs": "^6.11.2",
     "react": "^18.2.0",
+    "react-canvas-confetti": "^2.0.5",
     "react-cropper": "^2.3.3",
     "react-dom": "^18.2.0",
     "react-dropzone": "^14.2.2",

yarn.lock

@@ -3442,6 +3442,11 @@
     "@types/connect" "*"
     "@types/node" "*"
 
+"@types/canvas-confetti@^1.6.4":
+  version "1.6.4"
+  resolved "https://registry.yarnpkg.com/@types/canvas-confetti/-/canvas-confetti-1.6.4.tgz#620fd8d78b335d6a4046c0f73236d6988b37552a"
+  integrity sha512-fNyZ/Fdw/Y92X0vv7B+BD6ysHL4xVU5dJcgzgxLdGbn8O3PezZNIJpml44lKM0nsGur+o/6+NZbZeNTt00U1uA==
+
 "@types/chai-subset@^1.3.3":
   version "1.3.5"
   resolved "https://registry.yarnpkg.com/@types/chai-subset/-/chai-subset-1.3.5.tgz#3fc044451f26985f45625230a7f22284808b0a9a"
@@ -5285,6 +5290,11 @@ caniuse-lite@^1.0.0, caniuse-lite@^1.0.30001538, caniuse-lite@^1.0.30001565:
   resolved "https://registry.yarnpkg.com/caniuse-lite/-/caniuse-lite-1.0.30001571.tgz#4182e93d696ff42930f4af7eba515ddeb57917ac"
   integrity sha512-tYq/6MoXhdezDLFZuCO/TKboTzuQ/xR5cFdgXPfDtM7/kchBO3b4VWghE/OAi/DV7tTdhmLjZiZBZi1fA/GheQ==
 
+canvas-confetti@^1.9.2:
+  version "1.9.2"
+  resolved "https://registry.yarnpkg.com/canvas-confetti/-/canvas-confetti-1.9.2.tgz#c9f74098c7fdf66dd9d1aab5d381061cf74e48f0"
+  integrity sha512-6Xi7aHHzKwxZsem4mCKoqP6YwUG3HamaHHAlz1hTNQPCqXhARFpSXnkC9TWlahHY5CG6hSL5XexNjxK8irVErg==
+
 caseless@~0.12.0:
   version "0.12.0"
   resolved "https://registry.yarnpkg.com/caseless/-/caseless-0.12.0.tgz#1b681c21ff84033c826543090689420d187151dc"
@@ -11069,6 +11079,14 @@ raw-body@2.5.1:
     iconv-lite "0.4.24"
     unpipe "1.0.0"
 
+react-canvas-confetti@^2.0.5:
+  version "2.0.5"
+  resolved "https://registry.yarnpkg.com/react-canvas-confetti/-/react-canvas-confetti-2.0.5.tgz#79e656bbd42965f21e545580d8fe726e27d9f639"
+  integrity sha512-fL5WMHdNeLFqCMkgm0k4FzjPviEIv702zLl8GOaBonbBN0YG7YUsMyTV4OTEh+ukJBIs9082vh/L8s7yPeU+FA==
+  dependencies:
+    "@types/canvas-confetti" "^1.6.4"
+    canvas-confetti "^1.9.2"
+
 react-colorful@^5.1.2:
   version "5.6.1"
   resolved "https://registry.yarnpkg.com/react-colorful/-/react-colorful-5.6.1.tgz#7dc2aed2d7c72fac89694e834d179e32f3da563b"