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