Feat/separation concerns

frontend/app/src/bots/Body.tsx

@@ -11,7 +11,7 @@ import { useFuse, useScroll } from '../hooks';
 import { colors } from '../config/colors';
 import FadeLeft from '../components/animated/FadeLeft';
 import { useIsMobile } from '../hooks';
-import Form from '../components/form';
+import Form from '../components/form/bounty';
 import { botSchema } from '../components/form/schema';
 import Bot from './Bot';
 import BotView from './BotView';

frontend/app/src/components/form/inputs/index.tsx

@@ -138,15 +138,12 @@ margin-top: ${(p: any) => (p?.isTextField ? '2px' : '')};
 
 `;
 export const FieldTextArea = styled(EuiTextArea)<styledProps>`
-  // min-height: ${(p: any) => p?.height && p.height} !important;
-  // max-height: ${(p: any) => p?.width && p.height} !important;
   width: ${(p: any) => p?.color && p.color.width};
   background-color: ${(p: any) => p?.color && p.color.pureWhite} !important;
   background: ${(p: any) => p?.color && p.color.pureWhite} !important;
   max-width: 900px;
   color: ${(p: any) => p?.color && p.color.pureBlack} !important;
   box-shadow: none !important;
-  // border-bottom: ${(p: any) => p?.color && `1px solid ${p.color.grayish.G600}`};
   line-height: 17.6px;
 `;
 export default function Input(props: any) {

frontend/app/src/components/form/inputs/widgets/PeopleSearch.tsx

@@ -291,7 +291,7 @@ const InvitePeopleSearch = (props: InvitePeopleSearchProps) => {
   const [initialPeopleCount, setInitialPeopleCount] = useState<number>(20);
   const onButtonClick = () => setIsPopoverOpen((isPopoverOpen: boolean) => !isPopoverOpen);
   const closePopover = () => setIsPopoverOpen(false);
-  const { main, ui } = useStores();
+  const { main } = useStores();
 
   const { ref, inView } = useInView({
     triggerOnce: false,

frontend/app/src/components/form/style.ts

@@ -202,6 +202,15 @@ export const SchemaOuterContainer = styled.div`
   width: 100%;
   .SchemaInnerContainer {
     width: 70%;
+    @media only screen and (max-width: 700px) {
+      width: auto;
+    }
+  }
+`;
+
+export const AboutSchemaInner = styled.div`
+  @media only screen and (max-width: 700px) {
+    padding: 0px 25px;
   }
 `;
 
@@ -331,3 +340,11 @@ export const BountyContainer = styled.div<styledProps>`
     }
   }
 `;
+
+export const EditBountyText = styled.h4`
+  color: #3c3d3f;
+  font-weight: 700;
+  @media only screen and (max-width: 500px) {
+    font-size: 1.1rem;
+  }
+`;

frontend/app/src/people/main/AboutFocusView.tsx

@@ -0,0 +1,152 @@
+import React, { useEffect, useState, useRef } from 'react';
+import { cloneDeep } from 'lodash';
+import { observer } from 'mobx-react-lite';
+import { FocusViewProps } from 'people/interfaces';
+import { useStores } from '../../store';
+import Form from '../../components/form/about';
+
+import { B } from './style';
+
+const AboutFocusView = (props: FocusViewProps) => {
+  const {
+    goBack,
+    config,
+    selectedIndex,
+    canEdit,
+    person,
+    buttonsOnBottom,
+    formHeader,
+    manualGoBackOnly,
+    isFirstTimeScreen,
+    newDesign,
+    setRemoveNextAndPrev
+  } = props;
+  const { ui, main } = useStores();
+
+  const skipEditLayer = selectedIndex < 0 || config.skipEditLayer ? true : false;
+
+  const [loading] = useState(false);
+  const [editMode, setEditMode] = useState(skipEditLayer);
+  const [editable] = useState<boolean>(!canEdit);
+
+  const scrollDiv: any = useRef(null);
+  const formRef: any = useRef(null);
+
+  const isTorSave = canEdit && main.isTorSave();
+
+  // close bounty popup window
+  function closeModal() {
+    if (!manualGoBackOnly) {
+      ui.setEditMe(false);
+      if (props.goBack) props.goBack();
+    }
+  }
+
+  // get self on unmount if tor user
+  useEffect(
+    () =>
+      function cleanup() {
+        if (isTorSave) {
+          main.getSelf(null);
+        }
+      },
+    [main, isTorSave]
+  );
+
+  // eslint-disable-next-line @typescript-eslint/no-inferrable-types
+  async function submitForm(body: any, shouldCloseModal: boolean = true) {
+    const newBody = cloneDeep(body);
+
+    if (config && config.name === 'about') {
+      await main.saveProfile(newBody);
+      if (shouldCloseModal) {
+        closeModal();
+      }
+      return;
+    }
+  }
+
+  const initialValues: any = {};
+
+  const personInfo = canEdit ? ui.meInfo : person;
+
+  // set initials here
+  if (personInfo) {
+    if (config && config.name === 'about') {
+      initialValues.id = personInfo.id || 0;
+      initialValues.pubkey = personInfo.pubkey;
+      initialValues.owner_pubkey = personInfo.pubkey;
+      initialValues.alert = personInfo.extras?.alert || false;
+      initialValues.owner_alias = personInfo.owner_alias || '';
+      initialValues.img = personInfo.img || '';
+      initialValues.price_to_meet = personInfo.price_to_meet || 0;
+      initialValues.description = personInfo.description || '';
+      initialValues.loomEmbedUrl = personInfo.loomEmbedUrl || '';
+      // below are extras,
+      initialValues.twitter =
+        (personInfo.extras?.twitter && personInfo.extras?.twitter[0]?.value) || '';
+      initialValues.email = (personInfo.extras?.email && personInfo.extras?.email[0]?.value) || '';
+      initialValues.github =
+        (personInfo.extras?.github && personInfo.extras?.github[0]?.value) || '';
+      initialValues.facebook =
+        (personInfo.extras?.facebook && personInfo.extras?.facebook[0]?.value) || '';
+      // extras with multiple items
+      initialValues.coding_languages = personInfo.extras?.coding_languages || [];
+      initialValues.tribes = personInfo.extras?.tribes || [];
+      initialValues.repos = personInfo.extras?.repos || [];
+      initialValues.lightning =
+        (personInfo.extras?.lightning && personInfo.extras?.lightning[0]?.value) || '';
+      initialValues.amboss =
+        (personInfo.extras?.amboss && personInfo.extras?.amboss[0]?.value) || '';
+    }
+  }
+
+  function handleFormClose() {
+    if (skipEditLayer && goBack) goBack();
+    else {
+      setEditMode(false);
+      setRemoveNextAndPrev && setRemoveNextAndPrev(false);
+    }
+  }
+
+  return (
+    <div
+      style={{
+        ...props?.style,
+        width: '100%',
+        height: '100%'
+      }}
+    >
+      {editMode && (
+        <B ref={scrollDiv} hide={false}>
+          {formHeader && formHeader}
+          {ui.meInfo && (
+            <Form
+              newDesign={newDesign}
+              buttonsOnBottom={buttonsOnBottom}
+              isFirstTimeScreen={isFirstTimeScreen}
+              readOnly={editable}
+              formRef={formRef}
+              submitText={config && config.submitText}
+              loading={loading}
+              close={handleFormClose}
+              onSubmit={submitForm}
+              scrollDiv={scrollDiv}
+              schema={config && config.schema}
+              initialValues={initialValues}
+              extraHTML={
+                ui.meInfo.verification_signature
+                  ? {
+                      twitter: `<span>Post this to your twitter account to verify:</span><br/><strong>Sphinx Verification: ${ui.meInfo.verification_signature}</strong>`
+                    }
+                  : {}
+              }
+            />
+          )}
+        </B>
+      )}
+    </div>
+  );
+};
+
+export default observer(AboutFocusView);

frontend/app/src/people/main/FirstTimeScreen.tsx

@@ -3,7 +3,7 @@ import styled from 'styled-components';
 import { useStores } from '../../store';
 import { Modal } from '../../components/common';
 import { firstScreenSchema } from '../../components/form/schema';
-import FocusedView from './FocusView';
+import AboutFocusedView from './AboutFocusView';
 
 const B = styled.div`
   font-weight: bold;
@@ -54,7 +54,7 @@ export default function FirstTimeScreen() {
       }}
     >
       <div style={{ height: '100%', padding: 20, paddingTop: 0, width: '100%' }}>
-        <FocusedView
+        <AboutFocusedView
           formHeader={formHeader}
           isFirstTimeScreen={true}
           buttonsOnBottom={true}