diff --git a/frontend/src/components/Profiles/index.js b/frontend/src/components/Profiles/index.js index 304d9e66..45e300ab 100644 --- a/frontend/src/components/Profiles/index.js +++ b/frontend/src/components/Profiles/index.js @@ -6,6 +6,9 @@ import { getProfileImageSrcString } from '../../squeakimages/images'; import Loader from '../Loader' import SqueakCard from '../SqueakCard' +import { Form, Input, Select, Checkbox, Relevant, Debug, TextArea, Option } from 'informed'; + + import { unwrapResult } from '@reduxjs/toolkit' import { useDispatch } from 'react-redux' @@ -19,225 +22,216 @@ import { const Profiles = (props) => { - const [tab, setTab] = useState('Signing Profiles') - const [signingProfileModalOpen, setSigningProfileModalOpen] = useState(false) - const [contactProfileModalOpen, setContactProfileModalOpen] = useState(false) - const [styleBody, setStyleBody] = useState(false) - const [newProfileName, setNewProfileName] = useState('') - const [newProfilePubkey, setNewProfilePubkey] = useState('') - const [usePrivKey, setUsePrivKey] = useState(false) - const [newProfilePrivkey, setNewProfilePrivkey] = useState('') + const [tab, setTab] = useState('Signing Profiles') + const [signingProfileModalOpen, setSigningProfileModalOpen] = useState(false) + const [contactProfileModalOpen, setContactProfileModalOpen] = useState(false) + const [styleBody, setStyleBody] = useState(false) + const dispatch = useDispatch() - const dispatch = useDispatch() - - const searchOnChange = (param) => { - if(tab !== 'Search'){setTab('Search')} - if(param.length>0){ - // TODO: search for a profile by name. - } + const searchOnChange = (param) => { + if(tab !== 'Search'){setTab('Search')} + if(param.length>0){ + // TODO: search for a profile by name. } + } - const toggleSigningProfileModal = (param, type) => { - setStyleBody(!styleBody) - setTimeout(()=>{ setSigningProfileModalOpen(!signingProfileModalOpen) },20) + const toggleSigningProfileModal = (param, type) => { + setStyleBody(!styleBody) + setTimeout(()=>{ setSigningProfileModalOpen(!signingProfileModalOpen) },20) + } + + const toggleContactProfileModal = (param, type) => { + setStyleBody(!styleBody) + setTimeout(()=>{ setContactProfileModalOpen(!contactProfileModalOpen) },20) + } + + const createSigningProfile = ({values}) => { + console.log(values); + if (values.importExisting) { + console.log('Import signing profile with name:', values.name); + dispatch(setImportSigningProfile({profileName: values.name, privateKey: values.privateKey})) + .then(unwrapResult) + .then((pubkey) => { + console.log('Created profile with pubkey', pubkey); + props.history.push(`/app/profile/${pubkey}`); + }) + .catch((err) => { + alert(err.message); + }); + } else { + console.log('Create signing profile with name:', values.name); + dispatch(setCreateSigningProfile({profileName: values.name})) + .then(unwrapResult) + .then((pubkey) => { + console.log('Created profile with pubkey', pubkey); + props.history.push(`/app/profile/${pubkey}`); + }) + .catch((err) => { + alert(err.message); + }); } + toggleSigningProfileModal(); + } - const toggleContactProfileModal = (param, type) => { - setStyleBody(!styleBody) - setTimeout(()=>{ setContactProfileModalOpen(!contactProfileModalOpen) },20) - } + const createContactProfile = ({values}) => { + dispatch(setCreateContactProfile({profileName: values.name, pubkey: values.pubkey})) + .then(unwrapResult) + .then((pubkey) => { + console.log('Created profile with pubkey', pubkey); + props.history.push(`/app/profile/${pubkey}`); + }) + .catch((err) => { + alert(err.message); + }); + toggleContactProfileModal(); + } - const createSigningProfile = () => { - if (usePrivKey) { - console.log('Import signing profile with name:', newProfileName); - dispatch(setImportSigningProfile({profileName: newProfileName, privateKey: newProfilePrivkey})) - .then(unwrapResult) - .then((pubkey) => { - console.log('Created profile with pubkey', pubkey); - props.history.push(`/app/profile/${pubkey}`); - }) - .catch((err) => { - alert(err.message); - }); - } else { - console.log('Create signing profile with name:', newProfileName); - dispatch(setCreateSigningProfile({profileName: newProfileName})) - .then(unwrapResult) - .then((pubkey) => { - console.log('Created profile with pubkey', pubkey); - props.history.push(`/app/profile/${pubkey}`); - }) - .catch((err) => { - alert(err.message); - }); - } - toggleSigningProfileModal(); - } + const handleModalClick = (e) => { + e.stopPropagation() + } - const createContactProfile = () => { - dispatch(setCreateContactProfile({profileName: newProfileName, pubkey: newProfilePubkey})) - .then(unwrapResult) - .then((pubkey) => { - console.log('Created profile with pubkey', pubkey); - props.history.push(`/app/profile/${pubkey}`); - }) - .catch((err) => { - alert(err.message); - }); - toggleContactProfileModal(); - } + const CreateSigningProfileForm = () => ( +
+
+ +
+
+ +
+ formState.values.importExisting}> +
+ +
+ - const handleModalClick = (e) => { - e.stopPropagation() - } +
+
+
+
+
+
+ +
+
+
+ ); - const handleChangeUsePrivKey = () => { - setUsePrivKey(!usePrivKey); - }; + const CreateContactProfileForm = () => ( +
+
+ +
+
+ +
+ +
+
+
+
+
+
+ +
+
+
+ ); - return( -
+ return( +
-
-
-
-
- -
-
- searchOnChange(e.target.value)} placeholder="Search for people" type="text" name="search"/> -
-
+
+
+
+
+
-
-
+
+ searchOnChange(e.target.value)} placeholder="Search for people" type="text" name="search"/> +
+
+
+
+
toggleSigningProfileModal('edit')} - className='profiles-create-button'> - Add Signing Profile + className='profiles-create-button'> + Add Signing Profile
toggleContactProfileModal('edit')} - className='profiles-create-button'> - Add Contact Profile + className='profiles-create-button'> + Add Contact Profile
+
+
+
+
+
setTab('Signing Profiles')} className={tab === 'Signing Profiles' ? `explore-nav-item activeTab` : `explore-nav-item`}> + Signing Profiles
+
setTab('Contact Profiles')} className={tab === 'Contact Profiles' ? `explore-nav-item activeTab` : `explore-nav-item`}> + Contact Profiles
-
-
-
setTab('Signing Profiles')} className={tab === 'Signing Profiles' ? `explore-nav-item activeTab` : `explore-nav-item`}> - Signing Profiles -
-
setTab('Contact Profiles')} className={tab === 'Contact Profiles' ? `explore-nav-item activeTab` : `explore-nav-item`}> - Contact Profiles -
-
- {tab === 'Signing Profiles' ? - - : - tab === 'Contact Profiles' ? - - :
- Nothing to see here .. -
- Try searching for people, usernames, or keywords +
+ {tab === 'Signing Profiles' ? + + : + tab === 'Contact Profiles' ? + + :
+ Nothing to see here .. +
+ Try searching for people, usernames, or keywords -
- } +
+ } +
+
+ + + {/* Modal for create signing profile */} +
toggleSigningProfileModal()} style={{display: signingProfileModalOpen ? 'block' : 'none'}} className="modal-edit"> +
handleModalClick(e)} className="modal-content"> +
+
+
toggleSigningProfileModal()} className="modal-closeIcon-wrap"> +
+
+

