diff --git a/package-lock.json b/package-lock.json
index 5fba87d3..a49feb5e 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -45,13 +45,15 @@
}
},
"node_modules/@babel/code-frame": {
- "version": "7.22.13",
- "resolved": "https://registry.npmjs.org/@babel/code-frame/-/code-frame-7.22.13.tgz",
- "integrity": "sha512-XktuhWlJ5g+3TJXc5upd9Ks1HutSArik6jf2eAjYFyIOf4ej3RN+184cZbzDvbPnuTJIUhPKKJE3cIsYTiAT3w==",
+ "version": "7.27.1",
+ "resolved": "https://registry.npmjs.org/@babel/code-frame/-/code-frame-7.27.1.tgz",
+ "integrity": "sha512-cjQ7ZlQ0Mv3b47hABuTevyTuYN4i+loJKGeV9flcCgIK37cCXRh+L1bd3iBHlynerhQ7BhCkn2BPbQUL+rGqFg==",
"dev": true,
+ "license": "MIT",
"dependencies": {
- "@babel/highlight": "^7.22.13",
- "chalk": "^2.4.2"
+ "@babel/helper-validator-identifier": "^7.27.1",
+ "js-tokens": "^4.0.0",
+ "picocolors": "^1.1.1"
},
"engines": {
"node": ">=6.9.0"
@@ -226,19 +228,21 @@
}
},
"node_modules/@babel/helper-string-parser": {
- "version": "7.22.5",
- "resolved": "https://registry.npmjs.org/@babel/helper-string-parser/-/helper-string-parser-7.22.5.tgz",
- "integrity": "sha512-mM4COjgZox8U+JcXQwPijIZLElkgEpO5rsERVDJTc2qfCDfERyob6k5WegS14SX18IIjv+XD+GrqNumY5JRCDw==",
+ "version": "7.27.1",
+ "resolved": "https://registry.npmjs.org/@babel/helper-string-parser/-/helper-string-parser-7.27.1.tgz",
+ "integrity": "sha512-qMlSxKbpRlAridDExk92nSobyDdpPijUq2DW6oDnUqd0iOGxmQjyqhMIihI9+zv4LPyZdRje2cavWPbCbWm3eA==",
"dev": true,
+ "license": "MIT",
"engines": {
"node": ">=6.9.0"
}
},
"node_modules/@babel/helper-validator-identifier": {
- "version": "7.22.20",
- "resolved": "https://registry.npmjs.org/@babel/helper-validator-identifier/-/helper-validator-identifier-7.22.20.tgz",
- "integrity": "sha512-Y4OZ+ytlatR8AI+8KZfKuL5urKp7qey08ha31L8b3BwewJAoJamTzyvxPR/5D+KkdJCGPq/+8TukHBlY10FX9A==",
+ "version": "7.27.1",
+ "resolved": "https://registry.npmjs.org/@babel/helper-validator-identifier/-/helper-validator-identifier-7.27.1.tgz",
+ "integrity": "sha512-D2hP9eA+Sqx1kBZgzxZh0y1trbuU+JoDkiEwqhQ36nodYqJwyEIhPSdMNd7lOm/4io72luTPWH20Yda0xOuUow==",
"dev": true,
+ "license": "MIT",
"engines": {
"node": ">=6.9.0"
}
@@ -253,38 +257,28 @@
}
},
"node_modules/@babel/helpers": {
- "version": "7.23.2",
- "resolved": "https://registry.npmjs.org/@babel/helpers/-/helpers-7.23.2.tgz",
- "integrity": "sha512-lzchcp8SjTSVe/fPmLwtWVBFC7+Tbn8LGHDVfDp9JGxpAY5opSaEFgt8UQvrnECWOTdji2mOWMz1rOhkHscmGQ==",
+ "version": "7.28.4",
+ "resolved": "https://registry.npmjs.org/@babel/helpers/-/helpers-7.28.4.tgz",
+ "integrity": "sha512-HFN59MmQXGHVyYadKLVumYsA9dBFun/ldYxipEjzA4196jpLZd8UjEEBLkbEkvfYreDqJhZxYAWFPtrfhNpj4w==",
"dev": true,
+ "license": "MIT",
"dependencies": {
- "@babel/template": "^7.22.15",
- "@babel/traverse": "^7.23.2",
- "@babel/types": "^7.23.0"
+ "@babel/template": "^7.27.2",
+ "@babel/types": "^7.28.4"
},
"engines": {
"node": ">=6.9.0"
}
},
- "node_modules/@babel/highlight": {
- "version": "7.22.20",
- "resolved": "https://registry.npmjs.org/@babel/highlight/-/highlight-7.22.20.tgz",
- "integrity": "sha512-dkdMCN3py0+ksCgYmGG8jKeGA/8Tk+gJwSYYlFGxG5lmhfKNoAy004YpLxpS1W2J8m/EK2Ew+yOs9pVRwO89mg==",
+ "node_modules/@babel/parser": {
+ "version": "7.28.4",
+ "resolved": "https://registry.npmjs.org/@babel/parser/-/parser-7.28.4.tgz",
+ "integrity": "sha512-yZbBqeM6TkpP9du/I2pUZnJsRMGGvOuIrhjzC1AwHwW+6he4mni6Bp/m8ijn0iOuZuPI2BfkCoSRunpyjnrQKg==",
"dev": true,
+ "license": "MIT",
"dependencies": {
- "@babel/helper-validator-identifier": "^7.22.20",
- "chalk": "^2.4.2",
- "js-tokens": "^4.0.0"
+ "@babel/types": "^7.28.4"
},
- "engines": {
- "node": ">=6.9.0"
- }
- },
- "node_modules/@babel/parser": {
- "version": "7.23.0",
- "resolved": "https://registry.npmjs.org/@babel/parser/-/parser-7.23.0.tgz",
- "integrity": "sha512-vvPKKdMemU85V9WE/l5wZEmImpCtLqbnTvqDS2U1fJ96KrxoW7KrXhNsNCblQlg8Ck4b85yxdTyelsMUgFUXiw==",
- "dev": true,
"bin": {
"parser": "bin/babel-parser.js"
},
@@ -323,14 +317,15 @@
}
},
"node_modules/@babel/template": {
- "version": "7.22.15",
- "resolved": "https://registry.npmjs.org/@babel/template/-/template-7.22.15.tgz",
- "integrity": "sha512-QPErUVm4uyJa60rkI73qneDacvdvzxshT3kksGqlGWYdOTIUOwJ7RDUL8sGqslY1uXWSL6xMFKEXDS3ox2uF0w==",
+ "version": "7.27.2",
+ "resolved": "https://registry.npmjs.org/@babel/template/-/template-7.27.2.tgz",
+ "integrity": "sha512-LPDZ85aEJyYSd18/DkjNh4/y1ntkE5KwUHWTiqgRxruuZL2F1yuHligVHLvcHY2vMHXttKFpJn6LwfI7cw7ODw==",
"dev": true,
+ "license": "MIT",
"dependencies": {
- "@babel/code-frame": "^7.22.13",
- "@babel/parser": "^7.22.15",
- "@babel/types": "^7.22.15"
+ "@babel/code-frame": "^7.27.1",
+ "@babel/parser": "^7.27.2",
+ "@babel/types": "^7.27.1"
},
"engines": {
"node": ">=6.9.0"
@@ -358,14 +353,14 @@
}
},
"node_modules/@babel/types": {
- "version": "7.23.0",
- "resolved": "https://registry.npmjs.org/@babel/types/-/types-7.23.0.tgz",
- "integrity": "sha512-0oIyUfKoI3mSqMvsxBdclDwxXKXAUA8v/apZbc+iSyARYou1o8ZGDxbUYyLFoW2arqS2jDGqJuZvv1d/io1axg==",
+ "version": "7.28.4",
+ "resolved": "https://registry.npmjs.org/@babel/types/-/types-7.28.4.tgz",
+ "integrity": "sha512-bkFqkLhh3pMBUQQkpVgWDWq/lqzc2678eUyDlTBhRqhCHFguYYGM0Efga7tYk4TogG/3x0EEl66/OQ+WGbWB/Q==",
"dev": true,
+ "license": "MIT",
"dependencies": {
- "@babel/helper-string-parser": "^7.22.5",
- "@babel/helper-validator-identifier": "^7.22.20",
- "to-fast-properties": "^2.0.0"
+ "@babel/helper-string-parser": "^7.27.1",
+ "@babel/helper-validator-identifier": "^7.27.1"
},
"engines": {
"node": ">=6.9.0"
@@ -1054,18 +1049,6 @@
"node": ">=8"
}
},
- "node_modules/ansi-styles": {
- "version": "3.2.1",
- "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-3.2.1.tgz",
- "integrity": "sha512-VT0ZI6kZRdTh8YyJw3SMbYm/u+NqfsAxEpWO0Pf9sq8/e94WxxOpPKx9FR1FlyCtOVDNOQ+8ntlqFxiRc+r5qA==",
- "dev": true,
- "dependencies": {
- "color-convert": "^1.9.0"
- },
- "engines": {
- "node": ">=4"
- }
- },
"node_modules/argparse": {
"version": "2.0.1",
"resolved": "https://registry.npmjs.org/argparse/-/argparse-2.0.1.tgz",
@@ -1202,10 +1185,11 @@
"dev": true
},
"node_modules/brace-expansion": {
- "version": "1.1.11",
- "resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-1.1.11.tgz",
- "integrity": "sha512-iCuPHDFgrHX7H2vEI/5xpz07zSHB00TpugqhmYtVmMO6518mCuRMoOYFldEBl0g187ufozdaHgWKcYFb61qGiA==",
+ "version": "1.1.12",
+ "resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-1.1.12.tgz",
+ "integrity": "sha512-9T9UjW3r0UW5c1Q7GTwllptXwhvYmEzFhzMfZ9H7FQWt+uZePjZPjBP/W1ZEyZ1twGWom5/56TF4lPcqjnDHcg==",
"dev": true,
+ "license": "MIT",
"dependencies": {
"balanced-match": "^1.0.0",
"concat-map": "0.0.1"
@@ -1286,35 +1270,6 @@
}
]
},
- "node_modules/chalk": {
- "version": "2.4.2",
- "resolved": "https://registry.npmjs.org/chalk/-/chalk-2.4.2.tgz",
- "integrity": "sha512-Mti+f9lpJNcwF4tWV8/OrTTtF1gZi+f8FqlyAdouralcFWFQWF2+NgCHShjkCb+IFBLq9buZwE1xckQU4peSuQ==",
- "dev": true,
- "dependencies": {
- "ansi-styles": "^3.2.1",
- "escape-string-regexp": "^1.0.5",
- "supports-color": "^5.3.0"
- },
- "engines": {
- "node": ">=4"
- }
- },
- "node_modules/color-convert": {
- "version": "1.9.3",
- "resolved": "https://registry.npmjs.org/color-convert/-/color-convert-1.9.3.tgz",
- "integrity": "sha512-QfAUtd+vFdAtFQcC8CCyYt1fYWxSqAiK2cSD6zDB8N3cpsEBAvRxp9zOGg6G/SHHJYAT88/az/IuDGALsNVbGg==",
- "dev": true,
- "dependencies": {
- "color-name": "1.1.3"
- }
- },
- "node_modules/color-name": {
- "version": "1.1.3",
- "resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.3.tgz",
- "integrity": "sha512-72fSenhMw2HZMTVHeCA9KCmpEIbzWiQsjN+BHcBbS9vr1mtt+vJjPdksIBNUmKAW8TFUDPJK5SUU3QhE9NEXDw==",
- "dev": true
- },
"node_modules/concat-map": {
"version": "0.0.1",
"resolved": "https://registry.npmjs.org/concat-map/-/concat-map-0.0.1.tgz",
@@ -1328,10 +1283,11 @@
"dev": true
},
"node_modules/cross-spawn": {
- "version": "7.0.3",
- "resolved": "https://registry.npmjs.org/cross-spawn/-/cross-spawn-7.0.3.tgz",
- "integrity": "sha512-iRDPJKUPVEND7dHPO8rkbOnPpyDygcDFtWjpeWNCgy8WP2rXcxXL8TskReQl6OrB2G7+UJrags1q15Fudc7G6w==",
+ "version": "7.0.6",
+ "resolved": "https://registry.npmjs.org/cross-spawn/-/cross-spawn-7.0.6.tgz",
+ "integrity": "sha512-uV2QOWP2nWzsy2aMp8aRibhi9dlzF5Hgh5SHaB9OiTGEyDTiJJyx0uy51QXdyWbtAHNua4XJzUKca3OzKUd3vA==",
"dev": true,
+ "license": "MIT",
"dependencies": {
"path-key": "^3.1.0",
"shebang-command": "^2.0.0",
@@ -1580,15 +1536,6 @@
"node": ">=6"
}
},
- "node_modules/escape-string-regexp": {
- "version": "1.0.5",
- "resolved": "https://registry.npmjs.org/escape-string-regexp/-/escape-string-regexp-1.0.5.tgz",
- "integrity": "sha512-vbRorB5FUQWvla16U8R/qgaFIya2qGzwDrNmCZuYKrbdSUMG6I1ZCGQRefkRVhuOkIGVne7BQ35DSfo1qvJqFg==",
- "dev": true,
- "engines": {
- "node": ">=0.8.0"
- }
- },
"node_modules/eslint": {
"version": "8.52.0",
"resolved": "https://registry.npmjs.org/eslint/-/eslint-8.52.0.tgz",
@@ -2154,15 +2101,6 @@
"url": "https://github.com/sponsors/ljharb"
}
},
- "node_modules/has-flag": {
- "version": "3.0.0",
- "resolved": "https://registry.npmjs.org/has-flag/-/has-flag-3.0.0.tgz",
- "integrity": "sha512-sKJf1+ceQBr4SMkvQnBDNDtf4TXpVhVGateu0t918bl30FnbE2m4vNLX+VWe/dpjlb+HugGYzW7uQXH98HPEYw==",
- "dev": true,
- "engines": {
- "node": ">=4"
- }
- },
"node_modules/has-property-descriptors": {
"version": "1.0.1",
"resolved": "https://registry.npmjs.org/has-property-descriptors/-/has-property-descriptors-1.0.1.tgz",
@@ -2776,9 +2714,9 @@
"dev": true
},
"node_modules/nanoid": {
- "version": "3.3.6",
- "resolved": "https://registry.npmjs.org/nanoid/-/nanoid-3.3.6.tgz",
- "integrity": "sha512-BGcqMMJuToF7i1rt+2PWSNVnWIkGCU78jBG3RxO/bZlnZPK2Cmi2QaffxGO/2RvWi9sL+FAiRiXMgsyxQ1DIDA==",
+ "version": "3.3.11",
+ "resolved": "https://registry.npmjs.org/nanoid/-/nanoid-3.3.11.tgz",
+ "integrity": "sha512-N8SpfPUnUp1bK+PMYW8qSWdl9U+wwNWI4QKxOYDy9JAro3WMX7p2OeVRF9v+347pnakNevPmiHhNmZ2HbFA76w==",
"dev": true,
"funding": [
{
@@ -2786,6 +2724,7 @@
"url": "https://github.com/sponsors/ai"
}
],
+ "license": "MIT",
"bin": {
"nanoid": "bin/nanoid.cjs"
},
@@ -3013,10 +2952,11 @@
"dev": true
},
"node_modules/picocolors": {
- "version": "1.0.0",
- "resolved": "https://registry.npmjs.org/picocolors/-/picocolors-1.0.0.tgz",
- "integrity": "sha512-1fygroTLlHu66zi26VoTDv8yRgm0Fccecssto+MhsZ0D/DGW2sm8E8AjW7NU5VVTRt5GxbeZ5qBuJr+HyLYkjQ==",
- "dev": true
+ "version": "1.1.1",
+ "resolved": "https://registry.npmjs.org/picocolors/-/picocolors-1.1.1.tgz",
+ "integrity": "sha512-xceH2snhtb5M9liqDsmEw56le376mTZkEX/jEb/RxNFyegNul7eNslCXP9FDj/Lcu0X8KEyMceP2ntpaHrDEVA==",
+ "dev": true,
+ "license": "ISC"
},
"node_modules/postcss": {
"version": "8.4.31",
@@ -3222,10 +3162,11 @@
}
},
"node_modules/rollup": {
- "version": "3.29.4",
- "resolved": "https://registry.npmjs.org/rollup/-/rollup-3.29.4.tgz",
- "integrity": "sha512-oWzmBZwvYrU0iJHtDmhsm662rC15FRXmcjCk1xD771dFDx5jJ02ufAQQTn0etB2emNk4J9EZg/yWKpsn9BWGRw==",
+ "version": "3.29.5",
+ "resolved": "https://registry.npmjs.org/rollup/-/rollup-3.29.5.tgz",
+ "integrity": "sha512-GVsDdsbJzzy4S/v3dqWPJ7EfvZJfCHiDqe80IyrF59LYuP+e6U1LJoUqeuqRbwAWoMNoXivMNeNAOf5E22VA1w==",
"dev": true,
+ "license": "MIT",
"bin": {
"rollup": "dist/bin/rollup"
},
@@ -3471,18 +3412,6 @@
"url": "https://github.com/sponsors/sindresorhus"
}
},
- "node_modules/supports-color": {
- "version": "5.5.0",
- "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-5.5.0.tgz",
- "integrity": "sha512-QjVjwdXIt408MIiAqCX4oUKsgU2EqAGzs2Ppkm4aQYbjm+ZEWEcW4SfFNTr4uMNZma0ey4f5lgLrkB0aX0QMow==",
- "dev": true,
- "dependencies": {
- "has-flag": "^3.0.0"
- },
- "engines": {
- "node": ">=4"
- }
- },
"node_modules/supports-preserve-symlinks-flag": {
"version": "1.0.0",
"resolved": "https://registry.npmjs.org/supports-preserve-symlinks-flag/-/supports-preserve-symlinks-flag-1.0.0.tgz",
@@ -3501,15 +3430,6 @@
"integrity": "sha512-N+8UisAXDGk8PFXP4HAzVR9nbfmVJ3zYLAWiTIoqC5v5isinhr+r5uaO8+7r3BMfuNIufIsA7RdpVgacC2cSpw==",
"dev": true
},
- "node_modules/to-fast-properties": {
- "version": "2.0.0",
- "resolved": "https://registry.npmjs.org/to-fast-properties/-/to-fast-properties-2.0.0.tgz",
- "integrity": "sha512-/OaKK0xYrs3DmxRYqL/yDc+FxFUVYhDlXMhRmv3z915w2HF1tnN1omB354j8VUGO/hbRzyD6Y3sA7v7GS/ceog==",
- "dev": true,
- "engines": {
- "node": ">=4"
- }
- },
"node_modules/type-check": {
"version": "0.4.0",
"resolved": "https://registry.npmjs.org/type-check/-/type-check-0.4.0.tgz",
@@ -3654,10 +3574,11 @@
}
},
"node_modules/vite": {
- "version": "4.5.0",
- "resolved": "https://registry.npmjs.org/vite/-/vite-4.5.0.tgz",
- "integrity": "sha512-ulr8rNLA6rkyFAlVWw2q5YJ91v098AFQ2R0PRFwPzREXOUJQPtFUG0t+/ZikhaOCDqFoDhN6/v8Sq0o4araFAw==",
+ "version": "4.5.14",
+ "resolved": "https://registry.npmjs.org/vite/-/vite-4.5.14.tgz",
+ "integrity": "sha512-+v57oAaoYNnO3hIu5Z/tJRZjq5aHM2zDve9YZ8HngVHbhk66RStobhb1sqPMIPEleV6cNKYK4eGrAbE9Ulbl2g==",
"dev": true,
+ "license": "MIT",
"dependencies": {
"esbuild": "^0.18.10",
"postcss": "^8.4.27",
diff --git a/src/sections/Advice/components/AdviceSlip.jsx b/src/sections/Advice/components/AdviceSlip.jsx
index e69de29b..2b80b302 100644
--- a/src/sections/Advice/components/AdviceSlip.jsx
+++ b/src/sections/Advice/components/AdviceSlip.jsx
@@ -0,0 +1,14 @@
+import React from 'react';
+
+function AdviceSlip(props) {
+ return (
+
+ Some Advice
+ {props.slip.advice}
+
+
+
+ );
+}
+
+export default AdviceSlip;
\ No newline at end of file
diff --git a/src/sections/Advice/components/FavouriteSlipsList.jsx b/src/sections/Advice/components/FavouriteSlipsList.jsx
index e69de29b..4e66abd5 100644
--- a/src/sections/Advice/components/FavouriteSlipsList.jsx
+++ b/src/sections/Advice/components/FavouriteSlipsList.jsx
@@ -0,0 +1,14 @@
+function FavouriteSlipsList(props) {
+ return (
+
+ Favourite Advice Slips
+
+ {props.slips.map((item, index) => (
+ - {item.advice}
+ ))}
+
+
+ );
+}
+
+export default FavouriteSlipsList;
\ No newline at end of file
diff --git a/src/sections/Advice/index.jsx b/src/sections/Advice/index.jsx
index 0405f11f..b2302788 100644
--- a/src/sections/Advice/index.jsx
+++ b/src/sections/Advice/index.jsx
@@ -1,11 +1,37 @@
+import FavouriteSlipsList from "./components/FavouriteSlipsList.jsx";
+import AdviceSlip from "./components/AdviceSlip.jsx";
+import {useEffect, useState} from "react";
+
function AdviceSection() {
- return (
-
- )
+ const slipsUrl = "https://api.adviceslip.com/advice";
+ const [favouriteSlips, setFavouriteSlips] = useState([]);
+ const [currentData, setCurrentData] = useState();
+
+ const fetchData = async () => {
+ const response = await fetch(slipsUrl);
+ const jsonData = await response.json();
+ setCurrentData(jsonData.slip);
+ };
+
+ const saveSlip = (slip) => {
+ if (!favouriteSlips.find((favourite) => favourite.id === slip.id)) {
+ setFavouriteSlips([...favouriteSlips, slip]);
+ }
+ }
+
+ useEffect(() => {
+ fetchData();
+ }, []);
+
+ return (
+
+ Advice Section
+ {currentData && (
+
+ )}
+
+
+ );
}
export default AdviceSection
diff --git a/src/sections/Advice/template.html b/src/sections/Advice/template.html
index 3949b691..301df746 100644
--- a/src/sections/Advice/template.html
+++ b/src/sections/Advice/template.html
@@ -1,12 +1,12 @@
Advice Section
-
+
Some Advice
Always the burrito.
-
+
-
+
Favourite Advice Slips
- Measure twice, cut once.
diff --git a/src/sections/Art/components/ArtList.jsx b/src/sections/Art/components/ArtList.jsx
index e69de29b..8f65268b 100644
--- a/src/sections/Art/components/ArtList.jsx
+++ b/src/sections/Art/components/ArtList.jsx
@@ -0,0 +1,33 @@
+import ArtListItem from "./ArtListItem.jsx";
+import {useEffect, useState} from "react";
+
+function ArtList(props) {
+ const url = "https://boolean-uk-api-server.fly.dev/art";
+ const [data, setData] = useState([]);
+
+ useEffect(() => {
+ const fetchData = async () => {
+ const response = await fetch(url);
+ const jsonData = await response.json();
+ setData(jsonData);
+ };
+ fetchData();
+ }, []);
+
+ const getFullImageUrl = (imageUrl) => {
+ return url.replace("art", imageUrl);
+ }
+
+ return (
+
+ {
+ data.map((item, index) => (
+
+ ))
+ }
+
+ );
+}
+
+export default ArtList;
\ No newline at end of file
diff --git a/src/sections/Art/components/ArtListItem.jsx b/src/sections/Art/components/ArtListItem.jsx
index e69de29b..25fe75a9 100644
--- a/src/sections/Art/components/ArtListItem.jsx
+++ b/src/sections/Art/components/ArtListItem.jsx
@@ -0,0 +1,24 @@
+function ArtListItem(props) {
+ return (
+ -
+
+
+
{props.title}
+ Artist: {props.artist}
+ Publication History:
+
+ {props.publicationHistory.map((item, index) => (
+ -
+ {item}
+
+ ))}
+
+
+ );
+}
+
+export default ArtListItem;
\ No newline at end of file
diff --git a/src/sections/Art/components/PublicationHistoryList.jsx b/src/sections/Art/components/PublicationHistoryList.jsx
index d3f5a12f..27aa7c08 100644
--- a/src/sections/Art/components/PublicationHistoryList.jsx
+++ b/src/sections/Art/components/PublicationHistoryList.jsx
@@ -1 +1,8 @@
+function PublicationHistoryList(props) {
+ return (
+
+ );
+}
+
+export default PublicationHistoryList;
diff --git a/src/sections/Art/index.jsx b/src/sections/Art/index.jsx
index 0c74ffc2..39ae9ed7 100644
--- a/src/sections/Art/index.jsx
+++ b/src/sections/Art/index.jsx
@@ -1,8 +1,12 @@
+import ArtList from "./components/ArtList.jsx";
+
function ArtsSection() {
return (
)
}
diff --git a/src/sections/Users/components/UsersList.jsx b/src/sections/Users/components/UsersList.jsx
index e69de29b..7cf8bd16 100644
--- a/src/sections/Users/components/UsersList.jsx
+++ b/src/sections/Users/components/UsersList.jsx
@@ -0,0 +1,32 @@
+import UsersListItem from "./UsersListItem.jsx";
+import {useEffect, useState} from "react";
+
+function UsersList(props) {
+ const url = "https://boolean-uk-api-server.fly.dev/Patrycioss/contact";
+ const [data, setData] = useState([]);
+
+ const getFullImageUrl = (imageUrl) => {
+ return url.replace("Patrycioss/contact", imageUrl);
+ }
+
+ useEffect(() => {
+ const fetchData = async () => {
+ const response = await fetch(url);
+ const jsonData = await response.json();
+ setData(jsonData);
+ };
+ fetchData();
+ }, []);
+
+ return (
+
+ {
+ data.map((item, index) => (
+
+ ))
+ }
+
+ );
+}
+
+export default UsersList;
\ No newline at end of file
diff --git a/src/sections/Users/components/UsersListItem.jsx b/src/sections/Users/components/UsersListItem.jsx
index e69de29b..847e07d3 100644
--- a/src/sections/Users/components/UsersListItem.jsx
+++ b/src/sections/Users/components/UsersListItem.jsx
@@ -0,0 +1,33 @@
+const genderToAddressable = {
+ "Male": "Mr",
+ "Female": "Mrs",
+ "F2M": "Mr",
+ "T* man": "Mr",
+ "FTM": "Mr",
+ "Cisgender male": "Mr",
+ "Cis man": "Mr",
+ "Trans man": "Mr",
+};
+
+function UsersListItem(props) {
+ const {item} = props;
+
+ let addressable = "Mr/Mrs";
+ const foundAddressable = genderToAddressable[item.gender];
+ if (foundAddressable != null) {
+ addressable = foundAddressable;
+ }
+
+ return (
+ -
+
+ {addressable} {item.firstName} {item.lastName}
+ Email: {item.email}
+
+ );
+}
+
+export default UsersListItem;
\ No newline at end of file
diff --git a/src/sections/Users/index.jsx b/src/sections/Users/index.jsx
index 77332830..baa7950f 100644
--- a/src/sections/Users/index.jsx
+++ b/src/sections/Users/index.jsx
@@ -1,8 +1,12 @@
+import UsersList from "./components/UsersList.jsx";
+
function UsersSection() {
return (
)
}