Implement note sharing

* Make DELETE request and "Remove" button for removing access; update UI
* Make POST request and "Share" button for adding access; update UI
* Make search case-insensitive using .toLocaleLowerCase()
* Remove outline from search because it looks bad for mouse users
* Implement ShareMenu and ShareList components
* Implement useEscapeAlerter() hook - closes Jotting when user presses escape
* Split columns up more for home to add more width to share menu
* Add alt and title attributes to *OptionsBar components for accessibility

Author: varunsingh87

components/AccountBanner/accountBanner.module.css

@@ -1,6 +1,6 @@
 .accountBanner {
 	grid-row: 1 / 3;
-	grid-column-end: 7;
+	grid-column-end: -1;
 	align-self: stretch;
 	margin-left: 10px;
 }

components/Jotting/JottingOptionsBar.js

@@ -19,10 +19,10 @@ export default function JottingOptionsBar(props) {
 	return (
 		<div className={jotting.jottingOptionsBar}>
 			<button onClick={handleDeleteClick}>
-				<Image height={32} width={32} src="/images/trash.png" />
+				<Image height={32} width={32} src="/images/trash.png" alt="Delete icon" title="Delete jotting" />
 			</button>
 			<button onClick={handlePinClick}>
-				<Image height={32} width={32} src="/images/pin.png" />
+				<Image height={32} width={32} src="/images/pin.png" alt="Pin icon" title="Pin jotting" />
 			</button>
 			{props.children}
 		</div>

components/Jotting/jotting.module.css

@@ -42,13 +42,15 @@
     display: flex;
     flex-direction: row;
     justify-content: center;
+    align-items: center;
     height: 100px;
 }
 
 .jottingOptionsBar button {
     background: none;
     border: none;
     margin: 0 1em;
+    padding: 1em;
 }
 
 .jottingOptionsBar button:hover {

components/Jotting/jottingTitle.js

@@ -7,7 +7,7 @@ import { updateJottingTitle } from "../../libs/Datastore/requests";
  * @param props.id The id of the jotting
  * @param props.originalTitle The title passed as a prop to this component
  */
-export default function JottingTitle({ id, originalTitle, jotType }) {
+export default function JottingTitle({ id, originalTitle = "", jotType }) {
 	const [title, setTitle] = useState(originalTitle);
 
 	const ref = useRef(null);
@@ -40,6 +40,7 @@ export default function JottingTitle({ id, originalTitle, jotType }) {
 		<input
 			ref={ref}
 			type="text"
+			name="title"
 			className={jottingStyleMod.title}
 			value={title}
 			onChange={handleTitleChange}

components/Jotting/noteOptionsBar.js

@@ -14,7 +14,7 @@ export default function NoteOptionsBar(props) {
     return (
         <JottingOptionsBar {...props}>
             <button onClick={handleShareClick}>
-                <Image height={35} width={55} src="/images/share.png" />
+                <Image height={35} width={55} src="/images/share.png" alt="share icon" title="Share jotting" />
             </button>
         </JottingOptionsBar>
     );

components/JottingList/noteList.js

@@ -9,7 +9,10 @@ export default function NoteList({ notes }) {
 		noteList = notes
 			.filter((item) => {
 				const urlParser = new URLSearchParams(location.search);
-				return !urlParser.has("q") || item.title.includes(urlParser.get("q"));
+				return (
+					!urlParser.has("q") ||
+					item.title.toLocaleLowerCase().includes(urlParser.get("q").toLocaleLowerCase())
+				);
 			})
 			.map((item) => (
 				<li key={item.id}>

components/JottingList/taskList.js

@@ -11,7 +11,7 @@ export default function TaskList({ tasks }) {
 				const urlParser = new URLSearchParams(location.search);
 				return (
 					!urlParser.has("q") ||
-					item.title.includes(urlParser.get("q"))
+					item.title.toLocaleLowerCase().includes(urlParser.get("q").toLocaleLowerCase())
 				);
 			})
 			.map((item) => (

components/SearchBar/searchBar.js

@@ -3,28 +3,28 @@ import { useRouter } from "next/router";
 import UrlService from "../../libs/UrlService";
 
 export default function SearchBar() {
-  const router = useRouter();
-  const urlService = new UrlService(router);
+	const router = useRouter();
+	const urlService = new UrlService(router);
 
-  const handleSearch = e => {
-    urlService.changeQuery({q: e.target.value});
-  };
+	const handleSearch = (e) => {
+		urlService.changeQuery({ q: e.target.value });
+	};
 
-  return (
-    <div className={searchBar.container}>
-      <button className={searchBar.searchBarIcon}>
-        <img
-          className={searchBar.greyCircle}
-          src="https://cdn.jsdelivr.net/gh/Borumer/Borum@v1.2.0/staticassets/images/search-bar-icon.png"
-          id="search-bar-icon-img"
-        />
-      </button>
-      <input
-        className={searchBar.searchBar}
-        type="text"
-        onChange={handleSearch}
-        placeholder="Search your Jottings"
-      />
-    </div>
-  );
+	return (
+		<div className={searchBar.container}>
+			<button className={searchBar.searchBarIcon}>
+				<img
+					className={searchBar.greyCircle}
+					src="https://cdn.jsdelivr.net/gh/Borumer/Borum@v1.2.0/staticassets/images/search-bar-icon.png"
+					id="search-bar-icon-img"
+				/>
+			</button>
+			<input
+				className={searchBar.searchBar}
+				type="text"
+				onChange={handleSearch}
+				placeholder="Search your Jottings"
+			/>
+		</div>
+	);
 }

components/SearchBar/searchBar.module.css

@@ -32,6 +32,7 @@
 	display: none;
 	height: 40px;
 	width: 90%;
+	outline: none;
 }
 
 @media only screen and (min-width: 511px) {

components/ShareMenu/shareMenu.js

@@ -0,0 +1,49 @@
+import shareMenu from "./shareMenu.module.css";
+import { useRef, useState, useEffect } from "react";
+import { useRouter } from "next/router";
+import { shareNote, getNoteSharees } from "../../libs/Datastore/requests";
+import ShareeList from "../ShareeList/shareeList";
+import { useCancelableRequest } from "../../libs/Datastore/responseHelpers";
+
+export default function ShareMenu() {
+	const [noteSharees, setNoteSharees] = useState(null);
+	const [recipientEmail, setRecipientEmail] = useState("");
+
+	const ref = useRef(null);
+	const router = useRouter();
+	
+	const abortController = new AbortController();
+	
+	const handleShareClick = (e) => {
+		shareNote(router.query.id, recipientEmail, abortController)
+		setRecipientEmail("");
+		setNoteSharees([...noteSharees, {
+			email: recipientEmail,
+			user_id: 0
+		}]);
+	};
+	
+	const handleRecipientEmailChange = (e) => setRecipientEmail(e.target.value);
+	
+	useEffect(() => {
+		ref.current.focus();
+	}, []);
+	
+	useCancelableRequest(getNoteSharees, setNoteSharees, [router.query.id], []);
+	
+	return (
+		<div className={shareMenu.shareMenu}>
+			<h1>Share</h1>
+			<ShareeList noteSharees={noteSharees} setNoteSharees={setNoteSharees} />
+			<input
+				type="text"
+				ref={ref}
+				value={recipientEmail}
+				onChange={handleRecipientEmailChange}
+				placeholder="Recipient's email"
+				aria-placeholder="Recipient's email"
+			/>
+			<button onClick={handleShareClick}>Share</button>
+		</div>
+	);
+}