Skip to content

Commit

Permalink
Merge pull request #53 from hcp-uw/collab-tags
Browse files Browse the repository at this point in the history 
can toggle to see tags in collab
  • Loading branch information
@audrey157
audrey157 authored Sep 15, 2024
2 parents 6ab85b1 + c75b0fc commit aaa78c6
Show file tree
Hide file tree
Showing 4 changed files with 142 additions and 17 deletions.
15 changes: 11 additions & 4 deletions starter-backend/src/routes.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -393,6 +393,13 @@ export async function deleteDoc(req: SafeRequest, res: SafeResponse) {
.catch((a) => res.status(400).send(a))
}

type ThumbnailTagsInfo = {
name: string;
iD: string;
content: string;
tags: string[];
}

/** Gets shared notes based on the parameters */
export async function getShared(req: SafeRequest, res: SafeResponse) {

Expand Down Expand Up @@ -447,7 +454,7 @@ export async function getShared(req: SafeRequest, res: SafeResponse) {
const collectionRef = db.collection("Shared");
const snapshot = await collectionRef.limit(30).get();

const info: ThumbnailInfo[] = [];
const info: ThumbnailTagsInfo[] = [];


snapshot.forEach(item => {
Expand Down Expand Up @@ -501,11 +508,11 @@ export async function getShared(req: SafeRequest, res: SafeResponse) {


if (checksOut) {
const temp: ThumbnailInfo = {
const temp: ThumbnailTagsInfo = {
name: name,
iD: iD,
kind: "doc",
content: content
content: content,
tags: data.tags
}
info.push(temp);
}
Expand Down
89 changes: 83 additions & 6 deletions starter-frontend/src/components/file-navigation/NoteThumbnails.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -12,6 +12,10 @@ type NoteThumbnailProps = {
route: string;

navigate: (route: string) => void;

tags: string[];

showTags: boolean;
}

/**
Expand All @@ -20,8 +24,56 @@ type NoteThumbnailProps = {
* - text: text of note
* - id: id of note (used for link)
*/
function NoteThumbnail({title, text, route, navigate}: NoteThumbnailProps): JSX.Element {
function NoteThumbnail({title, text, route, navigate, tags, showTags}: NoteThumbnailProps): JSX.Element {

const tagElement: JSX.Element[] = [];
for (let i = 0; i < tags.length; i++) {
tagElement.push(
<div className="" key={tags[i]} >- {tags[i]} </div>
)
}


if (showTags) {
if (tagElement.length === 0) {
return (
<div>
<button onClick={() => navigate(route)}className="folder-link">
<span className="thumbnail-click"></span>
</button>
<div className="thumbnail">
<div className="thumbnail-body">
{/* <div className="thumbnail-text" dangerouslySetInnerHTML={{__html: text}}></div> */}
<div className="">
No Tags
</div>
</div>
<div className="thumbnail-label">
<p className="thumbnail-title">{title}</p>
</div>
</div>
</div>
)
}
return (
<div>
<button onClick={() => navigate(route)}className="folder-link">
<span className="thumbnail-click"></span>
</button>
<div className="thumbnail">
<div className="thumbnail-body">
{/* <div className="thumbnail-text" dangerouslySetInnerHTML={{__html: text}}></div> */}
<div className="">
{tagElement}
</div>
</div>
<div className="thumbnail-label">
<p className="thumbnail-title">{title}</p>
</div>
</div>
</div>
)
}
return (
<div>
<button onClick={() => navigate(route)}className="folder-link">
Expand All @@ -42,10 +94,10 @@ function NoteThumbnail({title, text, route, navigate}: NoteThumbnailProps): JSX.
}

/** Parameters for Note Thumbnails element */
type NotesProps = {data: ThumbnailInfo[], location: string, areTemps: boolean, email: string}
type NotesProps = {data: ThumbnailInfo[], location: string, areTemps: boolean, email: string, tags?: string[][], show?: boolean}

/** Element which displays thumbnails for notes */
export default function NoteThumbnails({data, location, areTemps, email}: NotesProps): JSX.Element {
export default function NoteThumbnails({data, location, areTemps, email, tags, show}: NotesProps): JSX.Element {

const navigate = useNavigate();
const linkToNote = (route: string): void => {
Expand All @@ -54,21 +106,46 @@ export default function NoteThumbnails({data, location, areTemps, email}: NotesP
};

const notes: JSX.Element[] = [];
for (const thumbnail of data) {
let showTag: boolean | undefined = show;
if (showTag === undefined) {
showTag = false;
}

for (let i = 0; i < data.length; i++) {
const thumbnail: ThumbnailInfo = data[i];
let tempTags: string[] = [];
if (tags !== undefined) {
tempTags = tags[i]
}
if (thumbnail.kind === "doc") {
if (areTemps) {
notes.push(<NoteThumbnail title={thumbnail.name} route={"Users/"+email+"/Templates/"+thumbnail.iD}
text={thumbnail.content}
text={thumbnail.content} tags={tempTags} showTags={showTag}
navigate={linkToNote} key={thumbnail.iD}/>)
} else {
notes.push(
<NoteThumbnail title={thumbnail.name} route={location+"/"+thumbnail.iD}
text={thumbnail.content}
text={thumbnail.content} tags={tempTags} showTags={showTag}
navigate={linkToNote} key={thumbnail.iD}/>
)
}
}
}
// for (const thumbnail of data) {
// if (thumbnail.kind === "doc") {
// if (areTemps) {
// notes.push(<NoteThumbnail title={thumbnail.name} route={"Users/"+email+"/Templates/"+thumbnail.iD}
// text={thumbnail.content} tags={tags}
// navigate={linkToNote} key={thumbnail.iD}/>)
// } else {
// notes.push(
// <NoteThumbnail title={thumbnail.name} route={location+"/"+thumbnail.iD}
// text={thumbnail.content} tags={tags}
// navigate={linkToNote} key={thumbnail.iD}/>
// )
// }
// }
// }

return (
<>{notes}</>
Expand Down
8 changes: 8 additions & 0 deletions starter-frontend/src/components/file-navigation/routes.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -67,3 +67,11 @@ if (envRoute === undefined) {
} else {
FetchRoute = envRoute
}


export type ThumbnailTagsInfo = {
name: string;
iD: string;
content: string;
tags: string[];
}
47 changes: 40 additions & 7 deletions starter-frontend/src/pages/collaboration/collaboration.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
import { useEffect, useState } from 'react';
import NoteThumbnails from "../../components/file-navigation/NoteThumbnails";
import SearchBar from "../../components/file-navigation/SearchBar";
import { ThumbnailInfo } from '../../components/file-navigation/routes';
import { ThumbnailTagsInfo, ThumbnailInfo } from '../../components/file-navigation/routes';
import { auth } from '../../config/firebase';
import { isRecord, FetchRoute } from '../../components/file-navigation/routes';

Expand All @@ -24,6 +24,10 @@ export default function Collaboration(): JSX.Element {
// Current displayed content
const [currNotes, setCurrNotes] = useState<ThumbnailInfo[]>([]);

const [currTags, setCurrTags] = useState<string[][]>([]);

const [showTags, setShowTags] = useState<boolean>(false);

// Initial load to get shared notes
useEffect(() => {
getNotes();
Expand Down Expand Up @@ -120,6 +124,7 @@ export default function Collaboration(): JSX.Element {
}

const docs: ThumbnailInfo[] = [];
const tagArray: string[][] = [];

for (const info of val.data) {

Expand All @@ -133,21 +138,37 @@ export default function Collaboration(): JSX.Element {
return;
}

if (info.kind !== "doc") {
console.error('Invalid JSON from /getFolderContents', info.iD);
return;
}
// if (info.kind !== "doc") {
// console.error('Invalid JSON from /getFolderContents', info.iD);
// return;
// }

if (typeof info.content !== "string") {
console.error('Invalid JSON from /getFolderContents', info.content);
return;
}

if (!Array.isArray(info.tags)) {
console.error('Invalid JSON from /getFolderContents', info.tags);
return;
}

const tempTags: string[] = [];
for (const tag of info.tags) {
if (typeof tag !== "string") {
console.error('Invalid JSON from /getFolderContents', tag);
} else {
tempTags.push(tag);
}
}

const temp: ThumbnailInfo = {name: info.name, iD: info.iD, kind: info.kind, content: info.content};
const temp: ThumbnailInfo = {name: info.name, iD: info.iD, kind: "doc", content: info.content};
tagArray.push(tempTags);
docs.push(temp);
}

setCurrNotes(docs);
setCurrTags(tagArray);
setIsLoading(false);
}

Expand All @@ -158,6 +179,8 @@ export default function Collaboration(): JSX.Element {
<div className="page green-background nav-page">
<SearchBar isAdvanced={isAdvanced} setIsAdvanced={setIsAdvanced} collaboration={true}/>
<h2>Public Notes</h2>
<label htmlFor="toggle-tags">Show tags?</label>
<input type="checkbox" id="toggle-tags" className="" checked={showTags} onChange={() => setShowTags(!showTags)}></input>
<div className="nav-area flex">
<h1>Loading...</h1>
</div>
Expand All @@ -168,18 +191,28 @@ export default function Collaboration(): JSX.Element {
<div className="page green-background nav-page">
<SearchBar isAdvanced={isAdvanced} setIsAdvanced={setIsAdvanced} collaboration={true}/>
<h2>Public Notes</h2>
<label htmlFor="toggle-tags">Show tags?</label>
<input type="checkbox" id="toggle-tags" className="" checked={showTags} onChange={() => setShowTags(!showTags)}></input>
<div className="nav-area flex">
<p>Nothing matched your search. Maybe try with less or different search parameters. Capitalization doesn't matter but spelling does!</p>
</div>
</div>
);
} else {
// for (const asdf of currTags) {
// for (const qwe of asdf) {
// console.log(qwe)
// }
// }

return (
<div className="page green-background nav-page">
<SearchBar isAdvanced={isAdvanced} setIsAdvanced={setIsAdvanced} collaboration={true}/>
<h2>Public Notes</h2>
<label htmlFor="toggle-tags">Show tags?</label>
<input type="checkbox" id="toggle-tags" className="" checked={showTags} onChange={() => setShowTags(!showTags)}></input>
<div className="nav-area flex">
<NoteThumbnails data={currNotes} location={"Shared"} areTemps={false} email="temp"/>
<NoteThumbnails data={currNotes} location={"Shared"} areTemps={false} email="temp" tags={currTags} show={showTags}/>
</div>
</div>
);
Expand Down

0 comments on commit aaa78c6

Please sign in to comment.