renamed
This commit is contained in:
QkoSad
@@ -0,0 +1,41 @@
|
||||
{
|
||||
"notes": [
|
||||
{
|
||||
"id": 1,
|
||||
"content": "custom hooks are awesome"
|
||||
},
|
||||
{
|
||||
"id": 2,
|
||||
"content": "best feature ever <3"
|
||||
},
|
||||
{
|
||||
"content": "new note",
|
||||
"id": 3
|
||||
},
|
||||
{
|
||||
"content": "new note",
|
||||
"id": 4
|
||||
},
|
||||
{
|
||||
"content": "more new notes",
|
||||
"id": 5
|
||||
}
|
||||
],
|
||||
"persons": [
|
||||
{
|
||||
"id": 1,
|
||||
"name": "Matti Luukkainen",
|
||||
"number": "040-12344565"
|
||||
},
|
||||
{
|
||||
"id": 2,
|
||||
"name": "Tarja Halonen",
|
||||
"number": "040-2223334"
|
||||
},
|
||||
{
|
||||
"name": "asdas",
|
||||
"number": "dasdasdas",
|
||||
"id": 3
|
||||
}
|
||||
]
|
||||
}
|
||||
Generated
+30029
File diff suppressed because it is too large
Load Diff
@@ -0,0 +1,43 @@
|
||||
{
|
||||
"name": "ultimate-hooks",
|
||||
"version": "0.1.0",
|
||||
"private": true,
|
||||
"dependencies": {
|
||||
"@testing-library/jest-dom": "^5.16.5",
|
||||
"@testing-library/react": "^13.4.0",
|
||||
"@testing-library/user-event": "^13.5.0",
|
||||
"axios": "^1.4.0",
|
||||
"react": "^18.2.0",
|
||||
"react-dom": "^18.2.0",
|
||||
"react-scripts": "5.0.1",
|
||||
"web-vitals": "^2.1.4"
|
||||
},
|
||||
"scripts": {
|
||||
"start": "react-scripts start",
|
||||
"build": "react-scripts build",
|
||||
"test": "react-scripts test",
|
||||
"eject": "react-scripts eject",
|
||||
"server": "json-server --port 3005 --watch db.json"
|
||||
},
|
||||
"eslintConfig": {
|
||||
"extends": [
|
||||
"react-app",
|
||||
"react-app/jest"
|
||||
]
|
||||
},
|
||||
"browserslist": {
|
||||
"production": [
|
||||
">0.2%",
|
||||
"not dead",
|
||||
"not op_mini all"
|
||||
],
|
||||
"development": [
|
||||
"last 1 chrome version",
|
||||
"last 1 firefox version",
|
||||
"last 1 safari version"
|
||||
]
|
||||
},
|
||||
"devDependencies": {
|
||||
"json-server": "^0.17.1"
|
||||
}
|
||||
}
|
||||
Binary file not shown.
|
After Width: | Height: | Size: 3.8 KiB |
@@ -0,0 +1,43 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8" />
|
||||
<link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
||||
<meta name="theme-color" content="#000000" />
|
||||
<meta
|
||||
name="description"
|
||||
content="Web site created using create-react-app"
|
||||
/>
|
||||
<link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
|
||||
<!--
|
||||
manifest.json provides metadata used when your web app is installed on a
|
||||
user's mobile device or desktop. See https://developers.google.com/web/fundamentals/web-app-manifest/
|
||||
-->
|
||||
<link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
|
||||
<!--
|
||||
Notice the use of %PUBLIC_URL% in the tags above.
|
||||
It will be replaced with the URL of the `public` folder during the build.
|
||||
Only files inside the `public` folder can be referenced from the HTML.
|
||||
|
||||
Unlike "/favicon.ico" or "favicon.ico", "%PUBLIC_URL%/favicon.ico" will
|
||||
work correctly both with client-side routing and a non-root public URL.
|
||||
Learn how to configure a non-root public URL by running `npm run build`.
|
||||
-->
|
||||
<title>React App</title>
|
||||
</head>
|
||||
<body>
|
||||
<noscript>You need to enable JavaScript to run this app.</noscript>
|
||||
<div id="root"></div>
|
||||
<!--
|
||||
This HTML file is a template.
|
||||
If you open it directly in the browser, you will see an empty page.
|
||||
|
||||
You can add webfonts, meta tags, or analytics to this file.
|
||||
The build step will place the bundled scripts into the <body> tag.
|
||||
|
||||
To begin the development, run `npm start` or `yarn start`.
|
||||
To create a production bundle, use `npm run build` or `yarn build`.
|
||||
-->
|
||||
</body>
|
||||
</html>
|
||||
Binary file not shown.
|
After Width: | Height: | Size: 5.2 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 9.4 KiB |
@@ -0,0 +1,25 @@
|
||||
{
|
||||
"short_name": "React App",
|
||||
"name": "Create React App Sample",
|
||||
"icons": [
|
||||
{
|
||||
"src": "favicon.ico",
|
||||
"sizes": "64x64 32x32 24x24 16x16",
|
||||
"type": "image/x-icon"
|
||||
},
|
||||
{
|
||||
"src": "logo192.png",
|
||||
"type": "image/png",
|
||||
"sizes": "192x192"
|
||||
},
|
||||
{
|
||||
"src": "logo512.png",
|
||||
"type": "image/png",
|
||||
"sizes": "512x512"
|
||||
}
|
||||
],
|
||||
"start_url": ".",
|
||||
"display": "standalone",
|
||||
"theme_color": "#000000",
|
||||
"background_color": "#ffffff"
|
||||
}
|
||||
@@ -0,0 +1,3 @@
|
||||
# https://www.robotstxt.org/robotstxt.html
|
||||
User-agent: *
|
||||
Disallow:
|
||||
@@ -0,0 +1,87 @@
|
||||
import { useState, useEffect } from "react";
|
||||
import axios from "axios";
|
||||
|
||||
const useField = (type) => {
|
||||
const [value, setValue] = useState("");
|
||||
|
||||
const onChange = (event) => {
|
||||
setValue(event.target.value);
|
||||
};
|
||||
|
||||
return {
|
||||
type,
|
||||
value,
|
||||
onChange,
|
||||
};
|
||||
};
|
||||
|
||||
const useResource = (baseUrl) => {
|
||||
const [resources, setResources] = useState([]);
|
||||
|
||||
useEffect(() => {
|
||||
async function getData() {
|
||||
const resp = await axios.get(baseUrl);
|
||||
setResources(resp.data);
|
||||
}
|
||||
getData();
|
||||
}, [baseUrl]);
|
||||
|
||||
const create = async (resource) => {
|
||||
const resp = await axios.post(baseUrl, resource);
|
||||
return resp.data;
|
||||
};
|
||||
|
||||
const service = {
|
||||
create,
|
||||
};
|
||||
|
||||
return [resources, service];
|
||||
};
|
||||
|
||||
const App = () => {
|
||||
const content = useField("text");
|
||||
const name = useField("text");
|
||||
const number = useField("text");
|
||||
|
||||
const [notes, noteService] = useResource("http://localhost:3005/notes");
|
||||
const [persons, personService] = useResource("http://localhost:3005/persons");
|
||||
|
||||
const handleNoteSubmit = (event) => {
|
||||
event.preventDefault();
|
||||
noteService.create({ content: content.value });
|
||||
|
||||
};
|
||||
|
||||
const handlePersonSubmit = (event) => {
|
||||
event.preventDefault();
|
||||
personService.create({ name: name.value, number: number.value });
|
||||
};
|
||||
|
||||
return (
|
||||
<div>
|
||||
<h2>notes</h2>
|
||||
<form onSubmit={handleNoteSubmit}>
|
||||
<input {...content} />
|
||||
<button>create</button>
|
||||
</form>
|
||||
{notes.map((n) => (
|
||||
<p key={n.id}>{n.content}</p>
|
||||
))}
|
||||
|
||||
<h2>persons</h2>
|
||||
<form onSubmit={handlePersonSubmit}>
|
||||
name <input {...name} /> <br />
|
||||
number <input {...number} />
|
||||
<button>create</button>
|
||||
</form>
|
||||
{persons.map((n) => (
|
||||
<p key={n.id}>
|
||||
{n.name} {n.number}
|
||||
</p>
|
||||
))}
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default App;
|
||||
|
||||
@@ -0,0 +1,5 @@
|
||||
import React from 'react'
|
||||
import ReactDOM from 'react-dom/client'
|
||||
import App from './App'
|
||||
|
||||
ReactDOM.createRoot(document.getElementById('root')).render(<App />)
|
||||
Reference in New Issue
Block a user