Aarni Halinen
81 lines
2.3 KiB
TypeScript
81 lines
2.3 KiB
TypeScript
import React, { useEffect, useState } from "react";
|
|
import { NextPage } from "next";
|
|
import { toast } from "react-toastify";
|
|
import styled from "styled-components";
|
|
import AdminListCommon from "@views/admin/AdminListCommon";
|
|
import { Button, Link } from "@components/index";
|
|
import AddLink from "@components/AddLink";
|
|
import SignupApi from "@api/signupApi";
|
|
import { TemplateQuestion } from "@models/TemplateQuestion";
|
|
|
|
const URL = "/admin/template-questions";
|
|
|
|
const StyledButton = styled(Button) <{ $colorOverride: "red" }>`
|
|
background-color: ${(p) => p.$colorOverride};
|
|
border-radius: 8px;
|
|
color: white;
|
|
font-size: 13px;
|
|
font-weight: bold;
|
|
`;
|
|
|
|
const confirmDelete = async (template: TemplateQuestion) => {
|
|
if (window.confirm(`Delete: ${template.id}: ${template.name}; Are you sure?`) === true) {
|
|
try {
|
|
await SignupApi.deleteTemplateQuestion(template.id);
|
|
toast.success("Template question removed successfully 😎");
|
|
window.location.reload(); // TODO: Fetch/update event list, so user sees the signup in the list
|
|
} catch (err) {
|
|
toast.error("Uh oh! Something went wrong! Try again later. 😟");
|
|
}
|
|
}
|
|
};
|
|
|
|
const renderData = (templates: TemplateQuestion[]) => {
|
|
if (templates.length === 0) {
|
|
return <div>No signup forms.</div>;
|
|
}
|
|
|
|
return (
|
|
<table>
|
|
<thead>
|
|
<tr>
|
|
<th>Name</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
{templates.map((template) => (
|
|
<tr key={template.id}>
|
|
<td><Link to={`${URL}/${template.id}`}>{template.name}</Link></td>
|
|
<td>
|
|
<StyledButton $colorOverride="red" buttonStyle="filled" onClick={() => confirmDelete(template)}>
|
|
Delete
|
|
</StyledButton>
|
|
</td>
|
|
</tr>
|
|
))}
|
|
</tbody>
|
|
</table>
|
|
);
|
|
};
|
|
|
|
const AdminSignupTemplateQuestions: NextPage = () => {
|
|
const [allTemplates, setTemplates] = useState<TemplateQuestion[]>([]);
|
|
|
|
useEffect(() => {
|
|
SignupApi.getTemplateQuestions(true)
|
|
.then((res) => setTemplates(res));
|
|
}, []);
|
|
|
|
console.log(allTemplates);
|
|
|
|
return (
|
|
<AdminListCommon>
|
|
<h1>Sign-up forms</h1>
|
|
<AddLink text="Create template questions" to={`${URL}/create`} data-e2e="create-template-questions" />
|
|
{renderData(allTemplates)}
|
|
</AdminListCommon>
|
|
);
|
|
};
|
|
|
|
export default AdminSignupTemplateQuestions;
|