format and use more aggressive tabstop widths
This commit is contained in:
parent
7d4953fea6
commit
56feab2ea1
7 changed files with 366 additions and 344 deletions
|
|
@ -90,15 +90,6 @@ const App = ({
|
|||
}
|
||||
});
|
||||
};
|
||||
// if (!username) {
|
||||
// var newName = prompt(home.userNamePrompt) as string;
|
||||
// while (!validateName(newName)) {
|
||||
// console.log(newName);
|
||||
|
||||
// prompt("Username invalid! Please enter again.") as string;
|
||||
// }
|
||||
// setUsername(newName);
|
||||
// }
|
||||
if (!login) {
|
||||
return <></>;
|
||||
} else
|
||||
|
|
|
|||
|
|
@ -23,9 +23,15 @@ const Chat = ({ user }: { user: string }): React.ReactElement => {
|
|||
);
|
||||
// TODO solve issue with non-static markup
|
||||
stompClientRef.current.onConnect = (frame) => {
|
||||
stompClientRef.current.subscribe(endpoints.subscription, (message) => {
|
||||
console.log(`Collected new message: ${message.body}`);
|
||||
const messageBody = JSON.parse(message.body) as Message;
|
||||
stompClientRef.current.subscribe(
|
||||
endpoints.subscription,
|
||||
(message) => {
|
||||
console.log(
|
||||
`Collected new message: ${message.body}`
|
||||
);
|
||||
const messageBody = JSON.parse(
|
||||
message.body
|
||||
) as Message;
|
||||
console.log(messageBody);
|
||||
setMessages((message) => {
|
||||
return message.concat([
|
||||
|
|
@ -35,7 +41,8 @@ const Chat = ({ user }: { user: string }): React.ReactElement => {
|
|||
/>,
|
||||
]);
|
||||
});
|
||||
});
|
||||
}
|
||||
);
|
||||
stompClientRef.current.publish({
|
||||
body: JSON.stringify({
|
||||
type: MessageType.HELLO,
|
||||
|
|
@ -47,14 +54,15 @@ const Chat = ({ user }: { user: string }): React.ReactElement => {
|
|||
destination: endpoints.destination,
|
||||
});
|
||||
};
|
||||
|
||||
// Generic error handlers
|
||||
stompClientRef.current.onWebSocketError = (error) => {
|
||||
console.error("Error with websocket", error);
|
||||
};
|
||||
|
||||
stompClientRef.current.onStompError = (frame) => {
|
||||
console.error("Broker reported error: " + frame.headers["message"]);
|
||||
console.error(
|
||||
"Broker reported error: " + frame.headers["message"]
|
||||
);
|
||||
console.error("Additional details: " + frame.body);
|
||||
};
|
||||
|
||||
|
|
@ -80,7 +88,8 @@ const Chat = ({ user }: { user: string }): React.ReactElement => {
|
|||
body: JSON.stringify(messageData),
|
||||
destination: endpoints.destination,
|
||||
headers: {
|
||||
"Content-Type": "application/json; charset=utf-8",
|
||||
"Content-Type":
|
||||
"application/json; charset=utf-8",
|
||||
},
|
||||
});
|
||||
entryElement.value = "";
|
||||
|
|
@ -101,7 +110,9 @@ const Chat = ({ user }: { user: string }): React.ReactElement => {
|
|||
});
|
||||
useEffect(() => {
|
||||
try {
|
||||
const elem = document.querySelector(".chat-inner-wrapper");
|
||||
const elem = document.querySelector(
|
||||
".chat-inner-wrapper"
|
||||
);
|
||||
if (elem) {
|
||||
elem.scrollTop = elem.scrollHeight;
|
||||
} else {
|
||||
|
|
|
|||
|
|
@ -15,10 +15,12 @@ export const Login = ({
|
|||
const [valid, setValid] = useState<boolean | undefined>(true);
|
||||
const [validText, setValidText] = useState<string | undefined>();
|
||||
const registrationHandler = () => {
|
||||
const uname = (document.getElementById("username") as HTMLInputElement)
|
||||
.value;
|
||||
const uname = (
|
||||
document.getElementById("username") as HTMLInputElement
|
||||
).value;
|
||||
const passwd = encrypt(
|
||||
(document.getElementById("passwd") as HTMLInputElement).value
|
||||
(document.getElementById("passwd") as HTMLInputElement)
|
||||
.value
|
||||
);
|
||||
fetch(`http://${domain}:${port}${endpoints.user}`, {
|
||||
method: "POST",
|
||||
|
|
@ -50,20 +52,29 @@ export const Login = ({
|
|||
};
|
||||
// login button press handler
|
||||
const loginHandler = () => {
|
||||
const uname = (document.getElementById("username") as HTMLInputElement)
|
||||
.value;
|
||||
const uname = (
|
||||
document.getElementById("username") as HTMLInputElement
|
||||
).value;
|
||||
const passwd = encrypt(
|
||||
(document.getElementById("passwd") as HTMLInputElement).value
|
||||
(document.getElementById("passwd") as HTMLInputElement)
|
||||
.value
|
||||
);
|
||||
// async invocation of Fetch API
|
||||
fetch(`http://${domain}:${port}${endpoints.user}?name=${uname}`, {
|
||||
fetch(
|
||||
`http://${domain}:${port}${endpoints.user}?name=${uname}`,
|
||||
{
|
||||
method: "GET",
|
||||
mode: "cors",
|
||||
})
|
||||
}
|
||||
)
|
||||
.then((res) => {
|
||||
if (res.status === 404) {
|
||||
console.log("404 not found encountered");
|
||||
throw new Error("Username does not exist");
|
||||
console.log(
|
||||
"404 not found encountered"
|
||||
);
|
||||
throw new Error(
|
||||
"Username does not exist"
|
||||
);
|
||||
} else if (res.status === 200) {
|
||||
console.log("200 OK");
|
||||
}
|
||||
|
|
@ -81,7 +92,9 @@ export const Login = ({
|
|||
} else {
|
||||
// login valid
|
||||
const validUntilDate: Date = new Date();
|
||||
validUntilDate.setHours(validUntilDate.getHours() + 2);
|
||||
validUntilDate.setHours(
|
||||
validUntilDate.getHours() + 2
|
||||
);
|
||||
setLogin({
|
||||
username: user.userName,
|
||||
lastSeen: user.lastSeen,
|
||||
|
|
@ -100,7 +113,9 @@ export const Login = ({
|
|||
<fieldset>
|
||||
<legend>Login window</legend>
|
||||
<p className="uname-error-text">
|
||||
{valid && valid !== undefined ? "" : validText}
|
||||
{valid && valid !== undefined
|
||||
? ""
|
||||
: validText}
|
||||
</p>
|
||||
<label htmlFor="username">Username: </label>
|
||||
<br />
|
||||
|
|
@ -111,6 +126,7 @@ export const Login = ({
|
|||
<input id="passwd" type="password"></input>
|
||||
<br />
|
||||
<button
|
||||
disabled={!valid}
|
||||
type="submit"
|
||||
onClick={() => {
|
||||
loginHandler();
|
||||
|
|
@ -119,6 +135,7 @@ export const Login = ({
|
|||
Login
|
||||
</button>
|
||||
<button
|
||||
disabled={!valid}
|
||||
type="submit"
|
||||
onClick={() => {
|
||||
registrationHandler();
|
||||
|
|
@ -127,6 +144,7 @@ export const Login = ({
|
|||
Register
|
||||
</button>
|
||||
<button
|
||||
disabled={valid}
|
||||
type="submit"
|
||||
onClick={() => {
|
||||
setLogin(undefined);
|
||||
|
|
|
|||
|
|
@ -32,7 +32,10 @@ export const MessageDisplay = ({
|
|||
return (
|
||||
<p className="msg">
|
||||
[{timeString}]{" "}
|
||||
{msgPage.joinMessage.replace("$userName", fromUserId)}
|
||||
{msgPage.joinMessage.replace(
|
||||
"$userName",
|
||||
fromUserId
|
||||
)}
|
||||
</p>
|
||||
);
|
||||
case MessageType.MESSAGE as MessageType:
|
||||
|
|
@ -40,7 +43,10 @@ export const MessageDisplay = ({
|
|||
<p className="msg">
|
||||
[{timeString}]{" "}
|
||||
{msgPage.serverMessage
|
||||
.replace("$userName", fromUserId)
|
||||
.replace(
|
||||
"$userName",
|
||||
fromUserId
|
||||
)
|
||||
.replace("$content", content)}
|
||||
</p>
|
||||
);
|
||||
|
|
@ -52,8 +58,9 @@ export const MessageDisplay = ({
|
|||
console.error("Illegal MessageType reported!");
|
||||
return (
|
||||
<p className="msg-err">
|
||||
[{timeString}] **THIS MESSAGE CANNOT BE CORRECTLY SHOWN
|
||||
BECAUSE THE CLIENT ENCOUNTERED AN ERROR**
|
||||
[{timeString}] **THIS MESSAGE CANNOT BE
|
||||
CORRECTLY SHOWN BECAUSE THE CLIENT
|
||||
ENCOUNTERED AN ERROR**
|
||||
</p>
|
||||
);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -42,10 +42,5 @@ export type Message = {
|
|||
content: string;
|
||||
timeMillis: number;
|
||||
};
|
||||
export const acceptedLangs = [
|
||||
"en_US",
|
||||
"zh_TW",
|
||||
"el_GR",
|
||||
"ar_SA"
|
||||
] as const;
|
||||
export const acceptedLangs = ["en_US", "zh_TW", "el_GR", "ar_SA"] as const;
|
||||
export type LangType = (typeof acceptedLangs)[number];
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue