From b0c8b2378be8cdce1e84df62a6cb8811d6280dc2 Mon Sep 17 00:00:00 2001
From: Katalina Okano <git@kat.cafe>
Date: Mon, 5 Jul 2021 21:35:53 -0500
Subject: [PATCH] add databinding for editor actions and message

---
 .../atoms/text-input/TextInput.tsx            | 17 +++++++--
 .../organisms/app-shell/AppShell.styled.tsx   |  4 +-
 .../organisms/app-shell/AppShell.tsx          |  5 ++-
 .../organisms/editor-shell/EditorShell.tsx    | 37 ++++++++++++++++---
 .../organisms/masthead/Masthead.styled.tsx    |  2 +-
 .../organisms/masthead/Secondary.tsx          |  6 ++-
 .../design-system/templates/editor/Editor.tsx |  2 +-
 7 files changed, 57 insertions(+), 16 deletions(-)

diff --git a/packages/design-system/atoms/text-input/TextInput.tsx b/packages/design-system/atoms/text-input/TextInput.tsx
index 2abf17c..9bfbec3 100644
--- a/packages/design-system/atoms/text-input/TextInput.tsx
+++ b/packages/design-system/atoms/text-input/TextInput.tsx
@@ -94,18 +94,27 @@ const StyledTextarea = styled.textarea`
 export const MultilineTextInput = (
   props: TextInputProps<HTMLTextAreaElement> & { rows?: number }
 ) => {
-  const { ...rest } = props;
+  const { children, ...rest } = props;
   const [value, setValue] = React.useState(String(props.value));
-  const rows = Math.min(10, Math.max(props.rows || 2, value.split(/\r?\n/).length));
+  const rows = React.useMemo(
+    () => Math.min(10, Math.max(props.rows || 2, value.split(/\r?\n/).length)),
+    [value]
+  );
+
+  React.useEffect(() => {
+    setValue(String(props.value));
+  }, [props.value]);
+
   return (
     <StyledTextarea
       {...rest}
       rows={rows}
-      value={value}
       onChange={(eventData) => {
         setValue(eventData.target.value);
         props.onChange?.(eventData);
       }}
-    />
+    >
+      {value}
+    </StyledTextarea>
   );
 };
diff --git a/packages/design-system/organisms/app-shell/AppShell.styled.tsx b/packages/design-system/organisms/app-shell/AppShell.styled.tsx
index 9ff0c68..bc0b6bb 100644
--- a/packages/design-system/organisms/app-shell/AppShell.styled.tsx
+++ b/packages/design-system/organisms/app-shell/AppShell.styled.tsx
@@ -2,9 +2,9 @@ import { palette } from '@roleypoly/design-system/atoms/colors';
 import { fontCSS } from '@roleypoly/design-system/atoms/fonts';
 import styled, { createGlobalStyle } from 'styled-components';
 
-export const Content = styled.div<{ small?: boolean }>`
+export const Content = styled.div<{ small?: boolean; double?: boolean }>`
   margin: 0 auto;
-  margin-top: 50px;
+  margin-top: ${(props) => (props.double ? '100px' : '50px')};
   width: ${(props) => (props.small ? '960px' : '1024px')};
   max-width: 98vw;
   max-height: calc(100vh - 50px);
diff --git a/packages/design-system/organisms/app-shell/AppShell.tsx b/packages/design-system/organisms/app-shell/AppShell.tsx
index 2e348cd..f19e2d5 100644
--- a/packages/design-system/organisms/app-shell/AppShell.tsx
+++ b/packages/design-system/organisms/app-shell/AppShell.tsx
@@ -11,6 +11,7 @@ export type AppShellProps = {
   user?: DiscordUser;
   showFooter?: boolean;
   small?: boolean;
+  double?: boolean;
   activeGuildId?: string | null;
   guilds?: GuildSlug[];
   recentGuilds?: string[];
@@ -56,7 +57,9 @@ export const AppShell = (props: AppShellProps) => (
     )}
     <OptionallyScroll shouldScroll={!props.skeleton}>
       <>
-        <Content small={props.small}>{props.children}</Content>
+        <Content small={props.small} double={props.double}>
+          {props.children}
+        </Content>
         {props.showFooter && <Footer />}
       </>
     </OptionallyScroll>
diff --git a/packages/design-system/organisms/editor-shell/EditorShell.tsx b/packages/design-system/organisms/editor-shell/EditorShell.tsx
index 231a2e7..55e5aa1 100644
--- a/packages/design-system/organisms/editor-shell/EditorShell.tsx
+++ b/packages/design-system/organisms/editor-shell/EditorShell.tsx
@@ -1,4 +1,8 @@
+import { palette } from '@roleypoly/design-system/atoms/colors';
+import { FaderOpacity } from '@roleypoly/design-system/atoms/fader';
 import { Space } from '@roleypoly/design-system/atoms/space';
+import { MultilineTextInput } from '@roleypoly/design-system/atoms/text-input';
+import { AmbientLarge, LargeText } from '@roleypoly/design-system/atoms/typography';
 import { PickerCategory } from '@roleypoly/design-system/molecules/picker-category';
 import { ServerMasthead } from '@roleypoly/design-system/molecules/server-masthead';
 import { SecondaryEditing } from '@roleypoly/design-system/organisms/masthead';
@@ -7,11 +11,11 @@ import {
   Container,
   MessageBox,
 } from '@roleypoly/design-system/organisms/role-picker/RolePicker.styled';
-import { ReactifyNewlines } from '@roleypoly/misc-utils/ReactifyNewlines';
 import { Category, CategoryType, PresentableGuild, Role } from '@roleypoly/types';
 import deepEqual from 'deep-equal';
 import { sortBy } from 'lodash';
 import React from 'react';
+import { GoEyeClosed } from 'react-icons/go';
 
 export type EditorShellProps = {
   guild: PresentableGuild;
@@ -23,6 +27,10 @@ export type EditorShellProps = {
 export const EditorShell = (props: EditorShellProps) => {
   const [guild, setGuild] = React.useState<PresentableGuild>(props.guild);
 
+  React.useEffect(() => {
+    setGuild(props.guild);
+  }, [props.guild]);
+
   const reset = () => {
     setGuild(props.guild);
   };
@@ -50,14 +58,33 @@ export const EditorShell = (props: EditorShellProps) => {
 
   return (
     <>
-      <SecondaryEditing showReset={hasChanges} guild={props.guild.guild} />
-      <Container style={{ marginTop: 90 }}>
-        <Space />
+      <SecondaryEditing
+        showReset={hasChanges}
+        guild={props.guild.guild}
+        onReset={reset}
+        onSubmit={() => props.onGuildChange?.(guild)}
+      />
+      <Container style={{ marginTop: 95 }}>
         <ServerMasthead guild={props.guild.guild} editable={false} />
         <Space />
 
         <MessageBox>
-          <ReactifyNewlines>{props.guild.data.message}</ReactifyNewlines>
+          <LargeText>Server Message</LargeText>
+          <MultilineTextInput
+            rows={2}
+            value={guild.data.message}
+            onChange={(event) => onMessageChange(event.target.value)}
+            placeholder={`Hey friend from ${guild.guild.name}! Pick your roles!`}
+          >
+            {guild.data.message}
+          </MultilineTextInput>
+          <AmbientLarge style={{ display: 'flex', color: palette.taupe600 }}>
+            Shows a message to your server members.
+            <FaderOpacity isVisible={guild.data.message.trim().length === 0}>
+              &nbsp;Since the message is empty, this won't show up.&nbsp;&nbsp;&nbsp;
+              <GoEyeClosed style={{ position: 'relative', top: 2 }} />
+            </FaderOpacity>
+          </AmbientLarge>
         </MessageBox>
         <Space />
 
diff --git a/packages/design-system/organisms/masthead/Masthead.styled.tsx b/packages/design-system/organisms/masthead/Masthead.styled.tsx
index 02bb321..a622e11 100644
--- a/packages/design-system/organisms/masthead/Masthead.styled.tsx
+++ b/packages/design-system/organisms/masthead/Masthead.styled.tsx
@@ -97,7 +97,7 @@ export const SecondaryBase = styled(MastheadBase)`
   background-color: ${palette.taupe300};
   z-index: 99;
   padding: 0 15px;
