From 27a6724f5ff12240403549f86fac0a466f07ae06 Mon Sep 17 00:00:00 2001 From: Amelia Wattenberger Date: Thu, 30 Jun 2022 12:55:03 -0700 Subject: [PATCH 1/3] implement onFetchInternalEndpoint --- blocks/file-blocks/edit/index.tsx | 18 ++++++++++--- blocks/file-blocks/explain/explanation.tsx | 30 ++++++++++++++++++---- blocks/file-blocks/summarize/index.tsx | 17 +++++++++--- 3 files changed, 53 insertions(+), 12 deletions(-) diff --git a/blocks/file-blocks/edit/index.tsx b/blocks/file-blocks/edit/index.tsx index b9ba512..ac13f86 100644 --- a/blocks/file-blocks/edit/index.tsx +++ b/blocks/file-blocks/edit/index.tsx @@ -12,6 +12,8 @@ import { Button, FormControl, TextInput } from "@primer/react"; export default function (props: FileBlockProps) { const { content, context, onUpdateContent } = props; + const onFetchInternalEndpoint = + props.onFetchInternalEndpoint || onFetchInternalEndpointPolyfill; const [instruction, setInstruction] = useState(""); const [newContent, setNewContent] = useState(""); @@ -46,11 +48,14 @@ export default function (props: FileBlockProps) { onSubmit={async (e) => { e.preventDefault(); setIsLoading(true); - const res = await axios.post("/api/openai-edit", { - instruction: instruction, - input: content, + const res = await onFetchInternalEndpoint("/api/openai-edit", { + method: "POST", + data: { + instruction: instruction, + input: content, + }, }); - setNewContent(res.data); + setNewContent(res); setIsLoading(false); }} > @@ -196,3 +201,8 @@ const Change = ({ change, language }: { change: Hunk; language: string }) => { ); }; + +const onFetchInternalEndpointPolyfill = async (url: string, params: any) => { + const res = await axios(url, params); + return res.data; +}; diff --git a/blocks/file-blocks/explain/explanation.tsx b/blocks/file-blocks/explain/explanation.tsx index 559c280..81f23d1 100644 --- a/blocks/file-blocks/explain/explanation.tsx +++ b/blocks/file-blocks/explain/explanation.tsx @@ -3,10 +3,17 @@ import axios from "axios"; import { useQuery } from "react-query"; import type { Explanation } from "."; -const fetchExplanation = async (code: string, language: string) => { - const res = await axios.post(`/api/explain`, { - code, - language, +const fetchExplanation = async ( + code: string, + language: string, + onFetchInternalEndpoint: (url: string, params: any) => Promise +): Promise => { + const res = await onFetchInternalEndpoint("/api/explain", { + method: "POST", + data: { + code, + language, + }, }); return res.data; }; @@ -16,9 +23,17 @@ export function ExplanationComponent(props: { language: string; }) { const { explanation } = props; + const onFetchInternalEndpoint = + props.onFetchInternalEndpoint || onFetchInternalEndpointPolyfill; + const { data, status } = useQuery( ["explanation", props.explanation.code], - () => fetchExplanation(props.explanation.code, props.language), + () => + fetchExplanation( + props.explanation.code, + props.language, + onFetchInternalEndpoint + ), { refetchOnWindowFocus: false } ); @@ -49,3 +64,8 @@ export function ExplanationComponent(props: { ); } + +const onFetchInternalEndpointPolyfill = async (url: string, params: any) => { + const res = await axios(url, params); + return res.data; +}; diff --git a/blocks/file-blocks/summarize/index.tsx b/blocks/file-blocks/summarize/index.tsx index 4b99571..211d12e 100644 --- a/blocks/file-blocks/summarize/index.tsx +++ b/blocks/file-blocks/summarize/index.tsx @@ -9,6 +9,8 @@ import "./index.css"; export default function (props: FileBlockProps) { const { content, context } = props; + const onFetchInternalEndpoint = + props.onFetchInternalEndpoint || onFetchInternalEndpointPolyfill; const [sections, setSections] = useState([]); const [sectionExplanations, setSectionExplanations] = useState([]); const [isCollapsed, setIsCollapsed] = useState(false); @@ -39,7 +41,7 @@ export default function (props: FileBlockProps) { type === "function" && // don't hammer the endpoint index < 30 - ? await fetchCodeSummary(text, language) + ? await fetchCodeSummary(text, language, onFetchInternalEndpoint) : ""; setSectionExplanations((sectionExplanations) => { let newSectionExplanations = [...sectionExplanations]; @@ -191,9 +193,13 @@ const Section = ({ ); }; -const fetchCodeSummary = async (code: string, language: string) => { +const fetchCodeSummary = async ( + code: string, + language: string, + onFetchInternalEndpoint: (url: string, params: any) => Promise +) => { // this is an endpoint on the main prototype - const response = await axios("/api/explain", { + const response = await onFetchInternalEndpoint("/api/explain", { method: "POST", data: { language, @@ -282,3 +288,8 @@ const breakCodeIntoSections = async ( }); return sections.filter((d) => !!d.text.trim()); }; + +const onFetchInternalEndpointPolyfill = async (url: string, params: any) => { + const res = await axios(url, params); + return res.data; +}; From d37be7f01019d17b5ef236c962dc937780737ba8 Mon Sep 17 00:00:00 2001 From: Amelia Wattenberger Date: Thu, 30 Jun 2022 13:14:13 -0700 Subject: [PATCH 2/3] rename onFetchInternalEndpoint to private__onFetchInternalEndpoint --- blocks/file-blocks/edit/index.tsx | 2 +- blocks/file-blocks/explain/explanation.tsx | 2 +- blocks/file-blocks/summarize/index.tsx | 2 +- 3 files changed, 3 insertions(+), 3 deletions(-) diff --git a/blocks/file-blocks/edit/index.tsx b/blocks/file-blocks/edit/index.tsx index ac13f86..6f730b8 100644 --- a/blocks/file-blocks/edit/index.tsx +++ b/blocks/file-blocks/edit/index.tsx @@ -13,7 +13,7 @@ import { Button, FormControl, TextInput } from "@primer/react"; export default function (props: FileBlockProps) { const { content, context, onUpdateContent } = props; const onFetchInternalEndpoint = - props.onFetchInternalEndpoint || onFetchInternalEndpointPolyfill; + props.private__onFetchInternalEndpoint || onFetchInternalEndpointPolyfill; const [instruction, setInstruction] = useState(""); const [newContent, setNewContent] = useState(""); diff --git a/blocks/file-blocks/explain/explanation.tsx b/blocks/file-blocks/explain/explanation.tsx index 81f23d1..7969991 100644 --- a/blocks/file-blocks/explain/explanation.tsx +++ b/blocks/file-blocks/explain/explanation.tsx @@ -24,7 +24,7 @@ export function ExplanationComponent(props: { }) { const { explanation } = props; const onFetchInternalEndpoint = - props.onFetchInternalEndpoint || onFetchInternalEndpointPolyfill; + props.private__onFetchInternalEndpoint || onFetchInternalEndpointPolyfill; const { data, status } = useQuery( ["explanation", props.explanation.code], diff --git a/blocks/file-blocks/summarize/index.tsx b/blocks/file-blocks/summarize/index.tsx index 211d12e..d6660cd 100644 --- a/blocks/file-blocks/summarize/index.tsx +++ b/blocks/file-blocks/summarize/index.tsx @@ -10,7 +10,7 @@ import "./index.css"; export default function (props: FileBlockProps) { const { content, context } = props; const onFetchInternalEndpoint = - props.onFetchInternalEndpoint || onFetchInternalEndpointPolyfill; + props.private__onFetchInternalEndpoint || onFetchInternalEndpointPolyfill; const [sections, setSections] = useState([]); const [sectionExplanations, setSectionExplanations] = useState([]); const [isCollapsed, setIsCollapsed] = useState(false); From f8d708f8a2ac68fcf7d79571cad6e410506d62e3 Mon Sep 17 00:00:00 2001 From: Amelia Wattenberger Date: Thu, 30 Jun 2022 13:56:14 -0700 Subject: [PATCH 3/3] onFetchInternalEndpoint -return full response --- blocks/file-blocks/edit/index.tsx | 5 ++--- blocks/file-blocks/explain/explanation.tsx | 3 +-- blocks/file-blocks/summarize/index.tsx | 3 +-- 3 files changed, 4 insertions(+), 7 deletions(-) diff --git a/blocks/file-blocks/edit/index.tsx b/blocks/file-blocks/edit/index.tsx index 6f730b8..629be93 100644 --- a/blocks/file-blocks/edit/index.tsx +++ b/blocks/file-blocks/edit/index.tsx @@ -55,7 +55,7 @@ export default function (props: FileBlockProps) { input: content, }, }); - setNewContent(res); + setNewContent(res.data); setIsLoading(false); }} > @@ -203,6 +203,5 @@ const Change = ({ change, language }: { change: Hunk; language: string }) => { }; const onFetchInternalEndpointPolyfill = async (url: string, params: any) => { - const res = await axios(url, params); - return res.data; + return await axios(url, params); }; diff --git a/blocks/file-blocks/explain/explanation.tsx b/blocks/file-blocks/explain/explanation.tsx index 7969991..3513dd3 100644 --- a/blocks/file-blocks/explain/explanation.tsx +++ b/blocks/file-blocks/explain/explanation.tsx @@ -66,6 +66,5 @@ export function ExplanationComponent(props: { } const onFetchInternalEndpointPolyfill = async (url: string, params: any) => { - const res = await axios(url, params); - return res.data; + return await axios(url, params); }; diff --git a/blocks/file-blocks/summarize/index.tsx b/blocks/file-blocks/summarize/index.tsx index d6660cd..1c1d96a 100644 --- a/blocks/file-blocks/summarize/index.tsx +++ b/blocks/file-blocks/summarize/index.tsx @@ -290,6 +290,5 @@ const breakCodeIntoSections = async ( }; const onFetchInternalEndpointPolyfill = async (url: string, params: any) => { - const res = await axios(url, params); - return res.data; + return await axios(url, params); };