update code snippet

Author: zhiyuanliang-ms

articles/azure-app-configuration/howto-variant-feature-flags-javascript.md

@@ -277,123 +277,98 @@ In this tutorial, you use a variant feature flag to manage experiences for diffe
     import { FaHeart, FaRegHeart } from "react-icons/fa";
 
     function Home() {
-    const location = useLocation();
-    const params = new URLSearchParams(location.search);
-    const currentUser = params.get("userId");
-    const [liked, setLiked] = useState(false);
-    const [message, setMessage] = useState(undefined);
-
-    useEffect(() => {
-        const init = async () => {
-        const response = await fetch(
-            `/api/getGreetingMessage?userId=${currentUser ?? ""}`,
-            {
-            method: "GET",
+        const location = useLocation();
+        const params = new URLSearchParams(location.search);
+        const currentUser = params.get("userId");
+        const [liked, setLiked] = useState(false);
+        const [message, setMessage] = useState(undefined);
+
+        useEffect(() => {
+            const init = async () => {
+                const response = await fetch(`/api/getGreetingMessage?userId=${currentUser ?? ""}`, { 
+                    method: "GET"
+                });
+                if (response.ok) {
+                    const result = await response.json();
+                    setMessage(result.message ?? "Quote of the Day"); // default message is "Quote of the Day"
+                } 
+                else {
+                    console.error("Failed to get greeting message.");
+                }
+                setLiked(false);
+            };
+            init();
+        }, []);
+
+        const handleClick = async () => {
+            if (!liked) {
+                const response = await fetch("/api/like", { 
+                    method: "POST", 
+                    headers: { "Content-Type": "application/json" },
+                    body: JSON.stringify({ UserId: currentUser ?? "" }),
+                });
+
+                if (response.ok) {
+                console.log("Like the quote successfully.");
+                } else {
+                console.error("Failed to like the quote.");
+                }
             }
-        );
-        if (response.ok) {
-            const result = await response.json();
-            setMessage(result.message ?? "Quote of the Day"); // default message is "Quote of the Day"
-        } else {
-            console.error("Failed to get greeting message.");
-        }
-        setLiked(false);
+            setLiked(!liked);
         };
 
-        init();
-    }, []);
-
-    const handleClick = async () => {
-        if (!liked) {
-        try {
-            const response = await fetch("/api/like", {
-            method: "POST",
-            headers: {
-                "Content-Type": "application/json",
-            },
-            body: JSON.stringify({ UserId: currentUser ?? "" }),
-            });
-
-            if (response.ok) {
-            console.log("Like the quote successfully.");
-            } else {
-            console.error("Failed to like the quote.");
-            }
-        } catch (error) {
-            console.error("Error:", error);
-        }
-        }
-        setLiked(!liked);
-    };
-
-    return (
-        <div className="quote-card">
-        { message != undefined ?
-            ( 
-            <>
-            <h2>
-                <>{message}</>
-            </h2>
-            <blockquote>
-                <p>"You cannot change what you are, only what you do."</p>
-                <footer>— Philip Pullman</footer>
-            </blockquote>
-            <div className="vote-container">
-                <button className="heart-button" onClick={handleClick}>
-                {liked ? <FaHeart /> : <FaRegHeart />}
-                </button>
+        return (
+            <div className="quote-page">
+                <header className="navbar">
+                    <div className="navbar-left">
+                        <div className="logo">QuoteOfTheDay</div>
+                    </div>
+                </header>
+
+                <main className="quote-container">
+                    <div className="quote-card">
+                    { message != undefined ?
+                        ( 
+                        <>
+                        <h2>
+                            <>{message}</>
+                        </h2>
+                        <blockquote>
+                            <p>"You cannot change what you are, only what you do."</p>
+                            <footer>— Philip Pullman</footer>
+                        </blockquote>
+                        <div className="vote-container">
+                            <button className="heart-button" onClick={handleClick}>
+                            {liked ? <FaHeart /> : <FaRegHeart />}
+                            </button>
+                        </div>
+                        </> 
+                        ) 
+                        : <p>Loading</p>       
+                    }
+                    </div>
+                </main>
             </div>
-            </> 
-            ) 
-            : <p>Loading</p>       
-        }
-        </div>
-    );
+        );
     }
 
-    export default Home
-    ```
-
-1. Create a new file named *Layout.jsx*.
-
-    ```jsx
-    const Layout = ({ children }) => {
-    return (
-        <div className="quote-page">
-        <header className="navbar">
-            <div className="navbar-left">
-            <div className="logo">QuoteOfTheDay</div>
-            </div>
-        </header>
-
-        <main className="quote-container">
-            {children}
-        </main>
-
-        </div>
-    );
-    };
-
-    export default Layout;
+    export default Home;
     ```
 
 1. Update the *App.jsx* file.
 
     ```jsx
     import { BrowserRouter as Router, Route, Routes } from "react-router-dom";
-    import Layout from "./Layout";
     import Home from "./Home";
 
     function App() {
-    return (
-        <Router>
-        <Layout>
-        <Routes>
-            <Route path="/" element={<Home />} />
-        </Routes>
-        </Layout>
-        </Router>
-    );
+        return (
+            <Router>
+                <Routes>
+                    <Route path="/" element={<Home />} />
+                </Routes>
+            </Router>
+        );
     }
 
     export default App;