Update messages.tsx

[faizancodes]

No description provided.

[vercel]

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name	Status	Preview	Comments	Updated (UTC)
project-2-chatstarter	❌ Failed (Inspect)			Nov 20, 2024 9:12pm

[headstarterbot]

src/components/messages.tsx

The 'message.sender' object is checked against null before accessing its 'username' property. Since the 'username' property is not optional, this null check is unnecessary and can be removed to improve code readability.
Create Issue

    -          {message.sender?.username ?? "Deleted User"}
    +          {message.sender.username}

Destructuring assignment can be used to make the code more concise and easier to read. In this case, the 'id' property can be destructured from the 'props' object in the 'MessageInput' component.
Create Issue

    function MessageInput({ id }: { id: Id<"directMessages" | "channels"> }) {
      // ...
    }
    // can be changed to
    function MessageInput({ id }: { id: Id<"directMessages" | "channels"> }) {
      const { id } = props;
      // ...
    }

Optional chaining can be used to simplify the null check for nested properties. In this case, the 'imageUpload.previewUrl' property can be accessed using optional chaining.
[Create Issue](https://github.com/team-headstart/project-2-chatstarter/issues/new?title=Use%20optional%20chaining%20for%20nested%20properties&body=Optional%20chaining%20can%20be%20used%20to%20simplify%20the%20null%20check%20for%20nested%20properties.%20In%20this%20case%2C%20the%20'imageUpload.previewUrl'%20property%20can%20be%20accessed%20using%20optional%20chaining.%0A%60%60%60tsx%0A%20%20%20%20-%20%20%20%20%20%20%20%20%20%20%7BimageUpload.previewUrl%20%26%26%20(%0A%20%20%20%20%2B%20%20%20%20%20%20%20%20%20%20%7BimageUpload%3F.previewUrl%20%26%26%20(%0A%60%60%60%0A)

    -          {imageUpload.previewUrl && (
    +          {imageUpload?.previewUrl && (