fixed svg styling based on requirements, fetching data only once and …

…run prettier
anayatkhan1 · Nov 18, 2023 · 329f161 · 329f161
1 parent cc05e5f
commit 329f161
Show file tree

Hide file tree

Showing 2 changed files with 22 additions and 29 deletions.
diff --git a/gatsby/components/BugsTest.jsx b/gatsby/components/BugsTest.jsx
@@ -3,21 +3,18 @@ import CodeSvg from "./CodeSvg"
 
 export default function BugsTest(props) {
  const [names, setNames] = useState([])
- const [dataFetched, setDataFetched] = useState(false);
 
  useEffect(() => {
  const fetchData = async () => {
- if (!dataFetched) {
- const data = await fetch("/data.json").then((response) => response.json());
- if (data?.length) {
- setNames(data);
- setDataFetched(true);
- }
+ const data = await fetch("/data.json").then(response => response.json())
+
+ if (data?.length) {
+ setNames(data)
  }
- };
+ }
 
- fetchData();
- }, [dataFetched]);
+ fetchData()
+ }, [])
 
  return (
  <>
@@ -58,23 +55,19 @@ export default function BugsTest(props) {
  </thead>
 
  <tbody>
- {names?.forEach((n, i) => {
- return (
- <tr
- key={n?.first}
- >
- <td>{n?.first}</td>
- <td>{n?.last}</td>
- </tr>
- )
- })}
+ {names.map(name => (
+ <tr key={`${name.first}-${name.last}`}>
+ <td>{name.first}</td>
+ <td>{name.last}</td>
+ </tr>
+ ))}
  </tbody>
  </table>
  <br />
  <br />
  <hr />
  <h2>Test SVG</h2>
- <div>
+ <div style={{ fill: "#038cfc" }}>
  <CodeSvg />
  </div>
  </>

diff --git a/gatsby/components/CodeSvg.jsx b/gatsby/components/CodeSvg.jsx
@@ -1,12 +1,12 @@
 import React from "react"
 
-const CodeSvg = () => {
-
- return (
- <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 640 512">
- <path fill="#038cfc" d="M392.8 1.2c-17-4.9-34.7 5-39.6 22l-128 448c-4.9 17 5 34.7 22 39.6s34.7-5 39.6-22l128-448c4.9-17-5-34.7-22-39.6zm80.6 120.1c-12.5 12.5-12.5 32.8 0 45.3L562.7 256l-89.4 89.4c-12.5 12.5-12.5 32.8 0 45.3s32.8 12.5 45.3 0l112-112c12.5-12.5 12.5-32.8 0-45.3l-112-112c-12.5-12.5-32.8-12.5-45.3 0zm-306.7 0c-12.5-12.5-32.8-12.5-45.3 0l-112 112c-12.5 12.5-12.5 32.8 0 45.3l112 112c12.5 12.5 32.8 12.5 45.3 0s12.5-32.8 0-45.3L77.3 256l89.4-89.4c12.5-12.5 12.5-32.8 0-45.3z"/>
- </svg>
- )
-}
+const CodeSvg = () => (
+ <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 640 512">
+  <path
+  fill="current"
+ d="M392.8 1.2c-17-4.9-34.7 5-39.6 22l-128 448c-4.9 17 5 34.7 22 39.6s34.7-5 39.6-22l128-448c4.9-17-5-34.7-22-39.6zm80.6 120.1c-12.5 12.5-12.5 32.8 0 45.3L562.7 256l-89.4 89.4c-12.5 12.5-12.5 32.8 0 45.3s32.8 12.5 45.3 0l112-112c12.5-12.5 12.5-32.8 0-45.3l-112-112c-12.5-12.5-32.8-12.5-45.3 0zm-306.7 0c-12.5-12.5-32.8-12.5-45.3 0l-112 112c-12.5 12.5-12.5 32.8 0 45.3l112 112c12.5 12.5 32.8 12.5 45.3 0s12.5-32.8 0-45.3L77.3 256l89.4-89.4c12.5-12.5 12.5-32.8 0-45.3z"
+ />
+ </svg>
+)
 
 export default CodeSvg