Merge branch 'master' into 'production'

Prod deploy: Quickfix SWR events API infinite loop, add translations & end time on signup page

See merge request sahkoinsinoorikilta/vtmk/web2.0-frontend!65

.gitlab-ci.yml

@@ -131,7 +131,6 @@ deploy:prod:
   environment:
     name: production
     url: https://sahkoinsinoorikilta.fi
-  when: manual
   variables:
     DOCKER_HOST: $CI_DOCKER_HOST
     DOCKER_TLS_VERIFY: 1

src/hooks/useFetchEvents.ts

@@ -11,14 +11,15 @@ const fetcher = (url: string, config: AxiosRequestConfig) => axios.get(url, conf
 const generateFetchParams = (id = "", options: Options = {}) => {
   const url = `${URL}${id}`;
   const {
-    auth, onlyNonPast, limit, offset,
+    // auth, onlyNonPast, limit, offset,
+    auth, limit, offset,
   } = options;
 
   return {
     url,
     config: {
       params: {
-        since: onlyNonPast ? (new Date()).toISOString() : undefined,
+        // since: onlyNonPast ? (new Date()).toISOString() : undefined,
         limit,
         offset,
       },

src/i18n/locales/en/common.json

@@ -40,6 +40,15 @@
   "Se aukeaa":
   "Signup opens at",
 
+  "Ilmoittauminen sulkeutuu":
+  "Signup closes at",
+
+  "Ilmoittauminen on umpeutunut!":
+  "Signup has been closed!",
+
+  "Ilmoittautuneet":
+  "Signups",
+
   "Ilmoittautumalla hyväksyn":
   "By signing up I accept the",
 

src/views/SignUpPage/SignUpPageView.tsx

@@ -4,11 +4,12 @@ import { IChangeEvent, ISubmitEvent, ErrorSchema } from "react-jsonschema-form";
 import { SignupForm } from "@models/Signup";
 import Checkboxes from "@components/Widgets/Checkbox/Checkboxes";
 import RadioButtonWidget from "@components/Widgets/RadioButton/RadioButtonWidget";
-import { TextSection } from "@components/index";
+import { TextSection, ChangeLanguageButton } from "@components/index";
 import { colors } from "@theme/colors";
 import FormWrapper from "@views/common/FormWrapper";
 import Loader from "@components/Loader";
 import { buildFormSchema, buildUISchema } from "./FormUtils";
+import { useTranslation } from "../../i18n";
 
 const customWidgets = {
   radio: RadioButtonWidget,
@@ -16,27 +17,12 @@ const customWidgets = {
 };
 
 interface SignUpPageViewProps {
-  signUpForm: SignupForm;
+  signUpForm?: SignupForm;
   formData: any;
   onChange: (e: IChangeEvent<unknown>, es?: ErrorSchema) => unknown;
   onSubmit: (e: ISubmitEvent<unknown>) => unknown;
 }
 
-const renderList = (signUpForm: SignupForm) => (
-  <aside>
-    <div>
-      <h6>
-        Ilmoittautuneet{signUpForm.quota > 0 && (` (${signUpForm.signups.length}/${signUpForm.quota})`)}:
-      </h6>
-      <ol>
-        {signUpForm.signups.map((s, idx) => (
-          <li key={idx} className={signUpForm.quota && idx + 1 > signUpForm.quota ? "reserved" : ""}>{s}</li>
-        ))}
-      </ol>
-    </div>
-  </aside>
-);
-
 const StyledSection = styled(TextSection)`
   & > div {
     & > span {
@@ -60,70 +46,96 @@ const StyledSection = styled(TextSection)`
   }
 `;
 
+const LngButton = styled(ChangeLanguageButton)`
+  align-self: flex-end;
+  margin-right: 1rem;
+`;
+
 const SignUpPageView: React.FC<SignUpPageViewProps> = ({
   signUpForm,
   formData,
   onChange,
   onSubmit,
 }) => {
-  const renderForm = () => {
-    const schema = buildFormSchema(signUpForm);
-    const uiSchema = buildUISchema(signUpForm);
-
-    return (
-      <FormWrapper
-        schema={schema as any}
-        uiSchema={uiSchema}
-        formData={formData}
-        widgets={customWidgets}
-        idPrefix="rjsf"
-        onChange={onChange}
-        onSubmit={onSubmit}
-      />
-    );
+  const { i18n, t } = useTranslation();
+  const startDate = new Date(signUpForm?.start_time);
+  const endDate = new Date(signUpForm?.end_time);
+  const isFi = i18n.language === "fi";
+  const {
+    title, startDateStr, endDateStr,
+  } = {
+    title: isFi ? signUpForm?.title_fi : signUpForm?.title_en,
+    startDateStr: startDate.toLocaleString(isFi ? "fi-FI" : "en-GB"),
+    endDateStr: endDate.toLocaleString(isFi ? "fi-FI" : "en-GB"),
   };
 
+  const renderList = () => (
+    <aside>
+      <div>
+        <h6>
+          {t("Ilmoittautuneet")} {signUpForm.quota > 0 && (` (${signUpForm.signups.length}/${signUpForm.quota})`)}:
+        </h6>
+        <ol>
+          {signUpForm.signups.map((s, idx) => (
+            <li key={idx} className={signUpForm.quota && idx + 1 > signUpForm.quota ? "reserved" : ""}>{s}</li>
+          ))}
+        </ol>
+      </div>
+    </aside>
+  );
+
   let form: JSX.Element;
   let signups: JSX.Element = null;
-  const startTime = new Date(signUpForm?.start_time);
-  const endTime = new Date(signUpForm?.end_time);
-
   if (!signUpForm) {
     // Show loader if in edit mode and form has not yet loaded.
     // For normal signup page, form is always defined on this level.
     form = (
       <Loader $color={colors.darkBlue} />
     );
-  } else if (startTime > new Date()) {
+  } else if (startDate > new Date()) {
     form = (
       <>
-        <p>Ilmoittauminen ei ole vielä auennut!</p>
-        <p>Se aukeaa {startTime.toLocaleString("fi-FI")}.</p>
+        <p>{t("Ilmoittautuminen ei ole vielä auki!")}</p>
+        <p>{`${t("Se aukeaa")}  ${startDateStr}`}.</p>
       </>
     );
-  } else if (new Date() > endTime) {
+  } else if (new Date() > endDate) {
     form = (
-      <p>Ilmoittauminen on umpeutunut!</p>
+      <p>{t("Ilmoittauminen on umpeutunut!")}</p>
     );
-    signups = renderList(signUpForm);
+    signups = renderList();
   } else {
-    form = renderForm();
-    signups = renderList(signUpForm);
+    form = (
+      <>
+        <p>{`${t("Ilmoittauminen sulkeutuu")} ${endDateStr}`}.</p>
+        <FormWrapper
+          schema={buildFormSchema(signUpForm) as unknown}
+          uiSchema={buildUISchema(signUpForm)}
+          formData={formData}
+          widgets={customWidgets}
+          idPrefix="rjsf"
+          onChange={onChange}
+          onSubmit={onSubmit}
+        />
+      </>
+    );
+    signups = renderList();
   }
 
   return (
-    <StyledSection>
-      <h1>
-        {signUpForm && (
-          signUpForm.title_fi
-        )}
-      </h1>
+    <>
+      <LngButton />
+      <StyledSection>
+        <h1>
+          {title}
+        </h1>
 
-      <div>
-        {form}
-      </div>
-      {signups}
-    </StyledSection>
+        <div>
+          {form}
+        </div>
+        {signups}
+      </StyledSection>
+    </>
   );
 };