Arik Chakma
1 month ago
parent
13855f06dd
commit
e11ac4bf84
11 changed files with 519 additions and 183 deletions
@ -0,0 +1,37 @@ |
||||
import { Modal } from '../Modal'; |
||||
|
||||
type NextLessonAlertModalProps = { |
||||
onClose: () => void; |
||||
onContinue: () => void; |
||||
}; |
||||
|
||||
export function NextLessonAlertModal(props: NextLessonAlertModalProps) { |
||||
const { onClose, onContinue } = props; |
||||
|
||||
return ( |
||||
<Modal |
||||
onClose={onClose} |
||||
bodyClassName="h-auto p-4 bg-zinc-900 border border-zinc-700 text-white" |
||||
> |
||||
<h2 className="text-lg font-semibold">Warning</h2> |
||||
<p className="mt-2"> |
||||
Please submit your answer before moving to the next lesson. |
||||
</p> |
||||
|
||||
<div className="mt-4 grid grid-cols-2 gap-2"> |
||||
<button |
||||
className="rounded-lg border border-zinc-800 px-4 py-2 text-sm leading-none" |
||||
onClick={onClose} |
||||
> |
||||
Cancel |
||||
</button> |
||||
<button |
||||
className="rounded-lg bg-zinc-800 px-4 py-2 text-sm leading-none text-zinc-50" |
||||
onClick={onContinue} |
||||
> |
||||
Continue |
||||
</button> |
||||
</div> |
||||
</Modal> |
||||
); |
||||
} |
||||
@ -0,0 +1,52 @@ |
||||
import { useMutation, useQuery } from '@tanstack/react-query'; |
||||
import { queryClient } from '../stores/query-client'; |
||||
import { isLoggedIn } from '../lib/jwt'; |
||||
import { httpGet, httpPost } from '../lib/query-http'; |
||||
|
||||
export interface CourseProgressDocument { |
||||
_id: string; |
||||
userId: string; |
||||
courseId: string; |
||||
completed: { |
||||
chapterId: string; |
||||
lessonId: string; |
||||
completedAt: Date; |
||||
}[]; |
||||
createdAt: Date; |
||||
updatedAt: Date; |
||||
} |
||||
|
||||
export type CourseProgressResponse = { |
||||
completed: CourseProgressDocument['completed']; |
||||
}; |
||||
|
||||
export function useCourseProgress(courseId: string) { |
||||
return useQuery( |
||||
{ |
||||
queryKey: ['course-progress', courseId], |
||||
queryFn: async () => { |
||||
return httpGet<CourseProgressResponse>( |
||||
`/v1-course-progress/${courseId}`, |
||||
); |
||||
}, |
||||
enabled: !!courseId && isLoggedIn(), |
||||
}, |
||||
queryClient, |
||||
); |
||||
} |
||||
|
||||
export function useCompleteLessonMutation(courseId: string) { |
||||
return useMutation( |
||||
{ |
||||
mutationFn: async (data: { chapterId: string; lessonId: string }) => { |
||||
return httpPost(`/v1-complete-lesson/${courseId}`, data); |
||||
}, |
||||
onSettled: () => { |
||||
queryClient.invalidateQueries({ |
||||
queryKey: ['course-progress', courseId], |
||||
}); |
||||
}, |
||||
}, |
||||
queryClient, |
||||
); |
||||
} |
||||
@ -0,0 +1,146 @@ |
||||
import Cookies from 'js-cookie'; |
||||
import fp from '@fingerprintjs/fingerprintjs'; |
||||
import { TOKEN_COOKIE_NAME, removeAuthToken } from './jwt.ts'; |
||||
|
||||
type HttpOptionsType = RequestInit; |
||||
|
||||
type AppResponse = Record<string, any>; |
||||
|
||||
export interface FetchError extends Error { |
||||
status: number; |
||||
message: string; |
||||
} |
||||
|
||||
type AppError = { |
||||
status: number; |
||||
message: string; |
||||
errors?: { message: string; location: string }[]; |
||||
}; |
||||
|
||||
type ApiReturn<ResponseType> = ResponseType; |
||||
|
||||
/** |
||||
* Wrapper around fetch to make it easy to handle errors |
||||
* |
||||
* @param url |
||||
* @param options |
||||
*/ |
||||
export async function httpCall<ResponseType = AppResponse>( |
||||
url: string, |
||||
options?: HttpOptionsType, |
||||
): Promise<ApiReturn<ResponseType>> { |
||||
const fullUrl = url.startsWith('http') |
||||
? url |
||||
: `${import.meta.env.PUBLIC_API_URL}${url}`; |
||||
try { |
||||
const fingerprintPromise = await fp.load(); |
||||
const fingerprint = await fingerprintPromise.get(); |
||||
|
||||
const isMultiPartFormData = options?.body instanceof FormData; |
||||
|
||||
const headers = new Headers({ |
||||
Accept: 'application/json', |
||||
Authorization: `Bearer ${Cookies.get(TOKEN_COOKIE_NAME)}`, |
||||
fp: fingerprint.visitorId, |
||||
...(options?.headers ?? {}), |
||||
}); |
||||
|
||||
if (!isMultiPartFormData) { |
||||
headers.set('Content-Type', 'application/json'); |
||||
} |
||||
|
||||
const response = await fetch(fullUrl, { |
||||
credentials: 'include', |
||||
...options, |
||||
headers, |
||||
}); |
||||
|
||||
// @ts-ignore
|
||||
const doesAcceptHtml = options?.headers?.['Accept'] === 'text/html'; |
||||
|
||||
const data = doesAcceptHtml ? await response.text() : await response.json(); |
||||
|
||||
// Logout user if token is invalid
|
||||
if (data?.status === 401) { |
||||
removeAuthToken(); |
||||
window.location.href = '/login'; |
||||
return null as unknown as ApiReturn<ResponseType>; |
||||
} |
||||
|
||||
if (!response.ok) { |
||||
if (data.errors) { |
||||
const error = new Error() as FetchError; |
||||
error.message = data.message; |
||||
error.status = response?.status; |
||||
throw error; |
||||
} else { |
||||
throw new Error('An unexpected error occurred'); |
||||
} |
||||
} |
||||
|
||||
return data as ResponseType; |
||||
} catch (error: any) { |
||||
throw error; |
||||
} |
||||
} |
||||
|
||||
export async function httpPost<ResponseType = AppResponse>( |
||||
url: string, |
||||
body: Record<string, any>, |
||||
options?: HttpOptionsType, |
||||
): Promise<ApiReturn<ResponseType>> { |
||||
return httpCall<ResponseType>(url, { |
||||
...options, |
||||
method: 'POST', |
||||
body: body instanceof FormData ? body : JSON.stringify(body), |
||||
}); |
||||
} |
||||
|
||||
export async function httpGet<ResponseType = AppResponse>( |
||||
url: string, |
||||
queryParams?: Record<string, any>, |
||||
options?: HttpOptionsType, |
||||
): Promise<ApiReturn<ResponseType>> { |
||||
const searchParams = new URLSearchParams(queryParams).toString(); |
||||
const queryUrl = searchParams ? `${url}?${searchParams}` : url; |
||||
|
||||
return httpCall<ResponseType>(queryUrl, { |
||||
credentials: 'include', |
||||
method: 'GET', |
||||
...options, |
||||
}); |
||||
} |
||||
|
||||
export async function httpPatch<ResponseType = AppResponse>( |
||||
url: string, |
||||
body: Record<string, any>, |
||||
options?: HttpOptionsType, |
||||
): Promise<ApiReturn<ResponseType>> { |
||||
return httpCall<ResponseType>(url, { |
||||
...options, |
||||
method: 'PATCH', |
||||
body: JSON.stringify(body), |
||||
}); |
||||
} |
||||
|
||||
export async function httpPut<ResponseType = AppResponse>( |
||||
url: string, |
||||
body: Record<string, any>, |
||||
options?: HttpOptionsType, |
||||
): Promise<ApiReturn<ResponseType>> { |
||||
return httpCall<ResponseType>(url, { |
||||
...options, |
||||
method: 'PUT', |
||||
body: JSON.stringify(body), |
||||
}); |
||||
} |
||||
|
||||
export async function httpDelete<ResponseType = AppResponse>( |
||||
url: string, |
||||
options?: HttpOptionsType, |
||||
): Promise<ApiReturn<ResponseType>> { |
||||
return httpCall<ResponseType>(url, { |
||||
...options, |
||||
method: 'DELETE', |
||||
}); |
||||
} |
||||
@ -0,0 +1,4 @@ |
||||
import { atom } from 'nanostores'; |
||||
|
||||
export type LessonSubmitStatus = 'idle' | 'submitting' | 'submitted' | 'wrong'; |
||||
export const lessonSubmitStatus = atom<LessonSubmitStatus>('idle'); |
||||
Loading…
Reference in new issue