Narrow mode user creation (#188)

* Extract UserCreationButtons

* Add CreationStartModal

Co-authored-by: Szymon Szlachtowicz <38212223+Szymx95@users.noreply.github.com>
This commit is contained in:
Maria Rushkova 2022-01-14 02:06:45 +01:00 committed by GitHub
parent 15f64df575
commit e7096dced1
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
5 changed files with 167 additions and 62 deletions

View File

@ -18,6 +18,7 @@ import { ProfileFoundModal } from "./Modals/ProfileFoundModal";
import { ProfileModal } from "./Modals/ProfileModal"; import { ProfileModal } from "./Modals/ProfileModal";
import { StatusModal } from "./Modals/StatusModal"; import { StatusModal } from "./Modals/StatusModal";
import { UserCreationModal } from "./Modals/UserCreationModal"; import { UserCreationModal } from "./Modals/UserCreationModal";
import { UserCreationStartModal } from "./Modals/UserCreationStartModal";
import { WalletConnectModal } from "./Modals/WalletConnectModal"; import { WalletConnectModal } from "./Modals/WalletConnectModal";
import { WalletModal } from "./Modals/WalletModal"; import { WalletModal } from "./Modals/WalletModal";
import { ToastMessageList } from "./ToastMessages/ToastMessageList"; import { ToastMessageList } from "./ToastMessages/ToastMessageList";
@ -36,6 +37,7 @@ function Modals() {
<LogoutModal /> <LogoutModal />
<AgreementModal /> <AgreementModal />
<ProfileFoundModal /> <ProfileFoundModal />
<UserCreationStartModal />
</> </>
); );
} }

View File

