Merge pull request #657 from makerspace/emaus/140-refund-labaccess

Fix 140: refund labaccess

Author: emanuelen5

admin/dist/css/default.css

@@ -380,3 +380,7 @@ button > svg {
         flex-shrink: 0;
     }
 }
+
+.removebutton {
+    color: #a00000;
+}

admin/package-lock.json

@@ -44,6 +44,7 @@
         "@types/react-dom": "^18.0.0",
         "@types/react-router": "^5.1.13",
         "@types/react-router-dom": "^5.1.7",
+        "@types/uikit": "^3.14.5",
         "@types/underscore": "^1.11.1",
         "babel-core": "^7.0.0-0",
         "babel-jest": "^29.7.0",

admin/package.json

@@ -1,5 +1,4 @@
 import React, { useEffect, useMemo, useRef, useState } from "react";
-import { renderToString } from "react-dom/server";
 import { Prompt } from "react-router";
 import UIkit from "uikit";
 import { get, post } from "../gateway";
@@ -89,21 +88,19 @@ function DateView(props) {
 function MembershipAgreementSign({ member, has_signed }) {
     function prompt_lab_contract_not_signed() {
         return UIkit.modal.confirm(
-            renderToString(
-                <div>
-                    <p>
-                        Är du säker på {member.firstname} {member.lastname} inte
-                        har skrivit på ett labbavtal?
-                    </p>
-                    <p>
-                        Labbavtalet mottogs{" "}
-                        <strong>
-                            {dateTimeToStr(member.labaccess_agreement_at)}
-                        </strong>
-                        .{" "}
-                    </p>
-                </div>,
-            ),
+            <div>
+                <p>
+                    Är du säker på {member.firstname} {member.lastname} inte har
+                    skrivit på ett labbavtal?
+                </p>
+                <p>
+                    Labbavtalet mottogs{" "}
+                    <strong>
+                        {dateTimeToStr(member.labaccess_agreement_at)}
+                    </strong>
+                    .{" "}
+                </p>
+            </div>,
         );
     }
 

admin/src/Components/KeyHandoutForm.jsx

@@ -0,0 +1,22 @@
+import Base from "Models/Base";
+import { useEffect, useMemo, useState } from "react";
+
+export default function useModel<M extends Base<M>>(
+    model: { new (): M; get(id: number): any }, // This is an attempt to derive the Model's type from the argument
+    id: number,
+): M {
+    const instance = useMemo(() => model.get(id) as M, [model, id]);
+    const [version, setVersion] = useState(0); // Dummy state to force re-render
+
+    useEffect(() => {
+        const unsubscribe = instance.subscribe(() => {
+            setVersion((v) => v + 1);
+        });
+
+        return () => {
+            unsubscribe();
+        };
+    }, [id]);
+
+    return instance;
+}

admin/src/Hooks/useMember.tsx

@@ -1,22 +1,20 @@
 import PropTypes from "prop-types";
 import React, { createContext } from "react";
 import { useParams } from "react-router";
-import useMember from "../Hooks/useMember";
+import useModel from "../Hooks/useModel";
+import Member from "../Models/Member";
 import { NavItem } from "../nav";
 
 export const MemberContext = createContext(null);
 
 function MemberBox({ children }) {
     const { member_id } = useParams();
-    const member = useMember(member_id);
+    const member = useModel(Member, member_id);
 
     return (
         <MemberContext.Provider value={member}>
             <div>
-                <h2>
-                    Medlem #{member.member_number}: {member.firstname}{" "}
-                    {member.lastname}
-                </h2>
+                <h2>Medlem {member.toString()}</h2>
 
                 <ul className="uk-tab">
                     <NavItem