Add Signing Profile

+
+ +
+
+
- {/* Modal for create signing profile */} -
toggleSigningProfileModal()} style={{display: signingProfileModalOpen ? 'block' : 'none'}} className="modal-edit"> -
handleModalClick(e)} className="modal-content"> -
-
-
toggleSigningProfileModal()} className="modal-closeIcon-wrap"> - -
-
-

Add Signing Profile

- -
-
- Submit -
-
-
- -
-
-
-
- - setNewProfileName(e.target.value)} type="text" name="name" className="edit-input"/> -
-
-
-
- -
-
- {usePrivKey && -
-
- - setNewProfilePrivkey(e.target.value)} type="text" name="name" className="edit-input"/> -
-
- } -
-
+ {/* Modal for create contact profile */} +
toggleContactProfileModal()} style={{display: contactProfileModalOpen ? 'block' : 'none'}} className="modal-edit"> +
handleModalClick(e)} className="modal-content"> +
+
+
toggleContactProfileModal()} className="modal-closeIcon-wrap"> +
+
+

Add Contact Profile

- {/* Modal for create contact profile */} -
toggleContactProfileModal()} style={{display: contactProfileModalOpen ? 'block' : 'none'}} className="modal-edit"> -
handleModalClick(e)} className="modal-content"> -
-
-
toggleContactProfileModal()} className="modal-closeIcon-wrap"> - -
-
-

