Quote Fetch: Provider changed

Author: thinkdj

docs/readme.md

@@ -1,6 +1,6 @@
 # CDC Figma Plugin React Starter Kit
 
- A starter kit for building Figma plugins with React & TypeScript. Includes boilerplate code and essential config for quick Figma plugin development. 
+ A starter kit for building Figma plugins with React & TypeScript. Includes boilerplate code and essential config for quick Figma plugin development.
 
 
  ### Getting Started
@@ -59,7 +59,7 @@ Remember to add any new domains you want to make requests to in the `manifest.js
 import axiosClient from '../utils/axiosClient';
 ..
 ....
-    const response = await axiosClient.get('https://dummyjson.com/quotes/random');
+    const response = await axiosClient.get('https://zenquotes.io/api/random');
     const data = response.data;
 `````
 

manifest.json

@@ -13,7 +13,8 @@
   ],
   "networkAccess": {
     "allowedDomains": [
-      "https://dummyjson.com",
+      "https://api.allorigins.win",
+      "https://zenquotes.io",
       "https://www.figma.com"
     ]
   }

ui/app/Demo/AsyncFetchQuoteHttp.tsx

@@ -1,5 +1,4 @@
-'use client';
-import React, { useState } from 'react';
+import { useState } from 'react';
 import axiosClient from '../utils/axiosClient';
 
 export default function AsyncFetchQuoteHttp({ sendToFigma }: { sendToFigma: (message: any) => void }) {
@@ -10,9 +9,13 @@ export default function AsyncFetchQuoteHttp({ sendToFigma }: { sendToFigma: (mes
     const fetchQuote = async () => {
         setIsLoading(true);
         try {
-            const response = await axiosClient.get('https://dummyjson.com/quotes/random');
-            const data = response.data;
-            const randomQuote = data.quote + ' - ' + data.author;
+            const response = await axiosClient.get('https://api.allorigins.win/get?url=' + encodeURIComponent('https://zenquotes.io/api/random'));
+            // PS:redirection URL was suggested for CORS issues by Claude 4
+            // ZenQuotes decode:
+            const data = response.data?.contents??{};
+            const dataJson = JSON.parse(data)[0] ?? {};
+            console.log('Fetched data:', dataJson);
+            const randomQuote = dataJson.q + ' - ' + dataJson.a;
             setQuote(randomQuote);
             sendToFigma({ type: 'demo-insert-quote', quote: randomQuote });
         } catch (error) {
@@ -25,11 +28,11 @@ export default function AsyncFetchQuoteHttp({ sendToFigma }: { sendToFigma: (mes
     return (
         <div>
             <h3 className="text-md font-bold">Fetch quote via HTTP</h3>
-            <p className="text-xs text-gray-500 pt-0 pb-2">Retrieves a random quote asynchronously from <a className='text-blue-400' rel="external nofollow noopener" href="https://dummyjson.com/quotes/" target="_blank">dummyjson.com</a> and inserts it into Figma</p>
+            <p className="text-xs text-gray-500 pt-0 pb-2">Retrieves a random quote asynchronously from <a className='text-blue-400' rel="external nofollow noopener" href="https://zenquotes.io/" target="_blank">zenquotes.io</a> and inserts it into Figma</p>
             <button onClick={fetchQuote} type="button" disabled={isLoading} className={`text-sm text-white py-1 px-3 rounded-sm ${isLoading ? 'bg-gray-500' : 'bg-blue-500 hover:bg-blue-700'}`}>
                 {isLoading ? 'Fetching...' : 'Fetch and insert'}
             </button>
-            { quote &&
+            {quote &&
                 <blockquote className="text-gray-500 mt-3 text-xs border-l-4 border-blue-500 pl-4 py-2 rounded-lg">{quote}</blockquote>
             }
         </div>