Simplify and fix mobile compatibility

Author: varunsingh87

components/JottingsControls/jottingsControl.js

@@ -15,23 +15,23 @@ export default function JottingsControl(props) {
 	const [tasks, setTasks] = useState(null);
 	const [labels, setLabels] = useState(null);
 
-	const { width } = useWindowSize();
-	const [activeList, setActiveList] = useState('labels');
-
 	const router = useRouter();
+	const [matches, setMatches] = useState(
+		window.matchMedia("(min-width: 800px)").matches
+	  )
 
-	useEffect(() => {
-		if (width >= 800) {
-			setActiveList('all');
-		} else {
-			setActiveList('labels');
-		}
-	}, [width]);
+	  useEffect(() => {
 
-    useEffect(() => {
-        setActiveList(router.query.list || 'labels');
+		const handleResize = e => {
+			setMatches(e.matches);
+		};
 
-    }, [router.query]);
+		window
+		.matchMedia("(min-width: 800px)")
+		.addEventListener('change', handleResize);
+
+		return () => { removeEventListener('change', handleResize); };
+	  }, []);
 
 	const getJotsToShow = (response, jotType) => {
 		if (
@@ -109,13 +109,16 @@ export default function JottingsControl(props) {
 	useEffect(() => {
 		makeLabelsRequest();
 		makeJottingsRequests();
+		console.log(router.asPath);
 	}, []);
 
+	const showList = list => router.asPath.includes(`list=${list}`)
+
 	return (
 		<>
-			<LabelsControl active={['labels', 'all'].includes(activeList)} labelsState={[labels, setLabels]} />
-			<NotesControl active={['notes', 'all'].includes(activeList)} notesState={[notes, setNotes]} />
-			<TasksControl active={['tasks', 'all'].includes(activeList)} tasksState={[tasks, setTasks]} />
+			<LabelsControl active={router.asPath.includes(`list=labels`) || !router.asPath.includes('list=')} labelsState={[labels, setLabels]} />
+			<NotesControl active={showList('notes')} notesState={[notes, setNotes]} />
+			<TasksControl active={showList('tasks')} tasksState={[tasks, setTasks]} />
 
 			<NoteControl notes={notes} />
 			<TaskControl tasks={tasks} />

components/JottingsControls/jottingsControl.module.css

@@ -3,9 +3,9 @@
 }
 
 .labelList, .ownNoteList, .ownTaskList {
-	display: none;
 	grid-row: 2;
 	grid-column: 2 / -1;
+	display: none;
 }
 
 .labelList h1, .ownNoteList h1, .ownTaskList h1 {
@@ -18,6 +18,10 @@
 }
 
 @media screen and (min-width: 800px) {
+	.labelList h1, .ownNoteList h1, .ownTaskList h1, .labelList, .ownNoteList, .ownTaskList {
+		display: block;
+	}
+
 	.ownNoteList {
 		grid-column: 2 / 5;
 	}

components/JottingsControls/labelsControl.js

@@ -17,7 +17,7 @@ export default function LabelsControl({labelsState, active}) {
     const [labels, setLabels] = labelsState;
 
 	return (
-		<article style={{display: active ? "block" : "none"}} className={jottingsControl.labelList}>
+		<article className={`${active ? "active" : ""} ${jottingsControl.labelList}`}>
 			<h1>Labels</h1>
 			{labels ? <LabelList labels={labels} /> : <ProgressSpinner />}
 			{/* <CreateNoteButton jots={notes} /> */}

components/JottingsControls/notesControl.js

@@ -16,7 +16,7 @@ export default function NotesControl({notesState, active}) {
     const [notes, setNotes] = notesState;
 
 	return (
-		<article style={{display: active ? 'block' : 'none'}} className={jottingsControl.ownNoteList}>
+		<article className={`${active ? "active" : ""} ${jottingsControl.ownNoteList}`}>
 			<h1>Notes</h1>
 			{notes ? <NoteList notes={notes} /> : <ProgressSpinner />}
 			<CreateNoteButton jots={notes} />

components/JottingsControls/tasksControl.js

@@ -15,7 +15,7 @@ export default function TasksControl({ tasksState, active }) {
 	const [tasks, setTasks] = tasksState;
 
 	return (
-		<article style={{display: active ? 'block' : 'none'}} className={jottingsControl.ownTaskList}>
+		<article className={`${active ? "active" : ""} ${jottingsControl.ownTaskList}`}>
 			<h1>Tasks</h1>
 			{tasks ? <TaskList tasks={tasks} /> : <ProgressSpinner />}
 			<CreateTaskButton jots={tasks} />

styles/globals.css

@@ -59,3 +59,7 @@ button:hover {
     opacity: 0;
   }
 }
+
+article.active {
+  display: block;
+}