Skip to content

Commit

Permalink
fix small issues
Browse files Browse the repository at this point in the history
  • Loading branch information
K0IN committed Dec 12, 2024
1 parent 305e090 commit 2598890
Show file tree
Hide file tree
Showing 3 changed files with 56 additions and 56 deletions.
55 changes: 28 additions & 27 deletions app/frontend/src/components/message/message.css
Original file line number Diff line number Diff line change
@@ -1,46 +1,47 @@
.message {
max-width: 100%;
max-width: 100%;

display: grid;
grid-template-areas:
"title time"
"body body"
"tags tags"
"image image";
display: grid;
grid-template-areas:
"title time"
"body body"
"tags tags"
"image image";

grid-template-columns: repeat(2, minmax(0, 1fr));
align-content: space-between;
padding: 10px;
grid-template-columns: repeat(2, minmax(0, 1fr));
align-content: space-between;
padding: 10px;
}

.messagetitle {
grid-area: title;
font-size: 1.2em;
padding-left: 5px;
overflow: hidden;
margin-top: 0px;
grid-area: title;
font-size: 1.2em;
padding-left: 5px;
overflow: hidden;
margin-top: 0px;
}

.messagetime {
grid-area: time;
justify-self: right;
padding-right: 5px;
margin-top: 0px;
grid-area: time;
justify-self: right;
padding-right: 5px;
margin-top: 0px;
}

.messagebody {
grid-area: body;
padding-left: 5px;
padding-right: 5px;
grid-area: body;
padding-left: 5px;
padding-right: 5px;
white-space: pre-line;
}

.messagetags {
grid-area: tags;
grid-area: tags;
}

.messageimage {
grid-area: image;
max-width: 100%;
max-height: 25vh;
justify-self: center;
grid-area: image;
max-width: 100%;
max-height: 25vh;
justify-self: center;
}
53 changes: 26 additions & 27 deletions app/frontend/src/components/message/message.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -10,42 +10,41 @@ import type { MessageType } from '../../types/messagetype';
import style from './message.css';

type MessageProps = {
message: MessageType;
message: MessageType;
}

function timestampToString(timestamp: number): string {
const date = new Date(timestamp);
return `${date.toLocaleDateString()} ${date.toLocaleTimeString()}`;
const date = new Date(timestamp);
return `${date.toLocaleDateString()} ${date.toLocaleTimeString()}`;
}

const Message: FunctionalComponent<MessageProps> = ({ message }: MessageProps) => {
const [receiveTimeStamp, setReceiveTimestamp] = useState(format(message.receivedAt));
const [receiveTimeStamp, setReceiveTimestamp] = useState(format(message.receivedAt));

useEffect(() => {
setReceiveTimestamp(format(message.receivedAt));
const id = setInterval(() => setReceiveTimestamp(format(message.receivedAt)), 1000);
return () => clearInterval(id);
}, [message, setReceiveTimestamp]);
useEffect(() => {
setReceiveTimestamp(format(message.receivedAt));
const id = setInterval(() => setReceiveTimestamp(format(message.receivedAt)), 1000);
return () => clearInterval(id);
}, [message, setReceiveTimestamp]);

// todo:
// - add a delete button
// - add a read status indicator
// - add a show more option on to many tags
// todo:
// - add a delete button
// - add a show more option on to many tags

return (
<div>
<Elevation z={1}>
<div class={style.message}>
<h1 class={style.messagetitle}>{message.title}</h1>
<p class={style.messagetime} title={timestampToString(message.receivedAt)}>{receiveTimeStamp}</p>
<div class={style.messagebody}>{message.body}</div>
<Chips class={style.messagetags}>
{message.tags.map((tag: string) => (<Chips.Chip>{(<Chips.Text>{tag}</Chips.Text>) as any}</Chips.Chip>) as any)}
</Chips>
{message.icon && (<img class={style.messageimage} src={message.icon} />)}
</div>
</Elevation>
</div>)
return (
<div>
<Elevation z={1}>
<div class={style.message}>
<h1 class={style.messagetitle}>{message.title}</h1>
<p class={style.messagetime} title={timestampToString(message.receivedAt)}>{receiveTimeStamp}</p>
<div class={style.messagebody}>{message.body}</div>
<Chips class={style.messagetags}>
{message.tags.map((tag: string) => (<Chips.Chip>{(<Chips.Text>{tag}</Chips.Text>) as any}</Chips.Chip>) as any)}
</Chips>
{message.icon && (<img alt="user supplied content" class={style.messageimage} src={message.icon} />)}
</div>
</Elevation>
</div>)
}

export default Message;
4 changes: 2 additions & 2 deletions app/frontend/src/manifest.json
Original file line number Diff line number Diff line change
Expand Up @@ -55,15 +55,15 @@
"platform": "android"
},
{
"src": "/assets/icons/desktop-screenshot.png",
"src": "/assets/screenshots/desktop-screenshot.png",
"sizes": "2038x1301",
"type": "image/png",
"form_factor": "wide",
"label": "Home screen of Awesome App",
"platform": "windows"
},
{
"src": "/assets/icons/desktop-screenshot.png",
"src": "/assets/screenshots/desktop-screenshot.png",
"sizes": "2038x1301",
"type": "image/png",
"form_factor": "wide",
Expand Down

0 comments on commit 2598890

Please sign in to comment.