From 4441f0511e0a73ee040266d639a306132ed34a95 Mon Sep 17 00:00:00 2001 From: jeehay Date: Sat, 1 Jun 2024 05:36:41 +0900 Subject: [PATCH 1/2] feat: add query --- index.html | 2 +- package.json | 1 + src/App.tsx | 7 +++- src/api/factCheck.ts | 37 ++++++++++++++++++++ src/main.tsx | 17 ++++++++-- src/pages/Result.tsx | 35 +++++++++++++++++++ yarn.lock | 80 ++++++++++++++++++++++++++++++++++++++++++-- 7 files changed, 173 insertions(+), 6 deletions(-) create mode 100644 src/api/factCheck.ts create mode 100644 src/pages/Result.tsx diff --git a/index.html b/index.html index 23b0d5a..83f75a2 100644 --- a/index.html +++ b/index.html @@ -6,7 +6,7 @@ - Vite + React + TS + Fact-Checker
diff --git a/package.json b/package.json index ab4b43c..d10991e 100644 --- a/package.json +++ b/package.json @@ -54,6 +54,7 @@ "react": "^18.2.0", "react-day-picker": "8.10.1", "react-dom": "^18.2.0", + "react-query": "^3.39.3", "react-hook-form": "7.51.5", "react-resizable-panels": "2.0.19", "sonner": "1.4.41", diff --git a/src/App.tsx b/src/App.tsx index 0169207..817b6b4 100644 --- a/src/App.tsx +++ b/src/App.tsx @@ -1,11 +1,16 @@ import { Home } from "@/pages/Home"; import "./App.css"; +import Result from "./pages/Result"; +import { Suspense } from "react"; function App() { return ( <>
- + ...loading
}> + + + ); diff --git a/src/api/factCheck.ts b/src/api/factCheck.ts new file mode 100644 index 0000000..f55236d --- /dev/null +++ b/src/api/factCheck.ts @@ -0,0 +1,37 @@ +import { useQuery } from "react-query"; + +// export const useFactCheck = () => { +// const url = 'https://jsonplaceholder.typicode.com/todos/1'; +// return useQuery("factCheck", () => +// fetch(url).then((res) => { +// if (!res.ok) { +// throw new Error("Network response was not ok"); +// } +// return res.json(); +// }) +// ); +// }; + + +export const useFactCheck = (userInput: string) => { + const url = 'http://172.190.90.75:5000/get-result'; + const data = { url: userInput }; + + + const options = { + method: 'POST', + headers: { + 'Content-Type': 'application/json', + }, + body: JSON.stringify(data), + }; + + // Invoke useQuery inside a React component function + return useQuery("factCheck", async () => { + const response = await fetch(url, options); + if (!response.ok) { + throw new Error("Network response was not ok"); + } + return response.json(); + }); +}; \ No newline at end of file diff --git a/src/main.tsx b/src/main.tsx index f25366e..c08d531 100644 --- a/src/main.tsx +++ b/src/main.tsx @@ -1,10 +1,23 @@ -import React from "react"; +import React, { Suspense } from "react"; import ReactDOM from "react-dom/client"; import App from "./App.tsx"; import "./index.css"; +import { QueryClient, QueryClientProvider } from 'react-query'; + +// const queryClient = new QueryClient(); +const queryClient = new QueryClient({ + defaultOptions: { + queries: { + suspense: true, + }, + }, +}); ReactDOM.createRoot(document.getElementById("root")!).render( - + + + , ); + diff --git a/src/pages/Result.tsx b/src/pages/Result.tsx new file mode 100644 index 0000000..075a73d --- /dev/null +++ b/src/pages/Result.tsx @@ -0,0 +1,35 @@ +import { useFactCheck } from "@/api/factCheck"; +import React, { useState } from "react"; +import { useQuery } from "react-query"; + +interface FactCheckData { + userId: number; + id: number; + title: string; + } + +const Result = () => { + const url= 'https://www.youtube.com/watch?v=hKkjoyO_CzA' +const { data, isLoading, error } = useFactCheck(url); + +// if (isLoading) { +// console.log("fetching data..."); +// } + +// if (error) { +// console.log(error); +// } + +return ( + <> +
    +
  • userId : {data?.userId}
    • +
  • id : {data.id}
    • +
  • title : {data.title}
    • +
