fix: new source and squad writing form issues (#2895)

dailydotdev · Apr 2, 2024 · b0a8d60 · b0a8d60
1 parent 7998f97
commit b0a8d60
Show file tree

Hide file tree

Showing 4 changed files with 73 additions and 46 deletions.
diff --git a/packages/shared/src/components/modals/NewSourceModal.tsx b/packages/shared/src/components/modals/NewSourceModal.tsx
@@ -242,6 +242,7 @@ export default function NewSourceModal(props: ModalProps): ReactElement {
     <Modal
       {...modalProps}
       formProps={{
+        title: 'Suggest new source',
         form: linkHasFeed ? 'select-feed' : 'submit-source',
         copy: { right: linkHasFeed ? 'Submit for review' : 'Check link' },
         rightButtonProps: {

diff --git a/packages/shared/src/components/squads/Details.tsx b/packages/shared/src/components/squads/Details.tsx
@@ -2,9 +2,10 @@ import React, { FormEvent, ReactElement, useContext, useState } from 'react';
 import classNames from 'classnames';
 import { ClientError } from 'graphql-request';
 import { useMutation } from '@tanstack/react-query';
+import { useRouter } from 'next/router';
 import { Button, ButtonColor, ButtonVariant } from '../buttons/Button';
 import { TextField } from '../fields/TextField';
-import { AtIcon, CameraIcon, SquadIcon } from '../icons';
+import { AtIcon, CameraIcon, SourceIcon, SquadIcon } from '../icons';
 import Textarea from '../fields/Textarea';
 import ImageInput from '../fields/ImageInput';
 import { cloudinary } from '../../lib/image';
@@ -16,8 +17,11 @@ import { IconSize } from '../Icon';
 import { SourceMemberRole } from '../../graphql/sources';
 import { Radio } from '../fields/Radio';
 import { squadsPublicWaitlist } from '../../lib/constants';
-import { ManageSquadPageFooter } from './utils';
+import { ManageSquadPageFooter, SquadSubTitle, SquadTitle } from './utils';
 import AuthContext from '../../contexts/AuthContext';
+import ConditionalWrapper from '../ConditionalWrapper';
+import { useViewSize, ViewSize } from '../../hooks';
+import { FormWrapper } from '../fields/form';
 
 const squadImageId = 'squad_image_file';
 
@@ -27,6 +31,8 @@ interface SquadDetailsProps {
   form: Partial<SquadForm>;
   createMode: boolean;
   onRequestClose?: () => void;
+  onCanSubmit?: (canSubmit: boolean) => void;
+  canSubmit?: (canSubmit: boolean) => void;
 }
 
 const getFormData = async (
@@ -101,11 +107,13 @@ export function SquadDetails({
     memberPostingRole: initialMemberPostingRole,
     memberInviteRole: initialMemberInviteRole,
   } = form;
+  const isMobile = useViewSize(ViewSize.MobileL);
   const [activeHandle, setActiveHandle] = useState(handle);
   const [imageChanged, setImageChanged] = useState(false);
   const [handleHint, setHandleHint] = useState<string>(null);
   const [canSubmit, setCanSubmit] = useState(!!name && !!activeHandle);
   const [isDescriptionOpen, setDescriptionOpen] = useState(!createMode);
+  const router = useRouter();
   const [memberPostingRole, setMemberPostingRole] = useState(
     () => initialMemberPostingRole || SourceMemberRole.Member,
   );
@@ -165,7 +173,41 @@ export function SquadDetails({
   };
 
   return (
-    <>
+    <ConditionalWrapper
+      condition={isMobile}
+      wrapper={(component) => (
+        <FormWrapper
+          form="squad-form"
+          copy={{ right: createMode ? 'Create Squad' : 'Save' }}
+          leftButtonProps={{
+            onClick: () =>
+              router.push(createMode ? '/squads' : `/squads/${handle}`),
+          }}
+          rightButtonProps={{
+            disabled: !canSubmit,
+            variant: ButtonVariant.Primary,
+            color: createMode ? ButtonColor.Cabbage : undefined,
+          }}
+        >
+          {component}
+        </FormWrapper>
+      )}
+    >
+      {createMode && (
+        <div
+          style={{
+            backgroundImage: `url(${cloudinary.squads.createSquad})`,
+          }}
+          className="mb-6 flex h-52 w-full flex-col items-center justify-center bg-cover bg-center"
+        >
+          <SourceIcon size={IconSize.XXXLarge} />
+          <SquadTitle className="mb-2">Create new Squad</SquadTitle>
+          <SquadSubTitle>
+            Create a group where you can learn and interact privately with other
+            developers around topics that matter to you
+          </SquadSubTitle>
+        </div>
+      )}
       <div className={classNames('flex flex-col', className)}>
         <form
           className="-mb-2 flex flex-col items-center gap-4"
@@ -286,25 +328,30 @@ export function SquadDetails({
           </div>
         </form>
       </div>
-      <ManageSquadPageFooter
-        className={classNames(!createMode && 'px-6', 'mt-auto justify-between')}
-      >
-        {createMode && (
-          <Button onClick={onRequestClose} variant={ButtonVariant.Tertiary}>
-            Close
-          </Button>
-        )}
-        <Button
-          variant={ButtonVariant.Primary}
-          color={createMode ? ButtonColor.Cabbage : undefined}
-          className={!createMode && 'w-full'}
-          form="squad-form"
-          type="submit"
-          disabled={!canSubmit}
+      {!isMobile && (
+        <ManageSquadPageFooter
+          className={classNames(
+            !createMode && 'px-6',
+            'mt-auto justify-between',
+          )}
         >
-          {createMode ? 'Create Squad' : 'Save'}
-        </Button>
-      </ManageSquadPageFooter>
-    </>
+          {createMode && (
+            <Button onClick={onRequestClose} variant={ButtonVariant.Tertiary}>
+              Close
+            </Button>
+          )}
+          <Button
+            variant={ButtonVariant.Primary}
+            color={createMode ? ButtonColor.Cabbage : undefined}
+            className={!createMode && 'w-full'}
+            form="squad-form"
+            type="submit"
+            disabled={!canSubmit}
+          >
+            {createMode ? 'Create Squad' : 'Save'}
+          </Button>
+        </ManageSquadPageFooter>
+      )}
+    </ConditionalWrapper>
   );
 }
diff --git a/packages/webapp/pages/squads/[handle]/edit.tsx b/packages/webapp/pages/squads/[handle]/edit.tsx
@@ -98,7 +98,7 @@ const EditSquad = ({ handle }: EditSquadPageProps): ReactElement => {
     <ManageSquadPageContainer>
       <NextSeo {...seo} titleTemplate="%s | daily.dev" noindex nofollow />
       <ManageSquadPageMain>
-        <ManageSquadPageHeader>
+        <ManageSquadPageHeader className="hidden tablet:flex">
           <Button
             className="mr-2"
             variant={ButtonVariant.Tertiary}

diff --git a/packages/webapp/pages/squads/new.tsx b/packages/webapp/pages/squads/new.tsx
@@ -1,4 +1,4 @@
-import React, { ReactElement, useContext, useState } from 'react';
+import React, { ReactElement, useContext } from 'react';
 import { NextSeo, NextSeoProps } from 'next-seo';
 import router, { useRouter } from 'next/router';
 import { useAuthContext } from '@dailydotdev/shared/src/contexts/AuthContext';
@@ -9,16 +9,11 @@ import { SquadForm, createSquad } from '@dailydotdev/shared/src/graphql/squads';
 import { useBoot } from '@dailydotdev/shared/src/hooks/useBoot';
 import { useToastNotification } from '@dailydotdev/shared/src/hooks/useToastNotification';
 import { AnalyticsEvent } from '@dailydotdev/shared/src/lib/analytics';
-import { SourceIcon } from '@dailydotdev/shared/src/components/icons';
 import {
-  SquadTitle,
-  SquadSubTitle,
   ManageSquadPageContainer,
   ManageSquadPageMain,
 } from '@dailydotdev/shared/src/components/squads/utils';
-import { cloudinary } from '@dailydotdev/shared/src/lib/image';
 import { MangeSquadPageSkeleton } from '@dailydotdev/shared/src/components/squads/MangeSquadPageSkeleton';
-import { IconSize } from '@dailydotdev/shared/src/components/Icon';
 import { ActionType } from '@dailydotdev/shared/src/graphql/actions';
 import { useActions } from '@dailydotdev/shared/src/hooks/useActions';
 import { getLayout as getMainLayout } from '../../components/layouts/MainLayout';
@@ -39,9 +34,6 @@ const NewSquad = (): ReactElement => {
   const { displayToast } = useToastNotification();
   const { addSquad } = useBoot();
   const { completeAction } = useActions();
-  const [form] = useState<Partial<SquadForm>>({
-    public: false,
-  });
 
   const onCreate = async (e, newSquadForm: SquadForm) => {
     e.preventDefault();
@@ -79,22 +71,9 @@ const NewSquad = (): ReactElement => {
     <ManageSquadPageContainer>
       <NextSeo {...seo} titleTemplate="%s | daily.dev" noindex nofollow />
       <ManageSquadPageMain>
-        <div
-          style={{
-            backgroundImage: `url(${cloudinary.squads.createSquad})`,
-          }}
-          className="mb-6 flex h-52 w-full flex-col items-center justify-center bg-cover"
-        >
-          <SourceIcon size={IconSize.XXXLarge} />
-          <SquadTitle className="mb-2">Create new Squad</SquadTitle>
-          <SquadSubTitle>
-            Create a group where you can learn and interact privately with other
-            developers around topics that matter to you
-          </SquadSubTitle>
-        </div>
         <SquadDetails
           className="p-8 pt-0"
-          form={form}
+          form={{ public: false }}
           onRequestClose={handleClose}
           onSubmit={onCreate}
           createMode