@ -10,6 +10,7 @@ import styled from "styled-components";
import { useIdentity } from "../../contexts/identityProvider"; import { useIdentity } from "../../contexts/identityProvider";
import { useMessengerContext } from "../../contexts/messengerProvider"; import { useMessengerContext } from "../../contexts/messengerProvider";
import { useModal } from "../../contexts/modalProvider"; import { useModal } from "../../contexts/modalProvider";
import { useNarrow } from "../../contexts/narrowProvider";
import { Reply } from "../../hooks/useReply"; import { Reply } from "../../hooks/useReply";
import { uintToImgUrl } from "../../utils/uintToImgUrl"; import { uintToImgUrl } from "../../utils/uintToImgUrl";
import { ClearSvg } from "../Icons/ClearIcon"; import { ClearSvg } from "../Icons/ClearIcon";
@ -20,6 +21,7 @@ import { ReplySvg } from "../Icons/ReplyIcon";
import { StickerIcon } from "../Icons/StickerIcon"; import { StickerIcon } from "../Icons/StickerIcon";
import "emoji-mart/css/emoji-mart.css"; import "emoji-mart/css/emoji-mart.css";
import { SizeLimitModal, SizeLimitModalName } from "../Modals/SizeLimitModal"; import { SizeLimitModal, SizeLimitModalName } from "../Modals/SizeLimitModal";
import { UserCreationStartModalName } from "../Modals/UserCreationStartModal";
import { SearchBlock } from "../SearchBlock"; import { SearchBlock } from "../SearchBlock";
import { textMediumStyles, textSmallStyles } from "../Text"; import { textMediumStyles, textSmallStyles } from "../Text";
@ -31,6 +33,7 @@ interface ChatInputProps {
} }
export function ChatInput({ reply, setReply }: ChatInputProps) { export function ChatInput({ reply, setReply }: ChatInputProps) {
const narrow = useNarrow();
const identity = useIdentity(); const identity = useIdentity();
const disabled = useMemo(() => !identity, [identity]); const disabled = useMemo(() => !identity, [identity]);
const { sendMessage, contacts } = useMessengerContext(); const { sendMessage, contacts } = useMessengerContext();
@ -41,6 +44,9 @@ export function ChatInput({ reply, setReply }: ChatInputProps) {
const [imageUint, setImageUint] = useState<undefined | Uint8Array>(undefined); const [imageUint, setImageUint] = useState<undefined | Uint8Array>(undefined);
const { setModal } = useModal(SizeLimitModalName); const { setModal } = useModal(SizeLimitModalName);
const { setModal: setCreationStartModal } = useModal(
UserCreationStartModalName
);
const [query, setQuery] = useState(""); const [query, setQuery] = useState("");
@ -253,21 +259,27 @@ export function ChatInput({ reply, setReply }: ChatInputProps) {
onClick={() => setImageUint(undefined)} onClick={() => setImageUint(undefined)}
/> />
)} )}
<Input {narrow && !identity ? (
aria-disabled={disabled} <JoinBtn onClick={() => setCreationStartModal(true)}>
contentEditable={!disabled} Click here to join discussion
onInput={onInputChange} </JoinBtn>
onKeyDown={onInputKeyPress} ) : (
onKeyUp={handleCursorChange} <Input
ref={inputRef} aria-disabled={disabled}
onClick={handleCursorChange} contentEditable={!disabled}
dangerouslySetInnerHTML={{ onInput={onInputChange}
__html: disabled onKeyDown={onInputKeyPress}
? "You need to join this community to send messages" onKeyUp={handleCursorChange}
: clearComponent, ref={inputRef}
}} onClick={handleCursorChange}
className={`${disabled && "disabled"} `} dangerouslySetInnerHTML={{
/> __html: disabled
? "You need to join this community to send messages"
: clearComponent,
}}
className={`${disabled && "disabled"} `}
/>
)}
{query && ( {query && (
<SearchBlock <SearchBlock
query={query} query={query}
@ -470,3 +482,14 @@ export const ReplyOn = styled.div`
text-overflow: ellipsis; text-overflow: ellipsis;
${textSmallStyles}; ${textSmallStyles};
`; `;
const JoinBtn = styled.button`
color: ${({ theme }) => theme.secondary};
background: ${({ theme }) => theme.inputColor};
border: none;
outline: none;
padding: 0 10px;
text-align: start;
${textMediumStyles};
`;

View File

@ -0,0 +1,26 @@
import React from "react";
import styled from "styled-components";
import { UserCreationButtons } from "../UserCreation/UserCreationButtons";
import { Modal } from "./Modal";
import { Heading, Section } from "./ModalStyle";
export const UserCreationStartModalName = "UserCreationStartModal";
export const UserCreationStartModal = () => {
return (
<Modal name={UserCreationStartModalName}>
<Section>
<Heading>Jump into the discussion</Heading>
</Section>
<MiddleSection>
<UserCreationButtons permission={true} />
</MiddleSection>
</Modal>
);
};
const MiddleSection = styled(Section)`
padding: 48px 0;
`;

View File

@ -1,49 +1,29 @@
import React, { useMemo } from "react"; import React from "react";
import styled from "styled-components"; import styled from "styled-components";
import { useModal } from "../../contexts/modalProvider"; import { useNarrow } from "../../contexts/narrowProvider";
import { loadEncryptedIdentity } from "../../utils";
import { buttonStyles, buttonTransparentStyles } from "../Buttons/buttonStyle";
import { ColorChatIcon } from "../Icons/ColorChatIcon"; import { ColorChatIcon } from "../Icons/ColorChatIcon";
import { ProfileFoundModalName } from "../Modals/ProfileFoundModal";
import { StatusModalName } from "../Modals/StatusModal"; import { UserCreationButtons } from "./UserCreationButtons";
import { UserCreationModalName } from "../Modals/UserCreationModal";
import { WalletModalName } from "../Modals/WalletModal";
import { textSmallStyles } from "../Text";
interface UserCreationProps { interface UserCreationProps {
permission: boolean; permission: boolean;
} }
export function UserCreation({ permission }: UserCreationProps) { export function UserCreation({ permission }: UserCreationProps) {
const { setModal } = useModal(UserCreationModalName); const narrow = useNarrow();
const { setModal: setStatusModal } = useModal(StatusModalName);
const { setModal: setWalletModal } = useModal(WalletModalName);
const { setModal: setProfileFoundModal } = useModal(ProfileFoundModalName);
const encryptedIdentity = useMemo(() => loadEncryptedIdentity(), []); if (!narrow) {
return (
return ( <Wrapper>
<Wrapper> <ColorChatIcon />
<ColorChatIcon /> <TitleWrapper>Want to jump into the discussion?</TitleWrapper>
<TitleWrapper>Want to jump into the discussion?</TitleWrapper> <UserCreationButtons permission={permission} />
<LoginBtn onClick={() => setStatusModal(true)}> </Wrapper>
Sync with Status profile );
</LoginBtn> } else {
<LoginBtn onClick={() => setWalletModal(true)}> return null;
Connect Ethereum Wallet }
</LoginBtn>
{permission && (
<ThrowAwayButton
onClick={() =>
encryptedIdentity ? setProfileFoundModal(true) : setModal(true)
}
>
Use a throwaway account
</ThrowAwayButton>
)}
</Wrapper>
);
} }
const Wrapper = styled.div` const Wrapper = styled.div`
@ -63,14 +43,3 @@ const TitleWrapper = styled.div`
margin: 24px 0; margin: 24px 0;
color: ${({ theme }) => theme.primary}; color: ${({ theme }) => theme.primary};
`; `;
const LoginBtn = styled.button`
${buttonStyles}
${textSmallStyles}
padding: 10px 12px;
margin-bottom: 16px;
`;
const ThrowAwayButton = styled.button`
${buttonTransparentStyles}
`;

View File

@ -0,0 +1,85 @@
import React, { useMemo } from "react";
import styled from "styled-components";
import { useModal } from "../../contexts/modalProvider";
import { useNarrow } from "../../contexts/narrowProvider";
import { loadEncryptedIdentity } from "../../utils";
import { buttonStyles, buttonTransparentStyles } from "../Buttons/buttonStyle";
import { ProfileFoundModalName } from "../Modals/ProfileFoundModal";
import { StatusModalName } from "../Modals/StatusModal";
import { UserCreationModalName } from "../Modals/UserCreationModal";
import { UserCreationStartModalName } from "../Modals/UserCreationStartModal";
import { WalletModalName } from "../Modals/WalletModal";
import { textSmallStyles } from "../Text";
interface UserCreationProps {
permission: boolean;
}
export function UserCreationButtons({ permission }: UserCreationProps) {
const narrow = useNarrow();
const { setModal } = useModal(UserCreationModalName);
const { setModal: setStatusModal } = useModal(StatusModalName);
const { setModal: setWalletModal } = useModal(WalletModalName);
const { setModal: setProfileFoundModal } = useModal(ProfileFoundModalName);
const { setModal: setCreationStartModal } = useModal(
UserCreationStartModalName
);
const encryptedIdentity = useMemo(() => loadEncryptedIdentity(), []);
return (
<Wrapper>
<LoginBtn
onClick={() => {
setStatusModal(true);
setCreationStartModal(false);
}}
className={`${narrow && "narrow"}`}
>
Sync with Status profile
</LoginBtn>
<LoginBtn
onClick={() => {
setWalletModal(true);
setCreationStartModal(false);
}}
className={`${narrow && "narrow"}`}
>
Connect Ethereum Wallet
</LoginBtn>
{permission && (
<ThrowAwayButton
onClick={() => {
encryptedIdentity ? setProfileFoundModal(true) : setModal(true);
setCreationStartModal(false);
}}
>
Use a throwaway account
</ThrowAwayButton>
)}
</Wrapper>
);
}
const Wrapper = styled.div`
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
`;
const LoginBtn = styled.button`
${buttonStyles}
${textSmallStyles}
padding: 10px 12px;
margin-bottom: 16px;
&.narrow {
margin-bottom: 32px;
}
`;
const ThrowAwayButton = styled.button`
${buttonTransparentStyles}
`;