Course api request refactor

src/components/BreakpointManager.ts

 import { useContext, useEffect } from "react";
-import { getBreakpointForWidth } from "src/helper";
+
 import { AppStoreContext } from "./AppStoreContext";
+import { getBreakpointForWidth } from "src/helper";
 
 export const BreakpointManager = () => {
 	const appStore = useContext(AppStoreContext);

src/helper.ts

@@ -4,7 +4,7 @@ export const getBreakpointForWidth = (width: number): number => {
 	const breakpoints = Object.keys(Breakpoint);
 
 	let result = breakpoints[0];
-	for (let i = 0; i < breakpoints.length && width > Breakpoint[breakpoints[i]]; i++) result = breakpoints[i];
+	for (let i = 0; i < breakpoints.length && width >= Breakpoint[breakpoints[i]]; i++) result = breakpoints[i];
 
 	return Breakpoint[result];
 };

src/screens/course/Course.tsx

 import { CourseContext, CourseProvider } from "./useCourse";
+import React, { useContext, useEffect, useMemo } from "react";
 import { observer, useComputed } from "mobx-react-lite";
-import { useContext, useEffect, useMemo } from "react";
 
 import { AppStoreContext } from "src/components/AppStoreContext";
 import { Breakpoint } from "src/style";
 import { LayoutContext } from "../../layout/Layout";
 import { Loading } from "src/components/loading/Loading";
 import { NavigationComponentProps } from "../../navigation/Navigator";
-import React from "react";
+import { courseFromJSON } from "openfing-core/lib/factories";
+import gql from "graphql-tag";
 import queryString from "query-string";
 import { styles } from "./Course.styles";
-import { toJS } from "mobx";
 import { useDocumentTitle } from "../../components/useDocumentTitle";
-import { useFetchCourseByCode } from "openfing-core/lib/hooks/useFetchCourse";
 import { useHistory } from "src/hooks/useHistory";
+import { useQuery } from "react-apollo-hooks";
+import { useRootStore } from "openfing-core/lib/hooks/useRootStore";
+
+type CourseData = {
+	courseByCode: {
+		id: number;
+		code: string;
+		name?: string;
+		eva?: string;
+		iconURL?: string;
+	};
+};
+
+const COURSE_QUERY = gql`
+	query courseByCode($code: String!) {
+		courseByCode(code: $code) {
+			id
+			code
+			name
+			eva
+			semester
+			year
+			iconURL
+
+			classLists {
+				id
+				name
+
+				classes {
+					id
+					title
+					number
+
+					videos {
+						id
+						name
+						position
+
+						qualities {
+							id
+							height
+							width
+
+							formats {
+								id
+								name
+								url
+							}
+						}
+					}
+				}
+			}
+		}
+	}
+`;
 
 // TODO: custom useQuery with parseData callback?
 
+const useForceUpdate = () => {
+	const [, setB] = React.useState(false);
+
+	return React.useCallback(() => {
+		setB(b => !b);
+	}, []);
+};
+
 export const Course: React.FunctionComponent<NavigationComponentProps<{ courseCode: string }>> = observer(props => {
 	const { courseCode } = props.match.params;
+	const forceUpdate = useForceUpdate();
 
 	const { history } = useHistory();
 	const queryParams = useMemo<{ t?: string; cci?: string; ccn?: string; ccl?: string }>(
@@ -26,9 +89,20 @@ export const Course: React.FunctionComponent<NavigationComponentProps<{ courseCo
 		[history.location.search]
 	);
 	const appStore = useContext(AppStoreContext);
-	const [fetchCourseByCodeState] = useFetchCourseByCode({ courseCode, autoFetch: true, forceFetch: false });
+	const { courseStore } = useRootStore();
+	const course = courseStore.coursesByCode.get(courseCode) || undefined;
+
+	const { loading, data, ...rest } = useQuery<CourseData>(COURSE_QUERY, {
+		skip: !!course && !!course.classLists,
+		variables: { code: courseCode },
+	});
+	React.useEffect(() => {
+		if (!data || !data.courseByCode) return;
+
+		courseStore.saveCourse(courseFromJSON(data.courseByCode));
+		forceUpdate();
+	}, [data]);
 
-	const course = fetchCourseByCodeState.success ? fetchCourseByCodeState.course : undefined;
 	const courseName = course ? course.name : undefined;
 	const setLayoutOptions = useContext(LayoutContext);
 	const contextRef = React.useRef<CourseContext>();
@@ -65,11 +139,15 @@ export const Course: React.FunctionComponent<NavigationComponentProps<{ courseCo
 
 		if (!current) return;
 
-		current.fetchCourseByCodeState = fetchCourseByCodeState;
+		current.fetchCourseByCodeState = loading
+			? { isLoading: loading }
+			: course
+			? { isLoading: false, success: true, course }
+			: { isLoading: false, success: undefined };
 		current.course = course;
 		current.courseClassList = courseClassList;
 		current.courseClass = courseClass;
-	}, [fetchCourseByCodeState, course, courseClassList, courseClass]);
+	}, [loading, course, courseClassList, courseClass]);
 
 	useEffect(() => {
 		if (!contextRef.current) return;
@@ -99,8 +177,6 @@ export const Course: React.FunctionComponent<NavigationComponentProps<{ courseCo
 	);
 
 	return (
-		<CourseProvider contextRef={contextRef}>
-			{fetchCourseByCodeState.isLoading ? <Loading /> : fetchCourseByCodeState.success ? content : null}
-		</CourseProvider>
+		<CourseProvider contextRef={contextRef}>{loading ? <Loading /> : course ? content : <div />}</CourseProvider>
 	);
 });

src/style/Mixins.ts

-import darken from "polished/lib/color/darken";
 import { FlattenSimpleInterpolation, css } from "styled-components";
+
 import { Breakpoint } from "./Breakpoint";
+import darken from "polished/lib/color/darken";
 
 export const EllipsisText = (maxHeight?: string) => css`
 	overflow: hidden;