Skip to content

Preserve newlines from inbound and outbound sms. #168

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
gyasi-eco wants to merge 8 commits into
base: main
Choose a base branch
from
Open

Preserve newlines from inbound and outbound sms. #168

Show file tree
Hide file tree
Changes from 6 commits
Commits
Show all changes
8 commits
Select commit Hold shift + click to select a range
cac2757
first attempt at fixing newline issue from message bodies
gyasi-eco Apr 24, 2023
8754e1b
remove format method call
gyasi-eco Apr 26, 2023
592988b
add changeset and update changeset version
gyasi-eco Apr 26, 2023
78b17ef
adding text area auto size component
gyasi-eco Apr 26, 2023
572d132
add to changeset
gyasi-eco Apr 26, 2023
1912981
remove textarea container
gyasi-eco Apr 26, 2023
ff99ef4
replace custom textarea styling with pasteb textarea component
gyasi-eco May 3, 2023
000b192
remove external resizeable textarea component
gyasi-eco May 3, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
6 changes: 6 additions & 0 deletions .changeset/tender-geckos-accept.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,6 @@
---
"@twilio-labs/dev-phone-ui": patch
---

Preserve newlines in inbound and outbound sms.
Add react text area auto resize component.
7 changes: 6 additions & 1 deletion package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -28,7 +28,12 @@
"packages/dev-phone-ui"
],
"devDependencies": {
"@changesets/cli": "^2.23.0",
"@changesets/cli": "^2.26.1",
"turbo": "^1.2.16"
},
"dependencies": {
"react-textarea-autosize": "^8.4.1",
Copy link
Collaborator

@ayyrickay ayyrickay Apr 27, 2023

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

What are the tradeoffs of introducing a new dependency to the project?

Copy link
Collaborator

@ayyrickay ayyrickay Apr 27, 2023

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Additionally, check out the npm workspaces documentation to learn more about how we're doing dependency management in this project. This is another one that can be a little tricky, but I think that this component might not be in the right place (it should probably be scoped to the dev phone ui's package.json)

Copy link
Contributor Author

@gyasi-eco gyasi-eco Apr 27, 2023

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I should've added a comment with a question about adding this new dependency to the project. One tradeoff is adding more weight to our node_modeules and potentially reducing CI/CD execution.

Copy link
Collaborator

@ayyrickay ayyrickay Apr 27, 2023 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Yeah, I agree. For the amount of functionality we need (a single input field) the package size might be a bit high - I think it's something like 1.2MB? Space isn't a huge issue for a dev tool, but we're just not using a lot of its functionality. Additionally, although this does seem fairly well maintained, it also can cause some strife if we upgrade to a breaking version of React, for example, and the project maintainers choose not to support it.

We currently use Paste for most of the Dev Phone, but I believe the Dialpad is an example custom component. Do you think it's possible to utilize an existing Paste component, or just write our own logic for this? I bet you can see how things are implemented in the react-textarea-autosize component you found and use that as a basis for our own narrower implementation.

Copy link
Contributor Author

@gyasi-eco gyasi-eco Apr 28, 2023

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Yes, we should probably create our own logic or use a past component. Down the road the external component could break, so it makes sense to build our own that we maintain.

"redux": "^4.2.1",
"twilio-cli": "^5.5.0"
}
}
30 changes: 28 additions & 2 deletions packages/dev-phone-ui/src/components/SendSmsForm/SendSmsForm.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,6 +3,7 @@ import { Button, Input, Label, Box, Grid, Column } from "@twilio-paste/core";
import { SendIcon } from '@twilio-paste/icons/esm/SendIcon';
import { useSelector } from "react-redux";
import { TwilioConversationsContext } from '../WebsocketManagers/ConversationsManager';
import TextareaAutosize from 'react-textarea-autosize';
import MessageList from "./MessageList"

function SendSmsForm({ numberInUse }) {
Expand All @@ -12,12 +13,37 @@ function SendSmsForm({ numberInUse }) {
const destinationNumber = useSelector(state => state.destinationNumber)

const conversationsClient = useContext(TwilioConversationsContext)
const {sendMessage, sendSms} = conversationsClient
const { sendMessage, sendSms } = conversationsClient

const canSendMessages = useMemo(() => {
return destinationNumber && destinationNumber.length > 6;
}, [destinationNumber]);


const textAreaStyle = {
boxSizing: "border-box",
appearance: "none",
border: "none",
borderRadius: "5px",
backgroundColor: "rgb(255, 255, 255)",
transition: "box-shadow 100ms ease-in",
boxShadow: "0 0 0 1px #8891aa",
color: "inherit",
cursor: "auto",
display: "block",
fontFamily: "inherit",
fontSize: "0.875rem",
fontWeight: "500",
lineHeight: "1.25rem",
margin: "0",
outline: "none",
padding: "0.5rem 0.75rem",
resize: "none",
width: "100%",
whiteSpace: "pre-wrap",
}


// Handles the UI state for sending messages
const sendIt = async (e) => {
e.preventDefault()
Expand All @@ -39,7 +65,7 @@ function SendSmsForm({ numberInUse }) {
<Label htmlFor="sendSmsBody" required>Message</Label>
<Grid gutter={"space20"} marginBottom="space40">
<Column span={10}>
<Input id="sendSmsBody" type="text" value={messageBody} onChange={(e) => setMessageBody(e.target.value)} />
<TextareaAutosize minRows={1} style={textAreaStyle} id="sendSmsBody" type="text" value={messageBody} onChange={(e) => setMessageBody(e.target.value)} />
</Column>
<Column span={2}>
<Button type={"submit"} disabled={!canSendMessages}>
Expand Down