Generate list on app start

.gitignore

@@ -21,3 +21,6 @@
 npm-debug.log*
 yarn-debug.log*
 yarn-error.log*
+
+# app
+public/list.json

README.md

@@ -42,10 +42,6 @@ Your url will be `http://linkfree.eddiehub.org/<yourusername>`, for example http
 
 Your `avatar` URL should take the format of `https://github.com/<yourusername>.png`.
 
-### Add your profile to the home page
+### Home page profiles
 
-Update the file `public/data/_list.json` with the following object to the collection:
-
-```json
-{ "username": "eddiejaoude", "avatar": "https://github.com/eddiejaoude.png" },
-```
+Your profile will automatically appear on the home page.

generate.js

@@ -0,0 +1,24 @@
+const path = require('path')
+const fs = require('fs')
+
+// load json files
+const readDirectoryPath = path.join(__dirname, 'public', 'data')
+const files = fs.readdirSync(readDirectoryPath)
+const profiles = files.map((file) => {
+  const data = JSON.parse(
+    fs.readFileSync(`${path.join(__dirname, 'public', 'data', file)}`, 'utf8'),
+  )
+  return {
+    username: file.split('.')[0],
+    ...data,
+  }
+})
+
+// generate list file
+const writeDirectoryPath = path.join(__dirname, 'public', 'list.json')
+const output = profiles.map((profile) => ({
+  username: profile.username,
+  avatar: profile.avatar,
+}))
+
+fs.writeFileSync(writeDirectoryPath, JSON.stringify(output))

package.json

@@ -20,11 +20,13 @@
   },
   "scripts": {
     "lint": "eslint public/data --ext .json",
+    "prestart": "npm run generate",
     "start": "react-scripts start",
     "start:prod": "serve -s build",
     "build": "react-scripts build",
     "test": "react-scripts test",
-    "eject": "react-scripts eject"
+    "eject": "react-scripts eject",
+    "generate": "node generate.js"
   },
   "eslintConfig": {
     "extends": [
@@ -54,4 +56,4 @@
     "eslint-plugin-react": "^7.25.1",
     "prettier": "2.4.0"
   }
-}
+}

src/Components/Home.js

@@ -18,7 +18,7 @@ function Home() {
   }
 
   useEffect(() => {
-    fetch('/data/_list.json')
+    fetch('/list.json')
       .then((response) => response.json())
       .then((data) => setList(data))
   }, [])