Skip to content

Commit aa706e1

Browse files
varunsingh87varunsingh87
committed
Implement labeling, change jotting background
* Display labels list * Show only jottings with the label that is selected using front-end filtering * Change jotting background to very pale grey and add same (red) border color as note list, task list, label list v1.3.0
1 parent 7af9aea commit aa706e1

18 files changed

Lines changed: 196 additions & 29 deletions

‎components/Jotting/jotting.module.css‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -13,7 +13,8 @@
1313
display: grid;
1414
grid-template-rows: 50px 100px 300px;
1515
grid-template-columns: repeat(4, 1fr);
16-
background-color: rgb(124, 252, 252);
16+
background-color: rgb(255, 250, 250);
17+
border: 2px double #cd5c5c;
1718
padding: 2% 5%;
1819
width: 100%;
1920
height: 500px;

‎components/Jotting/taskPreview.js‎

Lines changed: 2 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,16 +1,15 @@
11
import jotting from "./jotting.module.css";
22
import Jotting from "../../libs/Jotting";
33
import { useRouter } from "next/router";
4-
import Image from "next/image";
54
import PinImage from "../pinImage";
65

76
export default function TaskPreview(props) {
87
const router = useRouter();
98

109
return (
1110
<data className={jotting.jotting} value={"T" + props.id}>
12-
<button className={jotting.previewButton} onClick={(e) => Jotting.openJotting(router, "task", props)}>
13-
<span className={jotting.previewTitle}>{props.title}</span>
11+
<button className={jotting.previewButton} onClick={() => Jotting.openJotting(router, "task", props)}>
12+
<span className={`${jotting.previewTitle} ${props.completed == "1" && jotting.completed}`}>{props.title}</span>
1413
{props.priority == 1 ? <PinImage className={jotting.previewPin} /> : ""}
1514
</button>
1615
</data>

‎components/JottingList/noteList.js‎

Lines changed: 13 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -9,9 +9,20 @@ export default function NoteList({ notes }) {
99
noteList = notes
1010
.filter((item) => {
1111
const urlParser = new URLSearchParams(location.search);
12+
13+
const labelIsNotRelevant = !urlParser.has("label") || item.owner === "shared" || !item.labels;
14+
15+
if (item.labels) {
16+
console.info("[NoteList] Labels", Object.values(item.labels));
17+
}
18+
19+
const jotHasLabel = labelIsNotRelevant || Array.isArray(Object.values(item.labels)) && Object.values(item.labels).some(item => item.name.toLocaleLowerCase() === urlParser.get("label").toLocaleLowerCase());
20+
1221
return (
13-
!urlParser.has("q") ||
14-
item.title.toLocaleLowerCase().includes(urlParser.get("q").toLocaleLowerCase())
22+
(
23+
!urlParser.has("q") ||
24+
item.title.toLocaleLowerCase().includes(urlParser.get("q").toLocaleLowerCase())
25+
) && jotHasLabel
1526
);
1627
})
1728
.map((item) => (

‎components/JottingList/taskList.js‎

Lines changed: 10 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -9,10 +9,19 @@ export default function TaskList({ tasks }) {
99
taskList = tasks
1010
.filter((item) => {
1111
const urlParser = new URLSearchParams(location.search);
12+
13+
const labelIsNotRelevant = !urlParser.has("label") || item.owner === "shared" || !item.labels;
14+
15+
if (item.labels) {
16+
console.info("[TaskList] Labels", Object.values(item.labels));
17+
}
18+
19+
const jotHasLabel = labelIsNotRelevant || Array.isArray(Object.values(item.labels)) && Object.values(item.labels).some(item => item.name.toLocaleLowerCase() === urlParser.get("label").toLocaleLowerCase());
20+
1221
return (
1322
!urlParser.has("q") ||
1423
item.title.toLocaleLowerCase().includes(urlParser.get("q").toLocaleLowerCase())
15-
);
24+
) && jotHasLabel;
1625
})
1726
.map((item) => (
1827
<li key={item.id}>

‎components/JottingsControls/jottingsControl.js‎

Lines changed: 49 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -1,16 +1,23 @@
11
import NoteControl from "./noteControl";
22
import TaskControl from "./taskControl";
3+
import LabelControl from "./labelControl";
34
import NotesControl from "./notesControl";
45
import TasksControl from "./tasksControl";
6+
import LabelsControl from "./labelsControl";
57
import { useEffect, useState } from "react";
6-
import { getJottings, getSharedJottings } from "../../libs/Datastore/requests";
8+
import { getJottings, getSharedJottings, getLabels, getLabel } from "../../libs/Datastore/requests";
79
import { useInterval } from "../../libs/delay";
810
import { compareArrays } from "../../libs/arrayExtensions";
11+
import UrlService from "../../libs/UrlService";
12+
import { useRouter } from "next/router";
913

1014
export default function JottingsControl(props) {
1115
const [notes, setNotes] = useState(null);
1216
const [tasks, setTasks] = useState(null);
13-
17+
const [labels, setLabels] = useState(null);
18+
19+
const urlParser = new URLSearchParams(location.search);
20+
1421
const getJotsToShow = (response, jotType) => {
1522
if (
1623
response[1].status === "rejected" &&
@@ -41,27 +48,26 @@ export default function JottingsControl(props) {
4148
}
4249

4350
try {
44-
const response = Promise.allSettled([
45-
getJottings(ownAbortController),
46-
getSharedJottings(sharedAbortController),
47-
]);
51+
let promisesToSettle = [getJottings(ownAbortController), getSharedJottings(sharedAbortController)];
52+
53+
const response = Promise.allSettled(promisesToSettle);
4854

4955
console.info("Requests to owned and shared jottings started");
5056
console.debug("Response", await response);
5157

5258
const notesToShow = getJotsToShow(await response, "notes");
5359
const tasksToShow = getJotsToShow(await response, "tasks");
5460

55-
console.info("Response received, data computed");
56-
console.debug("notesToShow", notesToShow);
57-
console.debug("tasksToShow", tasksToShow);
61+
console.log("Response received, data computed");
62+
console.info("notesToShow", notesToShow);
63+
console.info("tasksToShow", tasksToShow);
5864

5965
const notesToShowIsNewData =
6066
notes == null || compareArrays(notes, notesToShow);
6167

6268
if (notesToShowIsNewData) {
6369
setNotes(notesToShow);
64-
console.info("UI updated");
70+
console.log("UI updated");
6571
}
6672
if (tasksToShow != tasks) {
6773
setTasks(tasksToShow);
@@ -71,21 +77,50 @@ export default function JottingsControl(props) {
7177
}
7278
};
7379

80+
const makeLabelsRequest = async (interval) => {
81+
const abortController = new AbortController();
82+
83+
if (labels === -1) {
84+
console.error("[makeLabelsRequest] Interval cleared due to errors");
85+
clearInterval(interval);
86+
}
87+
88+
try {
89+
const response = await getLabels(abortController);
90+
console.log("Requests to labels started");
91+
console.log("labels", response);
92+
93+
const labelsToShowIsNewData = labels == null || compareArrays(labels, response);
94+
95+
if (labelsToShowIsNewData) {
96+
setLabels(response);
97+
console.info("labels", labels);
98+
console.log("UI updated");
99+
}
100+
} catch (e) {
101+
console.error("Request Error:", e);
102+
setLabels(-1);
103+
}
104+
};
105+
74106
// componentDidMount() - Load the jottings and recurringly update them with requests
75107
const updateData = useInterval(() => {
76108
console.group("Interval Cycle");
77-
makeJottingsRequests(updateData).then(() =>
78-
console.groupEnd("Interval Cycle")
79-
);
109+
Promise.all([
110+
makeJottingsRequests(updateData),
111+
makeLabelsRequest(updateData)
112+
]).then(() => console.groupEnd("Interval Cycle"))
80113
}, 10000);
81114

82115
return (
83116
<>
117+
<LabelsControl labelsState={[labels, setLabels]} />
84118
<NotesControl notesState={[notes, setNotes]} />
85119
<TasksControl tasksState={[tasks, setTasks]} />
86-
120+
87121
<NoteControl notes={notes} />
88122
<TaskControl tasks={tasks} />
123+
<LabelControl labels={labels} />
89124
</>
90125
);
91126
}

‎components/JottingsControls/jottingsControl.module.css‎

Lines changed: 7 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,16 +1,20 @@
11
.ownNoteList {
2-
grid-column: 1 / 3;
2+
grid-column: 2 / 5;
33
}
44

55
.ownTaskList {
6-
grid-column: 3 / 7;
6+
grid-column: 5 / 9;
77
}
88

9-
.ownNoteList, .ownTaskList {
9+
.ownNoteList, .ownTaskList, .labelList {
1010
grid-row: 2 / 6;
1111
margin: 1em;
1212
}
1313

14+
.labelList {
15+
grid-column: 1 / 2;
16+
}
17+
1418
.fullJotting {
1519
display: grid;
1620
grid-row: 2 / 5;

‎components/JottingsControls/labelControl.js‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
export default function LabelControl(props) {
2+
return null;
3+
}

‎components/JottingsControls/labelsControl.js‎

Lines changed: 25 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,25 @@
1+
import ProgressSpinner from "../ProgressSpinner/progressSpinner";
2+
// import CreateNoteButton from "../CreateJottingButton/createNoteButton";
3+
import LabelList from "../LabelList/labelList";
4+
import jottingsControl from "./jottingsControl.module.css";
5+
6+
/**
7+
* Control for Labels heading,
8+
* list for view user labels, and
9+
* button to create label
10+
* @param { { notesState: [notes, setNotes] } } props
11+
* @param props.labelsState The array returned from useState for the notes state
12+
* @param props.notesState[0] The value of notes
13+
* @param props.notesState[1] The Dispatch to set a new value to the notes state
14+
*/
15+
export default function LabelsControl({labelsState}) {
16+
const [labels, setLabels] = labelsState;
17+
18+
return (
19+
<article className={jottingsControl.labelList}>
20+
<h1>Labels</h1>
21+
{labels ? <LabelList labels={labels} /> : <ProgressSpinner />}
22+
{/* <CreateNoteButton jots={notes} /> */}
23+
</article>
24+
);
25+
}

‎components/LabelList/labelList.js‎

Lines changed: 18 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,18 @@
1+
import LabelPreview from "../LabelPreview/labelPreview";
2+
import FetchError from "../FetchError/fetchError";
3+
import labelListMod from "./labelList.module.css"
4+
5+
export default function LabelList({labels}) {
6+
let labelList = <FetchError itemName="labels" />;
7+
8+
if (labels instanceof Array) {
9+
labelList = labels
10+
.map((item) => (
11+
<li key={item.id}>
12+
<LabelPreview {...item} />
13+
</li>
14+
));
15+
}
16+
17+
return <ul className={labelListMod.dataList}>{labelList}</ul>;
18+
}

‎components/LabelList/labelList.module.css‎

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,9 @@
1+
.dataList {
2+
display: flex;
3+
flex-direction: column;
4+
align-content: flex-start;
5+
border: 2px double indianred;
6+
padding: 0;
7+
height: 350px;
8+
overflow-y: auto;
9+
}

0 commit comments

Comments
 (0)