Merge pull request #65 from SolidLabResearch/eliasnijs-polishing

polishing

solid-watchparty/github-post-build-script.js

@@ -3,7 +3,8 @@ import * as fs from "fs";
 
 const routes = [
  "/menu",
- "/watch"
+ "/watch",
+ "/auth",
 ];
 const dir = viteConfig.build.outDir;
 for (const route of routes) {

solid-watchparty/package.json

@@ -12,6 +12,7 @@
  },
  "dependencies": {
  "@comunica/query-sparql-link-traversal": "^0.3.0",
+ "@comunica/query-sparql-link-traversal-solid": "^0.4.0",
  "@comunica/query-sparql-solid": "^2.4.0",
  "@incremunica/query-sparql-incremental": "^1.2.0",
  "@inrupt/solid-client": "^1.30.2",

solid-watchparty/src/App.jsx

@@ -27,7 +27,7 @@ function App() {
  return (
  <SessionProvider>
  <MessageBoxContext.Provider value={messageBox}>
- <RouterProvider router={router}/>
+  <RouterProvider router={router}/>
  </MessageBoxContext.Provider>
  </SessionProvider>
  );

solid-watchparty/src/components/SWChatComponent.jsx

@@ -25,41 +25,53 @@ function SWChatComponent({roomUrl, joined}) {
  const [messages, setMessages] = useState([]);
  const sessionContext = useSession();
  const [messageBox,] = useContext(MessageBoxContext);
+ const [userNames, setUserNames] = useState({});
 
  useEffect(() => {
- let messageSeriesStreams = null;
- let messageStreams = [];
- let usernames = []
  const fetch = async () => {
- messageSeriesStreams = await MessageSolidService.getMessageSeriesStream(sessionContext, roomUrl);
+ const messageSeriesStreams = await MessageSolidService.getMessageSeriesStream(sessionContext, roomUrl);
  if (messageSeriesStreams.error) {
  console.error(messageSeriesStreams.error)
  messageSeriesStreams = null;
  setState({isLoading: false, hasAccess: false});
  return;
  }
  messageSeriesStreams.on('data', async (data) => {
- let messageStream = await MessageSolidService.getMessageStream(sessionContext,
- data.get('messageSeries').value);
- const senderIndex = messageStreams.length;
- messageStreams.push(messageStream);
-
- if (messageStream.error) {
+ const messageSeries = data.get('messageSeries').value;
+
+ let senderName = "Unknown";
+ let creatorUrlStream = await MessageSolidService.getMessageSeriesCreatorStream(sessionContext, messageSeries);
+ creatorUrlStream.on('data', (data) => {
+ const creatorUrl = data?.get('creator')?.value;
+ UserSolidService.getName(sessionContext, creatorUrl).then((name) => {
+ if (!name.error) {
+ setUserNames((userNames) => {
+ userNames[messageSeries] = name;
+ return userNames;
+ });
+ }
+ });
+ });
+
+ // TODO(Elias): Switch out restart of stream when Incremunica has internal handling for this
+ let messageStreamAuthCheck = await MessageSolidService.getMessageStream(sessionContext, messageSeries);
+ messageStreamAuthCheck.on('data', async (data) => {
+ messageStreamAuthCheck.close();
+ });
+
+ let messageStream = await MessageSolidService.getMessageStream(sessionContext, messageSeries);
+ if (!messageStream || messageStream.error) {
  messageStream = null;
  return;
  }
  messageStream.on('data', async (data) => {
- if (usernames.length <= senderIndex) {
- let name = await UserSolidService.getName(sessionContext, data.get('sender').value);
- name = (name.error) ? 'Unknown' : name;
- usernames.push(name);
- }
  const message = {
- text: data.get('text').value,
- sender: usernames[senderIndex],
- date: new Date(data.get('dateSent').value),
- key: (name + data.get('dateSent').value),
+ text:  data.get('text').value,
+ messageBoxUrl: messageSeries,
+ date:  new Date(data.get('dateSent').value),
+ key:  (name + data.get('dateSent').value),
  };
+ // TODO: Make this more efficient
  setMessages(messages => (
  [...messages, message]
  .sort((m1, m2) => (m1.date > m2.date) ? 1 : ((m1.date < m2.date) ? -1 : 0))
@@ -71,18 +83,6 @@ function SWChatComponent({roomUrl, joined}) {
  setState({isLoading: false, hasAccess: true});
  }
  fetch();
-
- return (() => {
- if (messageSeriesStreams) {
- messageSeriesStreams.close();
- }
- for (let i = 0; i < messageStreams.length; i++) {
- if (messageStreams[i]) {
- messageStreams[i].close()
- }
- }
- setMessages([]);
- });
  }, [sessionContext.session, sessionContext.sessionRequestInProgress, roomUrl, joined])
 
 
@@ -120,13 +120,18 @@ function SWChatComponent({roomUrl, joined}) {
  pageContent = (
  <>
  <SWAutoScrollDiv className="overflow-y-auto overflow-x-auto mb-2 shrink">
- {messages.map((message) => <SWMessageComponent message={message} key={message.key}/>)}
+ {messages.map((message) => {
+ const sender = userNames[message.messageBoxUrl];
+ return (
+ <SWMessageComponent message={{...message, sender}} key={message.key}/>
+ );
+ })}
  </SWAutoScrollDiv>
  <form autoComplete="off" className="grow-0 flex flex-between items-center" onSubmit={submitMessage}>
- <input id="msgInput" className="px-2 h-10 rgb-bg-1 sw-border w-full"
+ <input id="msgInput" className="px-2 h-10 rgb-bg-1 sw-border w-full border-solid"
  onChange={(e) => setInput(parseMessage(e.target.value))}
  value={input} type='text'/>
- <button className="sw-btn hidden"> P </button>
+ <button className="sw-btn hidden"></button>
  </form>
  </>
  );

solid-watchparty/src/components/SWFooter.jsx

@@ -1,7 +1,7 @@
 function SWFooter()
 {
  return (
- <div className="grow-0 p-8 flex flex-col justify-end text-center">
+ <div className="p-8 flex flex-col justify-end text-center">
  <p className="rgb-2">(c) IDLab 2023</p>
  </div>
  );

solid-watchparty/src/components/SWMessageComponent.jsx

@@ -6,17 +6,18 @@ import { displayDate } from '../utils/general.js'
 
 function MessageComponent({message})
 {
+ const sender = message.sender ? message.sender : "Name not found";
  return (
- <div className="pb-2 flex">
- <div className="w-6 h-6 m-2 rgb-bg-3 rounded-max">
+ <div className="pb-2 flex w-[90%]">
+ <div className="w-6 min-w-6 h-6 m-2 rgb-bg-3 rounded-max">
  </div>
- <div className="pb-2">
- <div className="w-fit w-max flex items-baseline">
+ <div className="pb-2 w-full">
+ <div className="w-full flex items-baseline">
  <p className="sw-fw-1 mr-2">{message.sender}</p>
  <p className="rgb-2 text-sm">{displayDate(message.date)}</p>
  </div>
- <div className="rgb-1 w-fit w-max">
- <p>{message.text}</p>
+ <div className="rgb-1 w">
+ <p className="break-words">{message.text}</p>
  </div>
  </div>
  </div>

solid-watchparty/src/components/SWModal.jsx

@@ -6,7 +6,7 @@ function SWModal({children, className, setIsShown}) {
  }
  return (
  <div className="fixed flex-col top-0 right-0 left-0 bottom-0 flex justify-center items-center z-50">
- <div onClick={outsideClicked} className="fixed top-0 right-0 left-0 bottom-0 rgb-bg-1 opacity-80"/>
+ <div onClick={outsideClicked} className="fixed top-0 right-0 left-0 bottom-0 bg-[#000D]"/>
  <div className={className}>
  {children}
  </div>

solid-watchparty/src/components/SWModalInputBar.jsx

@@ -0,0 +1,77 @@
+/* libary imports */
+import { useSession, } from '@inrupt/solid-ui-react';
+import { useState, useContext, useEffect, useRef } from 'react';
+import { useNavigate } from 'react-router-dom';
+import { FaMagnifyingGlass } from "react-icons/fa6";
+import { FaChevronRight } from 'react-icons/fa';
+
+/* component imports */
+import SWPageWrapper from '../components/SWPageWrapper';
+import SWLoadingIcon from '../components/SWLoadingIcon';
+import SWModal from '../components/SWModal';
+import SWRoomPoster from '../components/SWRoomPoster';
+
+/* service imports */
+import RoomSolidService from '../services/room.solidservice';
+import MessageSolidService from '../services/message.solidservice';
+
+/* context imports */
+import { MessageBoxContext } from '../contexts';
+
+/* util imports */
+import { validateAll, validateRequired, validateIsUrl, validateLength } from '../utils/validationUtils';
+import { displayDate } from '../utils/general';
+
+/* config imports */
+import config from '../../config';
+
+
+function SWModalInputBar({setModalIsShown, title, f, args}) {
+ const inputRef = useRef(null);
+
+ const [isLoading, setIsLoading] = useState(false);
+ const [error, setError] = useState("");
+
+
+ useEffect(() => {
+ inputRef.current.focus();
+ }, [isLoading]);
+
+ const onSubmit = async (e) => {
+ e.preventDefault();
+ if (isLoading) {
+ return;
+ }
+ setIsLoading(true);
+ const result = await f({
+ input: inputRef.current.value,
+ setError: setError,
+ ...args
+ });
+ if (result) {
+ setError(result);
+ }
+ setIsLoading(false);
+ }
+
+ const inputStyle =
+ (isLoading) ? "sw-input-disabled"
+ : (error) ? "sw-input-error"
+ : "sw-input";
+ return (
+ <SWModal className="p-12 z-10 w-1/2" setIsShown={setModalIsShown}>
+ <form onSubmit={onSubmit} className={`p-24 flex w-full items-center justify-between gap-6 border ${inputStyle}`}>
+ <label className="w-fit sw-fw-1 rgb-1">{title}:</label>
+ <input className="flex grow" ref={inputRef} onChange={() => setError("")} disabled={isLoading} />
+ <button className={`sw-btn w-fit`} type="submit">
+ { isLoading ? <SWLoadingIcon className="w-4"/> : <FaChevronRight className="w-4 h-4"/> }
+ </button>
+ </form>
+ <div className="h-12 mt-3 rgb-alert sw-fw-1">
+ <label>{error}</label>
+ </div>
+ </SWModal>
+ );
+}
+
+export default SWModalInputBar;

solid-watchparty/src/components/SWNavbar.jsx

@@ -34,10 +34,12 @@ function SWNavbar()
  return (
  <div className="w-full flex p-8 grow-0">
  <div className="flex items-center basis-1/3">
- <label className="sw-fw-1 text-left sw-text-gradient">solid-watchparty</label>
+ <label className="sw-fw-1 text-left">solid-watchparty-v0</label>
  </div>
- <div className="flex sw-fw-1 basis-1/3 justify-center items-center">
- <p>Solid Watchparty</p>
+ <div className="flex justify-center basis-1/3">
+ <p className="flex sw-fw-1 justify-center items-center sw-text-gradient">
+ solid-watchparty
+ </p>
  </div>
  <div className="flex items-center basis-1/3 justify-end">
  <div className="flex gap-4 items-center sw-fw-1">

solid-watchparty/src/components/SWPageWrapper.jsx

@@ -30,11 +30,11 @@ function SWPageWrapper({children, className, mustBeAuthenticated})
  }, [sessionContext.session, sessionContext.sessionRequestInProgress, currentLocation, navigateTo, mustBeAuthenticated])
 
  return (
- <div className="h-full flex flex-col justify-between">
+ <div className="min-h-screen flex flex-col bg-[#0000]">
  <SWNavbar/>
- <div className={"h-full w-full " + className}>
+ <div className={`flex-grow ${className}`}>
  { sessionContext.sessionRequestInProgress ? (
- <div className="flex flex-col items-center">
+ <div className="h-screen flex flex-col items-center justify-center">
  <SWLoadingIcon className="w-6 h-6 mb-3"/>
  <p className="sw-fw-1">Autenticating...</p>
  </div>