-  box-shadow: 1px 1px 3px rgba(0, 0, 0, 0.2);
+  box-shadow: 1px 1px 3px rgba(0, 0, 0, 0.05);
 `;
 
 export const IconHolder = styled.div`
diff --git a/packages/design-system/organisms/masthead/Secondary.tsx b/packages/design-system/organisms/masthead/Secondary.tsx
index d113e06..7fd12d7 100644
--- a/packages/design-system/organisms/masthead/Secondary.tsx
+++ b/packages/design-system/organisms/masthead/Secondary.tsx
@@ -15,6 +15,8 @@ import {
 type SecondaryEditingProps = {
   guild: GuildSlug;
   showReset: boolean;
+  onReset?: () => void;
+  onSubmit?: () => void;
 };
 
 export const SecondaryEditing = (props: SecondaryEditingProps) => (
@@ -30,12 +32,12 @@ export const SecondaryEditing = (props: SecondaryEditingProps) => (
       </MastheadLeft>
       <MastheadRight>
         <FaderOpacity isVisible={props.showReset}>
-          <Button size="small" color="silent">
+          <Button size="small" color="silent" onClick={props.onReset}>
             Reset
           </Button>
         </FaderOpacity>
         &nbsp;&nbsp;
-        <Button size="small">
+        <Button size="small" onClick={props.onSubmit}>
           Done <GoCheck />
         </Button>
       </MastheadRight>
diff --git a/packages/design-system/templates/editor/Editor.tsx b/packages/design-system/templates/editor/Editor.tsx
index a86369b..6e6169c 100644
--- a/packages/design-system/templates/editor/Editor.tsx
+++ b/packages/design-system/templates/editor/Editor.tsx
@@ -10,7 +10,7 @@ export const EditorTemplate = (
   const { guild, onCategoryChange, onMessageChange, onGuildChange, ...appShellProps } =
     props;
   return (
-    <AppShell {...appShellProps} activeGuildId={guild.id}>
+    <AppShell {...appShellProps} activeGuildId={guild.id} small double>
       <EditorShell guild={guild} onGuildChange={onGuildChange} />
     </AppShell>
   );