+ + ); + +}; + +export default Result; \ No newline at end of file diff --git a/yarn.lock b/yarn.lock index c702cb7..d1a5218 100644 --- a/yarn.lock +++ b/yarn.lock @@ -30,7 +30,7 @@ js-tokens "^4.0.0" picocolors "^1.0.0" -"@babel/runtime@^7.13.10", "@babel/runtime@^7.24.1": +"@babel/runtime@^7.13.10", "@babel/runtime@^7.23.8", "@babel/runtime@^7.24.1", "@babel/runtime@^7.5.5", "@babel/runtime@^7.6.2", "@babel/runtime@^7.7.2": version "7.24.6" resolved "https://registry.yarnpkg.com/@babel/runtime/-/runtime-7.24.6.tgz#5b76eb89ad45e2e4a0a8db54c456251469a3358e" integrity sha512-Ja18XcETdEl5mzzACGd+DKgaGJzPTCow7EglgwTmHdwokzDFYh/MHua6lU6DV/hjF2IaOJ4oX2nqnjG7RElKOw== @@ -1525,6 +1525,11 @@ balanced-match@^1.0.0: resolved "https://registry.npmjs.org/balanced-match/-/balanced-match-1.0.2.tgz" integrity sha512-3oSeUO0TMV67hN1AmbXsK4yaqU7tjiHlbxRDZOpH0KW9+CeX4bRAaX0Anxt0tx2MrpRpWwQaPwIlISEJhYU5Pw== +big-integer@^1.6.16: + version "1.6.52" + resolved "https://registry.yarnpkg.com/big-integer/-/big-integer-1.6.52.tgz#60a887f3047614a8e1bffe5d7173490a97dc8c85" + integrity sha512-QxD8cf2eVqJOOz63z6JIN9BzvVs/dlySa5HGSBH5xtR8dPteIRQnBxxKqkNTiT6jbDTF6jAfrd4oMcND9RGbQg== + binary-extensions@^2.0.0: version "2.3.0" resolved "https://registry.yarnpkg.com/binary-extensions/-/binary-extensions-2.3.0.tgz#f6e14a97858d327252200242d4ccfe522c445522" @@ -1552,6 +1557,20 @@ braces@^3.0.3, braces@~3.0.2: dependencies: fill-range "^7.1.1" +broadcast-channel@^3.4.1: + version "3.7.0" + resolved "https://registry.yarnpkg.com/broadcast-channel/-/broadcast-channel-3.7.0.tgz#2dfa5c7b4289547ac3f6705f9c00af8723889937" + integrity sha512-cIAKJXAxGJceNZGTZSBzMxzyOn72cVgPnKx4dc6LRjQgbaJUQqhy5rzL3zbMxkMWsGKkv2hSFkPRMEXfoMZ2Mg== + dependencies: + "@babel/runtime" "^7.7.2" + detect-node "^2.1.0" + js-sha3 "0.8.0" + microseconds "0.2.0" + nano-time "1.0.0" + oblivious-set "1.0.0" + rimraf "3.0.2" + unload "2.2.0" + browserslist@^4.23.0: version "4.23.0" resolved "https://registry.yarnpkg.com/browserslist/-/browserslist-4.23.0.tgz#8f3acc2bbe73af7213399430890f86c63a5674ab" @@ -1772,6 +1791,11 @@ deep-is@^0.1.3: resolved "https://registry.npmjs.org/deep-is/-/deep-is-0.1.4.tgz" integrity sha512-oIPzksmTg4/MriiaYGO+okXDT7ztn/w3Eptv/+gSIdMdKsJo0u4CfYNFJPy+4SKMuCqGw2wxnA+URMg3t8a/bQ== +detect-node@^2.0.4, detect-node@^2.1.0: + version "2.1.0" + resolved "https://registry.yarnpkg.com/detect-node/-/detect-node-2.1.0.tgz#c9c70775a49c3d03bc2c06d9a73be550f978f8b1" + integrity sha512-T0NIuQpnTvFDATNuHN5roPwSBG83rFsuO+MXXH9/3N1eFbn4wcPjttvjMLEPWJ0RGUYgQE7cGgS3tNxbqCGM7g== + detect-node-es@^1.1.0: version "1.1.0" resolved "https://registry.yarnpkg.com/detect-node-es/-/detect-node-es-1.1.0.tgz#163acdf643330caa0b4cd7c21e7ee7755d6fa493" @@ -2377,6 +2401,11 @@ jiti@^1.19.1, jiti@^1.21.0: resolved "https://registry.npmjs.org/jiti/-/jiti-1.21.0.tgz" integrity sha512-gFqAIbuKyyso/3G2qhiO2OM6shY6EPP/R0+mkDbyspxKazh8BXDC5FiFsUjlczgdNz/vfra0da2y+aHrusLG/Q== +js-sha3@0.8.0: + version "0.8.0" + resolved "https://registry.yarnpkg.com/js-sha3/-/js-sha3-0.8.0.tgz#b9b7a5da73afad7dedd0f8c463954cbde6818840" + integrity sha512-gF1cRrHhIzNfToc802P800N8PpXS+evLLXfsVpowqmAFR9uwbi89WvXg2QspOmXL8QL86J4T1EpFu+yUkwJY3Q== + "js-tokens@^3.0.0 || ^4.0.0", js-tokens@^4.0.0: version "4.0.0" resolved "https://registry.npmjs.org/js-tokens/-/js-tokens-4.0.0.tgz" @@ -2525,6 +2554,14 @@ lucide-react@0.381.0: resolved "https://registry.yarnpkg.com/lucide-react/-/lucide-react-0.381.0.tgz#59a22e4da987f17cf53786a41edd939cd91c2205" integrity sha512-cft0ywFfHkGprX5pwKyS9jme/ksh9eYAHSZqFRKN0XGp70kia4uqZOTPB+i+O51cqiJlvGLqzMGWnMHaeJTs3g== +match-sorter@^6.0.2: + version "6.3.4" + resolved "https://registry.yarnpkg.com/match-sorter/-/match-sorter-6.3.4.tgz#afa779d8e922c81971fbcb4781c7003ace781be7" + integrity sha512-jfZW7cWS5y/1xswZo8VBOdudUiSd9nifYRWphc9M5D/ee4w4AoXLgBEdRbgVaxbMuagBPeUC5y2Hi8DO6o9aDg== + dependencies: + "@babel/runtime" "^7.23.8" + remove-accents "0.5.0" + meow@^12.0.1: version "12.1.1" resolved "https://registry.npmjs.org/meow/-/meow-12.1.1.tgz" @@ -2548,6 +2585,11 @@ micromatch@^4.0.4, micromatch@^4.0.5: braces "^3.0.3" picomatch "^2.3.1" +microseconds@0.2.0: + version "0.2.0" + resolved "https://registry.yarnpkg.com/microseconds/-/microseconds-0.2.0.tgz#233b25f50c62a65d861f978a4a4f8ec18797dc39" + integrity sha512-n7DHHMjR1avBbSpsTBj6fmMGh2AGrifVV4e+WYc3Q9lO+xnSZ3NyhcBND3vzzatt05LFhoKFRxrIyklmLlUtyA== + mimic-fn@^4.0.0: version "4.0.0" resolved "https://registry.npmjs.org/mimic-fn/-/mimic-fn-4.0.0.tgz" @@ -2591,6 +2633,13 @@ mz@^2.7.0: object-assign "^4.0.1" thenify-all "^1.0.0" +nano-time@1.0.0: + version "1.0.0" + resolved "https://registry.yarnpkg.com/nano-time/-/nano-time-1.0.0.tgz#b0554f69ad89e22d0907f7a12b0993a5d96137ef" + integrity sha512-flnngywOoQ0lLQOTRNexn2gGSNuM9bKj9RZAWSzhQ+UJYaAFG9bac4DW9VHjUAzrOaIcajHybCTHe/bkvozQqA== + dependencies: + big-integer "^1.6.16" + nanoid@^3.3.7: version "3.3.7" resolved "https://registry.npmjs.org/nanoid/-/nanoid-3.3.7.tgz" @@ -2638,6 +2687,11 @@ object-hash@^3.0.0: resolved "https://registry.yarnpkg.com/object-hash/-/object-hash-3.0.0.tgz#73f97f753e7baffc0e2cc9d6e079079744ac82e9" integrity sha512-RSn9F68PjH9HqtltsSnqYC1XXoWe9Bju5+213R98cNGttag9q9yAOTzdbsqvIa7aNm5WffBZFpWYr2aWrklWAw== +oblivious-set@1.0.0: + version "1.0.0" + resolved "https://registry.yarnpkg.com/oblivious-set/-/oblivious-set-1.0.0.tgz#c8316f2c2fb6ff7b11b6158db3234c49f733c566" + integrity sha512-z+pI07qxo4c2CulUHCDf9lcqDlMSo72N/4rLUpRXf6fu+q8vjt8y0xS+Tlf8NTJDdTXHbdeO1n3MlbctwEoXZw== + once@^1.3.0: version "1.4.0" resolved "https://registry.npmjs.org/once/-/once-1.4.0.tgz" @@ -2858,6 +2912,15 @@ react-dom@^18.2.0: loose-envify "^1.1.0" scheduler "^0.23.2" +react-query@^3.39.3: + version "3.39.3" + resolved "https://registry.yarnpkg.com/react-query/-/react-query-3.39.3.tgz#4cea7127c6c26bdea2de5fb63e51044330b03f35" + integrity sha512-nLfLz7GiohKTJDuT4us4X3h/8unOh+00MLb2yJoGTPjxKs2bc1iDhkNx2bd5MKklXnOD3NrVZ+J2UXujA5In4g== + dependencies: + "@babel/runtime" "^7.5.5" + broadcast-channel "^3.4.1" + match-sorter "^6.0.2" + react-hook-form@7.51.5: version "7.51.5" resolved "https://registry.yarnpkg.com/react-hook-form/-/react-hook-form-7.51.5.tgz#4afbfb819312db9fea23e8237a3a0d097e128b43" @@ -2922,6 +2985,11 @@ regenerator-runtime@^0.14.0: resolved "https://registry.yarnpkg.com/regenerator-runtime/-/regenerator-runtime-0.14.1.tgz#356ade10263f685dda125100cd862c1db895327f" integrity sha512-dYnhHh0nJoMfnkZs6GmmhFknAGRrLznOu5nc9ML+EJxGvrx6H7teuevqVqCuPcPK//3eDrrjQhehXVx9cnkGdw== +remove-accents@0.5.0: + version "0.5.0" + resolved "https://registry.yarnpkg.com/remove-accents/-/remove-accents-0.5.0.tgz#77991f37ba212afba162e375b627631315bed687" + integrity sha512-8g3/Otx1eJaVD12e31UbJj1YzdtVvzH85HV7t+9MJYk/u3XmkOUJ5Ys9wQrf9PCPK8+xn4ymzqYCiZl6QWKn+A== + require-directory@^2.1.1: version "2.1.1" resolved "https://registry.npmjs.org/require-directory/-/require-directory-2.1.1.tgz" @@ -2956,7 +3024,7 @@ reusify@^1.0.4: resolved "https://registry.npmjs.org/reusify/-/reusify-1.0.4.tgz" integrity sha512-U9nH88a3fc/ekCF1l0/UP1IosiuIjyTh7hBvXVMHYgVcfGvt897Xguj2UOLDeI5BG2m7/uwyaLVT6fbtCwTyzw== -rimraf@^3.0.2: +rimraf@3.0.2, rimraf@^3.0.2: version "3.0.2" resolved "https://registry.npmjs.org/rimraf/-/rimraf-3.0.2.tgz" integrity sha512-JZkJMZkAGFFPP2YqXZXPbMlMBgsxzE8ILs4lMIX/2o0L9UBw9O/Y3o6wFw/i9YLapcUJWwqbi3kdxIPdC62TIA== @@ -3252,6 +3320,14 @@ unicorn-magic@^0.1.0: resolved "https://registry.npmjs.org/unicorn-magic/-/unicorn-magic-0.1.0.tgz" integrity sha512-lRfVq8fE8gz6QMBuDM6a+LO3IAzTi05H6gCVaUpir2E1Rwpo4ZUog45KpNXKC/Mn3Yb9UDuHumeFTo9iV/D9FQ== +unload@2.2.0: + version "2.2.0" + resolved "https://registry.yarnpkg.com/unload/-/unload-2.2.0.tgz#ccc88fdcad345faa06a92039ec0f80b488880ef7" + integrity sha512-B60uB5TNBLtN6/LsgAf3udH9saB5p7gqJwcFfbOEZ8BcBHnGwCf6G/TGiEqkRAxX7zAFIUtzdrXQSdL3Q/wqNA== + dependencies: + "@babel/runtime" "^7.6.2" + detect-node "^2.0.4" + update-browserslist-db@^1.0.13: version "1.0.16" resolved "https://registry.yarnpkg.com/update-browserslist-db/-/update-browserslist-db-1.0.16.tgz#f6d489ed90fb2f07d67784eb3f53d7891f736356" From 93b98c5f59bb2104426a777822f637fcdb57b48f Mon Sep 17 00:00:00 2001 From: jeehay Date: Sat, 1 Jun 2024 05:39:53 +0900 Subject: [PATCH 2/2] feat: add query --- src/api/factCheck.ts | 40 +++++++++++++++++++--------------------- src/main.tsx | 3 +-- src/pages/Result.tsx | 31 +++++++++++++++---------------- tailwind.config.js | 4 ++++ 4 files changed, 39 insertions(+), 39 deletions(-) diff --git a/src/api/factCheck.ts b/src/api/factCheck.ts index f55236d..5288e3c 100644 --- a/src/api/factCheck.ts +++ b/src/api/factCheck.ts @@ -12,26 +12,24 @@ import { useQuery } from "react-query"; // ); // }; - export const useFactCheck = (userInput: string) => { - const url = 'http://172.190.90.75:5000/get-result'; - const data = { url: userInput }; - - - const options = { - method: 'POST', - headers: { - 'Content-Type': 'application/json', - }, - body: JSON.stringify(data), - }; + const url = "http://172.190.90.75:5000/get-result"; + const data = { url: userInput }; + + const options = { + method: "POST", + headers: { + "Content-Type": "application/json", + }, + body: JSON.stringify(data), + }; - // Invoke useQuery inside a React component function - return useQuery("factCheck", async () => { - const response = await fetch(url, options); - if (!response.ok) { - throw new Error("Network response was not ok"); - } - return response.json(); - }); -}; \ No newline at end of file + // Invoke useQuery inside a React component function + return useQuery("factCheck", async () => { + const response = await fetch(url, options); + if (!response.ok) { + throw new Error("Network response was not ok"); + } + return response.json(); + }); +}; diff --git a/src/main.tsx b/src/main.tsx index c08d531..2165662 100644 --- a/src/main.tsx +++ b/src/main.tsx @@ -2,7 +2,7 @@ import React, { Suspense } from "react"; import ReactDOM from "react-dom/client"; import App from "./App.tsx"; import "./index.css"; -import { QueryClient, QueryClientProvider } from 'react-query'; +import { QueryClient, QueryClientProvider } from "react-query"; // const queryClient = new QueryClient(); const queryClient = new QueryClient({ @@ -20,4 +20,3 @@ ReactDOM.createRoot(document.getElementById("root")!).render( , ); - diff --git a/src/pages/Result.tsx b/src/pages/Result.tsx index 075a73d..3b8b5f7 100644 --- a/src/pages/Result.tsx +++ b/src/pages/Result.tsx @@ -3,33 +3,32 @@ import React, { useState } from "react"; import { useQuery } from "react-query"; interface FactCheckData { - userId: number; - id: number; - title: string; - } + userId: number; + id: number; + title: string; +} const Result = () => { - const url= 'https://www.youtube.com/watch?v=hKkjoyO_CzA' -const { data, isLoading, error } = useFactCheck(url); + const url = "https://www.youtube.com/watch?v=hKkjoyO_CzA"; + const { data, isLoading, error } = useFactCheck(url); -// if (isLoading) { -// console.log("fetching data..."); -// } + // if (isLoading) { + // console.log("fetching data..."); + // } -// if (error) { -// console.log(error); -// } + // if (error) { + // console.log(error); + // } -return ( + return ( <> -
    +
    • userId : {data?.userId}
    • id : {data.id}
    • title : {data.title}
    ); - }; -export default Result; \ No newline at end of file +export default Result; diff --git a/tailwind.config.js b/tailwind.config.js index 5f963cb..a61e857 100644 --- a/tailwind.config.js +++ b/tailwind.config.js @@ -43,5 +43,9 @@ export default { }, extend: {}, }, +<<<<<<< HEAD plugins: [], +======= + plugins: [require("tailwindcss-animate")], +>>>>>>> 2183f50 (feat: add query) };