Skip to content

Commit

Permalink
Merge pull request #881 from stakwork/feat/separation_concerns
Browse files Browse the repository at this point in the history
Feat/separation concerns
  • Loading branch information
elraphty authored Nov 4, 2023
2 parents 95a41f7 + fc20cef commit 1ca8a44
Show file tree
Hide file tree
Showing 15 changed files with 892 additions and 391 deletions.
2 changes: 1 addition & 1 deletion frontend/app/src/bots/Body.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -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';
Expand Down
418 changes: 418 additions & 0 deletions frontend/app/src/components/form/about/index.tsx

Large diffs are not rendered by default.

Large diffs are not rendered by default.

3 changes: 0 additions & 3 deletions frontend/app/src/components/form/inputs/index.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -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) {
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -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,
Expand Down
17 changes: 17 additions & 0 deletions frontend/app/src/components/form/style.ts
Original file line number Diff line number Diff line change
Expand Up @@ -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;
}
`;

Expand Down Expand Up @@ -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;
}
`;
152 changes: 152 additions & 0 deletions frontend/app/src/people/main/AboutFocusView.tsx
Original file line number Diff line number Diff line change
@@ -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);
4 changes: 2 additions & 2 deletions frontend/app/src/people/main/FirstTimeScreen.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -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;
Expand Down Expand Up @@ -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}
Expand Down
Loading

0 comments on commit 1ca8a44

Please sign in to comment.