From 5b459622d0b08bdc744c2f74dbea98b1e3e89134 Mon Sep 17 00:00:00 2001
From: Kalle <38327916+Sendouc@users.noreply.github.com>
Date: Fri, 29 Jul 2022 21:24:45 +0300
Subject: [PATCH] Add new events page initial

---
 app/components/Label.tsx          | 12 +++++--
 app/constants.ts                  |  1 +
 app/routes/calendar/index.tsx     |  7 ++++
 app/routes/calendar/new.tsx       | 57 +++++++++++++++++++++++++++++++
 app/routes/u.$identifier/edit.tsx |  1 -
 app/styles/calendar.css           |  5 +++
 app/styles/common.css             |  3 ++
 app/styles/u-edit.css             |  6 ----
 8 files changed, 83 insertions(+), 9 deletions(-)
 create mode 100644 app/routes/calendar/new.tsx

diff --git a/app/components/Label.tsx b/app/components/Label.tsx
index dcac385ca..0f420d896 100644
--- a/app/components/Label.tsx
+++ b/app/components/Label.tsx
@@ -11,12 +11,20 @@ type LabelProps = Pick<
     current: number;
     max: number;
   };
+  required?: boolean;
 };
 
-export function Label({ valueLimits, children, htmlFor }: LabelProps) {
+export function Label({
+  valueLimits,
+  required,
+  children,
+  htmlFor,
+}: LabelProps) {
   return (
     <div className="label__container">
-      <label htmlFor={htmlFor}>{children}</label>
+      <label htmlFor={htmlFor}>
+        {children} {required && <span className="text-error">*</span>}
+      </label>
       {valueLimits ? (
         <div className={clsx("label__value", lengthWarning(valueLimits))}>
           {valueLimits.current}/{valueLimits.max}
diff --git a/app/constants.ts b/app/constants.ts
index 186011f2a..246ddd23d 100644
--- a/app/constants.ts
+++ b/app/constants.ts
@@ -4,6 +4,7 @@ export const DISCORD_MESSAGE_MAX_LENGTH = 2000;
 export const USER_BIO_MAX_LENGTH = DISCORD_MESSAGE_MAX_LENGTH;
 export const PlUS_SUGGESTION_FIRST_COMMENT_MAX_LENGTH = 500;
 export const PlUS_SUGGESTION_COMMENT_MAX_LENGTH = TWEET_LENGTH_MAX_LENGTH;
+export const CALENDAR_EVENT_DESCRIPTION_MAX_LENGTH = DISCORD_MESSAGE_MAX_LENGTH;
 
 export const PLUS_TIERS = [1, 2, 3];
 
diff --git a/app/routes/calendar/index.tsx b/app/routes/calendar/index.tsx
index 904ee9f18..835dd0e4b 100644
--- a/app/routes/calendar/index.tsx
+++ b/app/routes/calendar/index.tsx
@@ -11,6 +11,7 @@ import { z } from "zod";
 import { LinkButton } from "~/components/Button";
 import { db } from "~/db";
 import { useIsMounted } from "~/hooks/useIsMounted";
+import { useUser } from "~/modules/auth";
 import { i18next } from "~/modules/i18n";
 import styles from "~/styles/calendar.css";
 import { joinListToNaturalString } from "~/utils/arrays";
@@ -118,11 +119,17 @@ function fetchEventsOfWeek(args: { week: number; year: number }) {
 }
 
 export default function CalendarPage() {
+  const user = useUser();
   const isMounted = useIsMounted();
 
   return (
     <main className="stack lg">
       <WeekLinks />
+      {user && (
+        <LinkButton to="new" className="calendar__add-new-button">
+          Add new
+        </LinkButton>
+      )}
       {isMounted ? <EventsList /> : <div className="calendar__placeholder" />}
     </main>
   );
diff --git a/app/routes/calendar/new.tsx b/app/routes/calendar/new.tsx
new file mode 100644
index 000000000..b6fb66b46
--- /dev/null
+++ b/app/routes/calendar/new.tsx
@@ -0,0 +1,57 @@
+import { Form } from "@remix-run/react";
+import { Label } from "~/components/Label";
+import { Main } from "~/components/Main";
+import * as React from "react";
+import { CalendarEvent } from "~/db/types";
+import { CALENDAR_EVENT_DESCRIPTION_MAX_LENGTH } from "~/constants";
+
+export default function CalendarNewEventPage() {
+  return (
+    <Main>
+      <Form className="stack md" method="post">
+        <NameInput />
+        <DescriptionTextarea />
+      </Form>
+    </Main>
+  );
+}
+
+function NameInput() {
+  return (
+    <div>
+      <Label htmlFor="country" required>
+        Name
+      </Label>
+      <input name="name" />
+    </div>
+  );
+}
+
+function DescriptionTextarea({
+  initialValue,
+}: {
+  initialValue?: CalendarEvent["description"];
+}) {
+  const [value, setValue] = React.useState(initialValue ?? "");
+
+  return (
+    <div>
+      <Label
+        htmlFor="description"
+        valueLimits={{
+          current: value.length,
+          max: CALENDAR_EVENT_DESCRIPTION_MAX_LENGTH,
+        }}
+      >
+        Description
+      </Label>
+      <textarea
+        id="description"
+        name="description"
+        value={value}
+        onChange={(e) => setValue(e.target.value)}
+        maxLength={CALENDAR_EVENT_DESCRIPTION_MAX_LENGTH}
+      />
+    </div>
+  );
+}
diff --git a/app/routes/u.$identifier/edit.tsx b/app/routes/u.$identifier/edit.tsx
index d02a4fcea..fc824726d 100644
--- a/app/routes/u.$identifier/edit.tsx
+++ b/app/routes/u.$identifier/edit.tsx
@@ -132,7 +132,6 @@ function BioTextarea({ initialValue }: { initialValue: User["bio"] }) {
       <textarea
         id="bio"
         name="bio"
-        className="u-edit__bio-textarea"
         data-cy="bio-textarea"
         value={value}
         onChange={(e) => setValue(e.target.value)}
diff --git a/app/styles/calendar.css b/app/styles/calendar.css
index 4312c1474..4c2c6196d 100644
--- a/app/styles/calendar.css
+++ b/app/styles/calendar.css
@@ -2,6 +2,11 @@
   height: 48rem;
 }
 
+.calendar__add-new-button {
+  margin-inline-start: auto;
+  margin-inline-end: var(--s-8);
+}
+
 .calendar__weeks {
   display: flex;
   align-items: center;
diff --git a/app/styles/common.css b/app/styles/common.css
index c500c2d78..cec999f0f 100644
--- a/app/styles/common.css
+++ b/app/styles/common.css
@@ -144,6 +144,9 @@ textarea:not(.plain) {
   overflow-wrap: normal;
   overflow-x: scroll;
   white-space: pre;
+  width: 18rem;
+  max-width: 100%;
+  height: 8rem;
 }
 
 progress {
diff --git a/app/styles/u-edit.css b/app/styles/u-edit.css
index 55585058c..a613dbc97 100644
--- a/app/styles/u-edit.css
+++ b/app/styles/u-edit.css
@@ -8,9 +8,3 @@
 .u-edit__country-select {
   max-width: 10rem;
 }
-
-.u-edit__bio-textarea {
-  width: 18rem;
-  max-width: 100%;
-  height: 8rem;
-}