Add Contact Profile

- -
-
- Submit -
-
-
- -
-
-
-
- - setNewProfileName(e.target.value)} type="text" name="name" className="edit-input"/> -
-
-
-
- - setNewProfilePubkey(e.target.value)} type="text" name="name" className="edit-input"/> -
-
-
-
-
+
+
+
+
-
- ) +
+) } export default withRouter(Profiles) diff --git a/frontend/src/components/Twitter/index.js b/frontend/src/components/Twitter/index.js index 43d11e74..425628bb 100644 --- a/frontend/src/components/Twitter/index.js +++ b/frontend/src/components/Twitter/index.js @@ -5,8 +5,8 @@ import { ICON_SEARCH, ICON_ARROWBACK, ICON_CLOSE } from '../../Icons' import { getProfileImageSrcString } from '../../squeakimages/images'; import Loader from '../Loader' import SqueakCard from '../SqueakCard' -import Select from 'react-select' +import { Form, Input, Checkbox, Select, Relevant, Debug, TextArea, Option } from 'informed'; import { unwrapResult } from '@reduxjs/toolkit' import { useDispatch } from 'react-redux' @@ -31,10 +31,6 @@ const Twitter = (props) => { const [tab, setTab] = useState('Signing Profiles') const [twitterAccountModalOpen, setTwitterAccountModalOpen] = useState(false) const [styleBody, setStyleBody] = useState(false) - const [twitterHandle, setTwitterHandle] = useState('') - const [newProfilePubkey, setNewProfilePubkey] = useState('') - const [bearerToken, setBearerToken] = useState('') - const [signingProfile, setSigningProfile] = useState(null) const signingProfiles = useSelector(selectSigningProfiles); @@ -59,20 +55,20 @@ const Twitter = (props) => { setTimeout(()=>{ setTwitterAccountModalOpen(!twitterAccountModalOpen) },20) } - const createTwitterAccount = () => { - console.log('Create twitter account with handle:', twitterHandle); - if (!signingProfile) { + const createTwitterAccount = ({values}) => { + console.log('Create twitter account with handle:', values.twitterHandle); + if (!values.signingProfileId) { alert('Signing profile must be set.'); return; } dispatch(setCreateTwitterAccount({ - twitterHandle: twitterHandle, - profileId: signingProfile.getProfileId(), - bearerToken: bearerToken, + twitterHandle: values.twitterHandle, + profileId: values.signingProfileId, + bearerToken: values.twitterBearerToken, })) .then(unwrapResult) .then((pubkey) => { - console.log('Created twitter account with handle', twitterHandle); + console.log('Created twitter account with handle', values.twitterHandle); }) .catch((err) => { alert(err.message); @@ -84,10 +80,37 @@ const Twitter = (props) => { e.stopPropagation() } - const handleChangeSigningProfile = (e) => { - setSigningProfile(e.value); - } - + const AddTwitterAccountForm = () => ( +
+
+ +
+
+ +
+
+ +
+
+
+
+
+
+
+ +
+
+
+ ); return(
@@ -129,37 +152,10 @@ const Twitter = (props) => {

Add Twitter Account

- -
-
- Submit -
-
-
-
-
- - setTwitterHandle(e.target.value)} type="text" name="name" className="edit-input"/> -
-
-
-
- - setBearerToken(e.target.value)} type="text" name="name" className="edit-input"/> -
-
-
-
- -
-