From e65efb841f8a847e285b08bafa3e41d0a4b59085 Mon Sep 17 00:00:00 2001 From: Sara Date: Thu, 2 Nov 2023 16:03:10 +0100 Subject: [PATCH] fix api auth --- www/app/[domain]/browse/page.tsx | 48 ++++--------------- .../transcripts/[transcriptId]/page.tsx | 26 ++++------ .../[transcriptId]/record/page.tsx | 5 +- .../[domain]/transcripts/createTranscript.ts | 4 +- www/app/[domain]/transcripts/recorder.tsx | 1 + www/app/[domain]/transcripts/useTopics.ts | 14 +++--- www/app/[domain]/transcripts/useTranscript.ts | 21 ++++---- .../[domain]/transcripts/useTranscriptList.ts | 44 +++++++++++++++++ www/app/[domain]/transcripts/useWaveform.ts | 16 +++---- www/app/[domain]/transcripts/useWebRTC.ts | 5 +- www/app/lib/edgeConfig.ts | 2 +- www/app/lib/getApi.ts | 31 ++++++++---- 12 files changed, 118 insertions(+), 99 deletions(-) create mode 100644 www/app/[domain]/transcripts/useTranscriptList.ts diff --git a/www/app/[domain]/browse/page.tsx b/www/app/[domain]/browse/page.tsx index 21f28c81..b2359b9e 100644 --- a/www/app/[domain]/browse/page.tsx +++ b/www/app/[domain]/browse/page.tsx @@ -1,43 +1,17 @@ "use client"; -import React, { useState, useEffect } from "react"; -import getApi from "../../lib/getApi"; -import { - PageGetTranscript, - GetTranscript, - GetTranscriptFromJSON, -} from "../../api"; +import React, { useState } from "react"; + +import { GetTranscript } from "../../api"; import { Title } from "../../lib/textComponents"; import Pagination from "./pagination"; import Link from "next/link"; -import { useFiefIsAuthenticated } from "@fief/fief/nextjs/react"; import { FontAwesomeIcon } from "@fortawesome/react-fontawesome"; import { faGear } from "@fortawesome/free-solid-svg-icons"; +import useTranscriptList from "../transcripts/useTranscriptList"; export default function TranscriptBrowser() { - const api = getApi(); - const [results, setResults] = useState(null); const [page, setPage] = useState(1); - const [isLoading, setIsLoading] = useState(false); - const isAuthenticated = useFiefIsAuthenticated(); - - useEffect(() => { - if (!isAuthenticated) return; - setIsLoading(true); - api - .v1TranscriptsList({ page }) - .then((response) => { - // issue with API layer, conversion for items is not happening - response.items = response.items.map((item) => - GetTranscriptFromJSON(item), - ); - setResults(response); - setIsLoading(false); - }) - .catch(() => { - setResults(null); - setIsLoading(false); - }); - }, [page, isAuthenticated]); + const { loading, response } = useTranscriptList(page); return (
@@ -52,12 +26,12 @@ export default function TranscriptBrowser() {
- {isLoading && ( + {loading && (
)} - {!isLoading && !results ? ( + {!loading && !response && (
No transcripts found, but you can  @@ -73,12 +47,10 @@ export default function TranscriptBrowser() {  to get started.
- ) : ( - <> )}
- {results?.items.map((item: GetTranscript) => ( + {response?.items.map((item: GetTranscript) => (
(""); - const transcript = useTranscript(api, transcriptId); - const topics = useTopics(api, transcriptId); - const waveform = useWaveform(api, transcriptId); - const useActiveTopic = useState(null); - const requireLogin = featureEnabled("requireLogin"); +const protectedPath = true; - useEffect(() => { - if (requireLogin && !isAuthenticated) return; - setTranscriptId(details.params.transcriptId); - }, [api]); +export default function TranscriptDetails(details: TranscriptDetails) { + const transcriptId = details.params.transcriptId; + + const transcript = useTranscript(protectedPath, transcriptId); + const topics = useTopics(protectedPath, transcriptId); + const waveform = useWaveform(protectedPath, transcriptId); + const useActiveTopic = useState(null); if (transcript?.error /** || topics?.error || waveform?.error **/) { return ( diff --git a/www/app/[domain]/transcripts/[transcriptId]/record/page.tsx b/www/app/[domain]/transcripts/[transcriptId]/record/page.tsx index 8e31327c..cc6d23ce 100644 --- a/www/app/[domain]/transcripts/[transcriptId]/record/page.tsx +++ b/www/app/[domain]/transcripts/[transcriptId]/record/page.tsx @@ -36,9 +36,8 @@ const TranscriptRecord = (details: TranscriptDetails) => { } }, []); - const api = getApi(); - const transcript = useTranscript(api, details.params.transcriptId); - const webRTC = useWebRTC(stream, details.params.transcriptId, api); + const transcript = useTranscript(false, details.params.transcriptId); + const webRTC = useWebRTC(stream, details.params.transcriptId, true); const webSockets = useWebSockets(details.params.transcriptId); const { audioDevices, getAudioStream } = useAudioDevice(); diff --git a/www/app/[domain]/transcripts/createTranscript.ts b/www/app/[domain]/transcripts/createTranscript.ts index aaecdc32..31a034f4 100644 --- a/www/app/[domain]/transcripts/createTranscript.ts +++ b/www/app/[domain]/transcripts/createTranscript.ts @@ -19,10 +19,10 @@ const useCreateTranscript = (): CreateTranscript => { const [loading, setLoading] = useState(false); const [error, setErrorState] = useState(null); const { setError } = useError(); - const api = getApi(); + const api = getApi(true); const create = (params: V1TranscriptsCreateRequest["createTranscript"]) => { - if (loading) return; + if (loading || !api) return; setLoading(true); const requestParameters: V1TranscriptsCreateRequest = { diff --git a/www/app/[domain]/transcripts/recorder.tsx b/www/app/[domain]/transcripts/recorder.tsx index 401b6c9e..dc6bc0a7 100644 --- a/www/app/[domain]/transcripts/recorder.tsx +++ b/www/app/[domain]/transcripts/recorder.tsx @@ -15,6 +15,7 @@ import AudioInputsDropdown from "./audioInputsDropdown"; import { Option } from "react-dropdown"; import { useError } from "../../(errors)/errorContext"; import { waveSurferStyles } from "../../styles/recorder"; +import useMp3 from "./useMp3"; type RecorderProps = { setStream?: React.Dispatch>; diff --git a/www/app/[domain]/transcripts/useTopics.ts b/www/app/[domain]/transcripts/useTopics.ts index 58aebcec..f9299858 100644 --- a/www/app/[domain]/transcripts/useTopics.ts +++ b/www/app/[domain]/transcripts/useTopics.ts @@ -5,6 +5,7 @@ import { } from "../../api/apis/DefaultApi"; import { useError } from "../../(errors)/errorContext"; import { Topic } from "./webSocketTypes"; +import getApi from "../../lib/getApi"; type TranscriptTopics = { topics: Topic[] | null; @@ -12,14 +13,15 @@ type TranscriptTopics = { error: Error | null; }; -const useTopics = (api: DefaultApi, id: string): TranscriptTopics => { +const useTopics = (protectedPath, id: string): TranscriptTopics => { const [topics, setTopics] = useState(null); const [loading, setLoading] = useState(false); const [error, setErrorState] = useState(null); const { setError } = useError(); + const api = getApi(protectedPath); - const getTopics = (id: string) => { - if (!id) return; + useEffect(() => { + if (!id || !api) return; setLoading(true); const requestParameters: V1TranscriptGetTopicsRequest = { @@ -36,11 +38,7 @@ const useTopics = (api: DefaultApi, id: string): TranscriptTopics => { setError(err); setErrorState(err); }); - }; - - useEffect(() => { - getTopics(id); - }, [id]); + }, [id, api]); return { topics, loading, error }; }; diff --git a/www/app/[domain]/transcripts/useTranscript.ts b/www/app/[domain]/transcripts/useTranscript.ts index 81c9202f..1fe462da 100644 --- a/www/app/[domain]/transcripts/useTranscript.ts +++ b/www/app/[domain]/transcripts/useTranscript.ts @@ -1,7 +1,8 @@ import { useEffect, useState } from "react"; -import { DefaultApi, V1TranscriptGetRequest } from "../../api/apis/DefaultApi"; +import { V1TranscriptGetRequest } from "../../api/apis/DefaultApi"; import { GetTranscript } from "../../api"; import { useError } from "../../(errors)/errorContext"; +import getApi from "../../lib/getApi"; type Transcript = { response: GetTranscript | null; @@ -9,14 +10,18 @@ type Transcript = { error: Error | null; }; -const useTranscript = (api: DefaultApi, id: string | null): Transcript => { +const useTranscript = ( + protectedPath: boolean, + id: string | null, +): Transcript => { const [response, setResponse] = useState(null); - const [loading, setLoading] = useState(false); + const [loading, setLoading] = useState(true); const [error, setErrorState] = useState(null); const { setError } = useError(); + const api = getApi(protectedPath); - const getTranscript = (id: string | null) => { - if (!id) return; + useEffect(() => { + if (!id || !api) return; setLoading(true); const requestParameters: V1TranscriptGetRequest = { @@ -33,11 +38,7 @@ const useTranscript = (api: DefaultApi, id: string | null): Transcript => { setError(err); setErrorState(err); }); - }; - - useEffect(() => { - getTranscript(id); - }, [id]); + }, [id, !api]); return { response, loading, error }; }; diff --git a/www/app/[domain]/transcripts/useTranscriptList.ts b/www/app/[domain]/transcripts/useTranscriptList.ts new file mode 100644 index 00000000..cc8f4701 --- /dev/null +++ b/www/app/[domain]/transcripts/useTranscriptList.ts @@ -0,0 +1,44 @@ +import { useEffect, useState } from "react"; +import { GetTranscriptFromJSON, PageGetTranscript } from "../../api"; +import { useError } from "../../(errors)/errorContext"; +import getApi from "../../lib/getApi"; + +type TranscriptList = { + response: PageGetTranscript | null; + loading: boolean; + error: Error | null; +}; + +//always protected +const useTranscriptList = (page: number): TranscriptList => { + const [response, setResponse] = useState(null); + const [loading, setLoading] = useState(true); + const [error, setErrorState] = useState(null); + const { setError } = useError(); + const api = getApi(true); + + useEffect(() => { + if (!api) return; + setLoading(true); + api + .v1TranscriptsList({ page }) + .then((response) => { + // issue with API layer, conversion for items is not happening + response.items = response.items.map((item) => + GetTranscriptFromJSON(item), + ); + setResponse(response); + setLoading(false); + }) + .catch((err) => { + setResponse(null); + setLoading(false); + setError(err); + setErrorState(err); + }); + }, [!api, page]); + + return { response, loading, error }; +}; + +export default useTranscriptList; diff --git a/www/app/[domain]/transcripts/useWaveform.ts b/www/app/[domain]/transcripts/useWaveform.ts index 2cc22349..4be63a3a 100644 --- a/www/app/[domain]/transcripts/useWaveform.ts +++ b/www/app/[domain]/transcripts/useWaveform.ts @@ -5,6 +5,7 @@ import { } from "../../api/apis/DefaultApi"; import { AudioWaveform } from "../../api"; import { useError } from "../../(errors)/errorContext"; +import getApi from "../../lib/getApi"; type AudioWaveFormResponse = { waveform: AudioWaveform | null; @@ -12,14 +13,15 @@ type AudioWaveFormResponse = { error: Error | null; }; -const useWaveform = (api: DefaultApi, id: string): AudioWaveFormResponse => { +const useWaveform = (protectedPath, id: string): AudioWaveFormResponse => { const [waveform, setWaveform] = useState(null); - const [loading, setLoading] = useState(false); + const [loading, setLoading] = useState(true); const [error, setErrorState] = useState(null); const { setError } = useError(); + const api = getApi(protectedPath); - const getWaveform = (id: string) => { - if (!id) return; + useEffect(() => { + if (!id || !api) return; setLoading(true); const requestParameters: V1TranscriptGetAudioWaveformRequest = { @@ -36,11 +38,7 @@ const useWaveform = (api: DefaultApi, id: string): AudioWaveFormResponse => { setError(err); setErrorState(err); }); - }; - - useEffect(() => { - getWaveform(id); - }, [id]); + }, [id, api]); return { waveform, loading, error }; }; diff --git a/www/app/[domain]/transcripts/useWebRTC.ts b/www/app/[domain]/transcripts/useWebRTC.ts index 07468547..61d2c408 100644 --- a/www/app/[domain]/transcripts/useWebRTC.ts +++ b/www/app/[domain]/transcripts/useWebRTC.ts @@ -5,14 +5,16 @@ import { V1TranscriptRecordWebrtcRequest, } from "../../api/apis/DefaultApi"; import { useError } from "../../(errors)/errorContext"; +import getApi from "../../lib/getApi"; const useWebRTC = ( stream: MediaStream | null, transcriptId: string | null, - api: DefaultApi, + protectedPath, ): Peer => { const [peer, setPeer] = useState(null); const { setError } = useError(); + const api = getApi(protectedPath); useEffect(() => { if (!stream || !transcriptId) { @@ -35,6 +37,7 @@ const useWebRTC = ( }); p.on("signal", (data: any) => { + if (!api) return; if ("sdp" in data) { const requestParameters: V1TranscriptRecordWebrtcRequest = { transcriptId: transcriptId, diff --git a/www/app/lib/edgeConfig.ts b/www/app/lib/edgeConfig.ts index 1fdf77b6..fb88108c 100644 --- a/www/app/lib/edgeConfig.ts +++ b/www/app/lib/edgeConfig.ts @@ -3,7 +3,7 @@ import { isDevelopment } from "./utils"; const localConfig = { features: { - requireLogin: true, + requireLogin: false, privacy: true, browse: true, }, diff --git a/www/app/lib/getApi.ts b/www/app/lib/getApi.ts index 9347d9b8..3e5f4197 100644 --- a/www/app/lib/getApi.ts +++ b/www/app/lib/getApi.ts @@ -2,21 +2,32 @@ import { Configuration } from "../api/runtime"; import { DefaultApi } from "../api/apis/DefaultApi"; import { useFiefAccessTokenInfo } from "@fief/fief/nextjs/react"; -import { useContext } from "react"; -import { DomainContext } from "../[domain]/domainContext"; +import { useContext, useEffect, useState } from "react"; +import { DomainContext, featureEnabled } from "../[domain]/domainContext"; -export default function getApi(): DefaultApi { +export default function getApi(protectedPath: boolean): DefaultApi | undefined { const accessTokenInfo = useFiefAccessTokenInfo(); const api_url = useContext(DomainContext).api_url; + const requireLogin = featureEnabled("requireLogin"); + const [api, setApi] = useState(); + if (!api_url) throw new Error("no API URL"); - const apiConfiguration = new Configuration({ - basePath: api_url, - accessToken: accessTokenInfo - ? "Bearer " + accessTokenInfo.access_token - : undefined, - }); - const api = new DefaultApi(apiConfiguration); + useEffect(() => { + // console.log('trying auth', protectedPath, requireLogin, accessTokenInfo) + if (protectedPath && requireLogin && !accessTokenInfo) { + // console.log('waiting auth') + return; + } + + const apiConfiguration = new Configuration({ + basePath: api_url, + accessToken: accessTokenInfo + ? "Bearer " + accessTokenInfo.access_token + : undefined, + }); + setApi(new DefaultApi(apiConfiguration)); + }, [!accessTokenInfo]); return api; }