Skip to content
Snippets Groups Projects
Commit e37dd36d authored by Maria Kangasniemi's avatar Maria Kangasniemi
Browse files

osa 2

parents
No related branches found
No related tags found
No related merge requests found
Showing
with 735 additions and 0 deletions
File added
File added
File added
File added
File added
import React from 'react'
import ReactDOM from 'react-dom/client'
import App from './App.jsx'
ReactDOM.createRoot(document.getElementById('root')).render(
<React.StrictMode>
<App />
</React.StrictMode>,
)
module.exports = {
root: true,
env: { browser: true, es2020: true },
extends: [
'eslint:recommended',
'plugin:react/recommended',
'plugin:react/jsx-runtime',
'plugin:react-hooks/recommended',
],
ignorePatterns: ['dist', '.eslintrc.cjs'],
parserOptions: { ecmaVersion: 'latest', sourceType: 'module' },
settings: { react: { version: '18.2' } },
plugins: ['react-refresh'],
rules: {
'react/jsx-no-target-blank': 'off',
'react-refresh/only-export-components': [
'warn',
{ allowConstantExport: true },
],
},
}
# Logs
logs
*.log
npm-debug.log*
yarn-debug.log*
yarn-error.log*
pnpm-debug.log*
lerna-debug.log*
node_modules
dist
dist-ssr
*.local
# Editor directories and files
.vscode/*
!.vscode/extensions.json
.idea
.DS_Store
*.suo
*.ntvs*
*.njsproj
*.sln
*.sw?
# React + Vite
This template provides a minimal setup to get React working in Vite with HMR and some ESLint rules.
Currently, two official plugins are available:
- [@vitejs/plugin-react](https://github.com/vitejs/vite-plugin-react/blob/main/packages/plugin-react/README.md) uses [Babel](https://babeljs.io/) for Fast Refresh
- [@vitejs/plugin-react-swc](https://github.com/vitejs/vite-plugin-react-swc) uses [SWC](https://swc.rs/) for Fast Refresh
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<link rel="icon" type="image/svg+xml" href="/vite.svg" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Vite + React</title>
</head>
<body>
<div id="root"></div>
<script type="module" src="/src/main.jsx"></script>
</body>
</html>
This diff is collapsed.
{
"name": "part1",
"private": true,
"version": "0.0.0",
"type": "module",
"scripts": {
"dev": "vite",
"build": "vite build",
"lint": "eslint . --ext js,jsx --report-unused-disable-directives --max-warnings 0",
"preview": "vite preview"
},
"dependencies": {
"axios": "^1.6.7",
"react": "^18.2.0",
"react-dom": "^18.2.0"
},
"devDependencies": {
"@types/react": "^18.2.56",
"@types/react-dom": "^18.2.19",
"@vitejs/plugin-react": "^4.2.1",
"eslint": "^8.56.0",
"eslint-plugin-react": "^7.33.2",
"eslint-plugin-react-hooks": "^4.6.0",
"eslint-plugin-react-refresh": "^0.4.5",
"vite": "^5.1.5"
}
}
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="iconify iconify--logos" width="31.88" height="32" preserveAspectRatio="xMidYMid meet" viewBox="0 0 256 257"><defs><linearGradient id="IconifyId1813088fe1fbc01fb466" x1="-.828%" x2="57.636%" y1="7.652%" y2="78.411%"><stop offset="0%" stop-color="#41D1FF"></stop><stop offset="100%" stop-color="#BD34FE"></stop></linearGradient><linearGradient id="IconifyId1813088fe1fbc01fb467" x1="43.376%" x2="50.316%" y1="2.242%" y2="89.03%"><stop offset="0%" stop-color="#FFEA83"></stop><stop offset="8.333%" stop-color="#FFDD35"></stop><stop offset="100%" stop-color="#FFA800"></stop></linearGradient></defs><path fill="url(#IconifyId1813088fe1fbc01fb466)" d="M255.153 37.938L134.897 252.976c-2.483 4.44-8.862 4.466-11.382.048L.875 37.958c-2.746-4.814 1.371-10.646 6.827-9.67l120.385 21.517a6.537 6.537 0 0 0 2.322-.004l117.867-21.483c5.438-.991 9.574 4.796 6.877 9.62Z"></path><path fill="url(#IconifyId1813088fe1fbc01fb467)" d="M185.432.063L96.44 17.501a3.268 3.268 0 0 0-2.634 3.014l-5.474 92.456a3.268 3.268 0 0 0 3.997 3.378l24.777-5.718c2.318-.535 4.413 1.507 3.936 3.838l-7.361 36.047c-.495 2.426 1.782 4.5 4.151 3.78l15.304-4.649c2.372-.72 4.652 1.36 4.15 3.788l-11.698 56.621c-.732 3.542 3.979 5.473 5.943 2.437l1.313-2.028l72.516-144.72c1.215-2.423-.88-5.186-3.54-4.672l-25.505 4.922c-2.396.462-4.435-1.77-3.759-4.114l16.646-57.705c.677-2.35-1.37-4.583-3.769-4.113Z"></path></svg>
\ No newline at end of file
import React, { useState, useEffect } from 'react'
import axios from 'axios'
import './index.css'
import personService from './services/persons'
const Person = ({ person, onDelete }) => {
return (
<li>
{person.name} {person.number}
<button onClick={() => onDelete(person.id)}>Delete</button>
</li>
)
}
const Persons = ({ persons, onDelete }) => {
return (
<ul style={{ listStyleType: 'none', padding: 0, margin: 0 }}>
{persons.map((person, index) => (
<Person key={index} person={person} onDelete={onDelete} />
))}
</ul>
)
}
const PersonForm = ({ addPerson, newName, handleNameChange, newNumber, handleNumberChange }) => {
return (
<form onSubmit={addPerson}>
<div>name: <input value={newName} onChange={handleNameChange} /></div>
<div>number: <input value={newNumber} onChange={handleNumberChange}/></div>
<div><button type="submit">add</button></div>
</form>
)
}
const Notification = ({ message }) => {
return (
<div className="notification">
{message}
</div>
)
}
const App = () => {
const [persons, setPersons] = useState([
{ name: 'Arto Hellas', number: '040-1234567' }
])
const [newName, setNewName] = useState('')
const [newNumber, setNewNumber] = useState('')
const [successMessage, setSuccessMessage] = useState(null)
useEffect(() => {
personService.getAll().then(initialPersons => {
setPersons(initialPersons)
})
.catch((error) => {
console.error('Error fetching data:', error)
})
}, [])
const addPerson = (event) => {
event.preventDefault()
const nameExists = persons.some(person => person.name === newName);
if (nameExists) {
alert(`${newName} is already added to the phonebook`);
return // Estetään lisäys
}
const personObject = {
name: newName,
number: newNumber,
}
personService.create(personObject).then(returnedPerson => {
setPersons(persons.concat(returnedPerson))
setNewName('')
setNewNumber('')
setSuccessMessage(`Added ${newName}`)
setTimeout(() => {
setSuccessMessage(null)
}, 5000)
})
.catch(error => {
alert(
`the person '${personObject.content}' was already deleted from server`
)
setPersons(persons.filter(p => p.id !== personObject.id))
})
}
const deletePerson = (personId) => {
const personToDelete = persons.find(person => person.id === personId);
if (window.confirm(`Delete ${personToDelete.name}?`)) {
personService
.remove(personId)
.then(() => {
setPersons(persons.filter(person => person.id !== personId))
setSuccessMessage(`Deleted ${personToDelete.name}`)
setTimeout(() => {
setSuccessMessage(null)
}, 5000)
})
.catch(error => {
console.error('Error deleting person:', error)
})
}
}
const handleNameChange = (event) => {
console.log(event.target.value)
setNewName(event.target.value)
}
const handleNumberChange = (event) => {
console.log(event.target.value)
setNewNumber(event.target.value)
}
return (
<div>
<h2>Phonebook</h2>
<h3>Add a new</h3>
{successMessage && <Notification message={successMessage} />}
<PersonForm
addPerson={addPerson}
newName={newName}
handleNameChange={handleNameChange}
newNumber={newNumber}
handleNumberChange={handleNumberChange}
/>
<div>debug: {newName}</div>
<h2>Numbers</h2>
<Persons persons={persons} onDelete={deletePerson} />
</div>
)
}
export default App
import { useState } from 'react'
const Person = ({ person }) => {
return (
<li>{person.name} {person.number}</li>
)
}
const Persons = ({ persons }) => {
return (
<ul style={{ listStyleType: 'none', padding: 0, margin: 0 }}>
{persons.map((person, index) => (
<Person key={index} person={person} />
))}
</ul>
)
}
const PersonForm = ({ addPerson, newName, handleNameChange, newNumber, handleNumberChange }) => {
return (
<form onSubmit={addPerson}>
<div>name: <input value={newName} onChange={handleNameChange} /></div>
<div>number: <input value={newNumber} onChange={handleNumberChange}/></div>
<div><button type="submit">add</button></div>
</form>
)
}
const App = () => {
const [persons, setPersons] = useState([
{ name: 'Arto Hellas', number: '040-1234567' }
])
const [newName, setNewName] = useState('')
const [newNumber, setNewNumber] = useState('')
const addPerson = (event) => {
event.preventDefault()
const nameExists = persons.some(person => person.name === newName);
if (nameExists) {
alert(`${newName} is already added to the phonebook`);
return; // Estetään lisäys
}
const personObject = {
name: newName,
number: newNumber
}
setPersons(persons.concat(personObject))
setNewName('')
setNewNumber('')
}
const handleNameChange = (event) => {
console.log(event.target.value)
setNewName(event.target.value)
}
const handleNumberChange = (event) => {
console.log(event.target.value)
setNewNumber(event.target.value)
}
return (
<div>
<h2>Phonebook</h2>
<h3>Add a new</h3>
<PersonForm
addPerson={addPerson}
newName={newName}
handleNameChange={handleNameChange}
newNumber={newNumber}
handleNumberChange={handleNumberChange}
/>
<div>debug: {newName}</div>
<h2>Numbers</h2>
<Persons persons={persons} />
</div>
)
}
export default App
import { useState, useEffect } from 'react'
import axios from 'axios';
const Person = ({ person }) => {
return (
<li>{person.name} {person.number}</li>
)
}
const Persons = ({ persons }) => {
return (
<ul style={{ listStyleType: 'none', padding: 0, margin: 0 }}>
{persons.map((person, index) => (
<Person key={index} person={person} />
))}
</ul>
)
}
const PersonForm = ({ addPerson, newName, handleNameChange, newNumber, handleNumberChange }) => {
return (
<form onSubmit={addPerson}>
<div>name: <input value={newName} onChange={handleNameChange} /></div>
<div>number: <input value={newNumber} onChange={handleNumberChange}/></div>
<div><button type="submit">add</button></div>
</form>
)
}
const App = () => {
const [persons, setPersons] = useState([
{ name: 'Arto Hellas', number: '040-1234567' }
])
const [newName, setNewName] = useState('')
const [newNumber, setNewNumber] = useState('')
const addPerson = (event) => {
event.preventDefault()
const nameExists = persons.some(person => person.name === newName);
if (nameExists) {
alert(`${newName} is already added to the phonebook`);
return; // Estetään lisäys
}
const personObject = {
name: newName,
number: newNumber,
id: persons.length + 1
}
axios
.post('http://localhost:3001/persons', personObject)
.then((response) => {
setPersons(persons.concat(response.data))
setNewName('')
setNewNumber('')
})
.catch((error) => {
console.error('Error adding person:', error)
})
}
const handleNameChange = (event) => {
console.log(event.target.value)
setNewName(event.target.value)
}
const handleNumberChange = (event) => {
console.log(event.target.value)
setNewNumber(event.target.value)
}
useEffect(() => {
axios
.get('http://localhost:3001/persons')
.then((response) => {
setPersons(response.data)
})
.catch((error) => {
console.error('Error fetching data:', error)
})
}, [])
return (
<div>
<h2>Phonebook</h2>
<h3>Add a new</h3>
<PersonForm
addPerson={addPerson}
newName={newName}
handleNameChange={handleNameChange}
newNumber={newNumber}
handleNumberChange={handleNumberChange}
/>
<div>debug: {newName}</div>
<h2>Numbers</h2>
<Persons persons={persons} />
</div>
)
}
export default App
import { useState, useEffect } from 'react'
import axios from 'axios';
const Person = ({ person }) => {
return (
<li>{person.name} {person.number}</li>
)
}
const Persons = ({ persons }) => {
return (
<ul style={{ listStyleType: 'none', padding: 0, margin: 0 }}>
{persons.map((person, index) => (
<Person key={index} person={person} />
))}
</ul>
)
}
const PersonForm = ({ addPerson, newName, handleNameChange, newNumber, handleNumberChange }) => {
return (
<form onSubmit={addPerson}>
<div>name: <input value={newName} onChange={handleNameChange} /></div>
<div>number: <input value={newNumber} onChange={handleNumberChange}/></div>
<div><button type="submit">add</button></div>
</form>
)
}
const App = () => {
const [persons, setPersons] = useState([
{ name: 'Arto Hellas', number: '040-1234567' }
])
const [newName, setNewName] = useState('')
const [newNumber, setNewNumber] = useState('')
const addPerson = (event) => {
event.preventDefault()
const nameExists = persons.some(person => person.name === newName);
if (nameExists) {
alert(`${newName} is already added to the phonebook`);
return; // Estetään lisäys
}
const personObject = {
name: newName,
number: newNumber,
id: persons.length + 1
}
axios
.post('http://localhost:3001/persons', personObject)
.then((response) => {
setPersons(persons.concat(response.data))
setNewName('')
setNewNumber('')
})
.catch((error) => {
console.error('Error adding person:', error)
})
}
const handleNameChange = (event) => {
console.log(event.target.value)
setNewName(event.target.value)
}
const handleNumberChange = (event) => {
console.log(event.target.value)
setNewNumber(event.target.value)
}
useEffect(() => {
axios
.get('http://localhost:3001/persons')
.then((response) => {
setPersons(response.data)
})
.catch((error) => {
console.error('Error fetching data:', error)
})
}, [])
return (
<div>
<h2>Phonebook</h2>
<h3>Add a new</h3>
<PersonForm
addPerson={addPerson}
newName={newName}
handleNameChange={handleNameChange}
newNumber={newNumber}
handleNumberChange={handleNumberChange}
/>
<div>debug: {newName}</div>
<h2>Numbers</h2>
<Persons persons={persons} />
</div>
)
}
export default App
import { useState, useEffect } from 'react'
import axios from 'axios'
import personService from './services/persons'
const Person = ({ person }) => {
return (
<li>{person.name} {person.number}</li>
)
}
const Persons = ({ persons }) => {
return (
<ul style={{ listStyleType: 'none', padding: 0, margin: 0 }}>
{persons.map((person, index) => (
<Person key={index} person={person} />
))}
</ul>
)
}
const PersonForm = ({ addPerson, newName, handleNameChange, newNumber, handleNumberChange }) => {
return (
<form onSubmit={addPerson}>
<div>name: <input value={newName} onChange={handleNameChange} /></div>
<div>number: <input value={newNumber} onChange={handleNumberChange}/></div>
<div><button type="submit">add</button></div>
</form>
)
}
const App = () => {
const [persons, setPersons] = useState([
{ name: 'Arto Hellas', number: '040-1234567' }
])
const [newName, setNewName] = useState('')
const [newNumber, setNewNumber] = useState('')
useEffect(() => {
personService.getAll().then(initialPersons => {
setPersons(initialPersons)
})
.catch((error) => {
console.error('Error fetching data:', error)
})
}, [])
const addPerson = (event) => {
event.preventDefault()
const nameExists = persons.some(person => person.name === newName);
if (nameExists) {
alert(`${newName} is already added to the phonebook`);
return // Estetään lisäys
}
const personObject = {
name: newName,
number: newNumber,
}
personService.create(personObject).then(returnedPerson => {
setPersons(persons.concat(returnedPerson))
setNewName('')
setNewNumber('')
})
.catch((error) => {
console.error('Error adding person:', error)
})
}
const handleNameChange = (event) => {
console.log(event.target.value)
setNewName(event.target.value)
}
const handleNumberChange = (event) => {
console.log(event.target.value)
setNewNumber(event.target.value)
}
return (
<div>
<h2>Phonebook</h2>
<h3>Add a new</h3>
<PersonForm
addPerson={addPerson}
newName={newName}
handleNameChange={handleNameChange}
newNumber={newNumber}
handleNumberChange={handleNumberChange}
/>
<div>debug: {newName}</div>
<h2>Numbers</h2>
<Persons persons={persons} />
</div>
)
}
export default App
import { useState, useEffect } from 'react'
import axios from 'axios'
import personService from './services/persons'
const Person = ({ person, onDelete }) => {
return (
<li>
{person.name} {person.number}
<button onClick={() => onDelete(person.id)}>Delete</button>
</li>
)
}
const Persons = ({ persons, onDelete }) => {
return (
<ul style={{ listStyleType: 'none', padding: 0, margin: 0 }}>
{persons.map((person, index) => (
<Person key={index} person={person} onDelete={onDelete} />
))}
</ul>
)
}
const PersonForm = ({ addPerson, newName, handleNameChange, newNumber, handleNumberChange }) => {
return (
<form onSubmit={addPerson}>
<div>name: <input value={newName} onChange={handleNameChange} /></div>
<div>number: <input value={newNumber} onChange={handleNumberChange}/></div>
<div><button type="submit">add</button></div>
</form>
)
}
const App = () => {
const [persons, setPersons] = useState([
{ name: 'Arto Hellas', number: '040-1234567' }
])
const [newName, setNewName] = useState('')
const [newNumber, setNewNumber] = useState('')
useEffect(() => {
personService.getAll().then(initialPersons => {
setPersons(initialPersons)
})
.catch((error) => {
console.error('Error fetching data:', error)
})
}, [])
const addPerson = (event) => {
event.preventDefault()
const nameExists = persons.some(person => person.name === newName);
if (nameExists) {
alert(`${newName} is already added to the phonebook`);
return // Estetään lisäys
}
const personObject = {
name: newName,
number: newNumber,
}
personService.create(personObject).then(returnedPerson => {
setPersons(persons.concat(returnedPerson))
setNewName('')
setNewNumber('')
})
.catch(error => {
alert(
`the person '${personObject.content}' was already deleted from server`
)
setPersons(persons.filter(p => p.id !== personObject.id))
})
}
const deletePerson = (personId) => {
const personToDelete = persons.find(person => person.id === personId);
if (window.confirm(`Delete ${personToDelete.name}?`)) {
personService
.remove(personId)
.then(() => {
setPersons(persons.filter(person => person.id !== personId))
})
.catch(error => {
console.error('Error deleting person:', error)
})
}
}
const handleNameChange = (event) => {
console.log(event.target.value)
setNewName(event.target.value)
}
const handleNumberChange = (event) => {
console.log(event.target.value)
setNewNumber(event.target.value)
}
return (
<div>
<h2>Phonebook</h2>
<h3>Add a new</h3>
<PersonForm
addPerson={addPerson}
newName={newName}
handleNameChange={handleNameChange}
newNumber={newNumber}
handleNumberChange={handleNumberChange}
/>
<div>debug: {newName}</div>
<h2>Numbers</h2>
<Persons persons={persons} onDelete={deletePerson} />
</div>
)
}
export default App
This diff is collapsed.
0% Loading or .
You are about to add 0 people to the discussion. Proceed with caution.
Please register or to comment