loading...
13 | }
14 |
15 | const authors = result.data.allAuthors
16 |
17 | return (
18 | ()
9 |
10 | useEffect(() => {
11 | const fetchPatient = async () => {
12 | try {
13 | const patient = await axios.get(
14 | `http://localhost:3001/api/patients/${id}`
15 | )
16 | setPatient(patient.data)
17 | } catch (error) {
18 | console.error("Error fetching patient data:" + error)
19 | }
20 | }
21 |
22 | fetchPatient()
23 | }, [id])
24 |
25 | if (patient === undefined) {
26 | return Something went wrong...
27 | }
28 |
29 | return (
30 |
31 |
{patient.name}
32 |
ssh: {patient.ssn}
33 |
occupation: {patient.occupation}
34 |
gender: {patient.gender}
35 |
loading...
14 | }
15 |
16 | const books = result.data.allBooks
17 |
18 | const filter = me.data.me.favoriteGenre
19 |
20 | const filteredBooks = books.filter(book => book.genres.includes(filter))
21 |
22 | return (
23 |
24 |
books
25 | in your favorite genre
{filter}
26 |
27 |
28 |
29 | author
31 | published
32 |
33 | {filteredBooks.map(book => (
34 |
35 | {book.title}
36 | {book.author.name}
37 | {book.published}
38 |
39 | ))}
40 |
41 |
42 |
26 | {children}
27 |
28 | )
29 | }
30 |
31 | // helpers
32 |
33 | export const useNotificationValue = () => {
34 | const notificationAndDispatch = useContext(NotificationContext)
35 | return notificationAndDispatch[0]
36 | }
37 |
38 | export const useNotificationDispatch = () => {
39 | const notificationAndDispatch = useContext(NotificationContext)
40 | return notificationAndDispatch[1]
41 | }
42 |
43 | export default NotificationContext
44 |
--------------------------------------------------------------------------------
/part9/create-react-app/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "create-react-app",
3 | "version": "0.1.0",
4 | "private": true,
5 | "dependencies": {
6 | "@testing-library/jest-dom": "^5.16.5",
7 | "@testing-library/react": "^13.4.0",
8 | "@testing-library/user-event": "^13.5.0",
9 | "@types/jest": "^27.5.2",
10 | "@types/node": "^16.18.38",
11 | "@types/react": "^18.2.14",
12 | "@types/react-dom": "^18.2.6",
13 | "react": "^18.2.0",
14 | "react-dom": "^18.2.0",
15 | "react-scripts": "5.0.1",
16 | "typescript": "^4.9.5",
17 | "web-vitals": "^2.1.4"
18 | },
19 | "scripts": {
20 | "start": "react-scripts start",
21 | "build": "react-scripts build",
22 | "test": "react-scripts test",
23 | "eject": "react-scripts eject",
24 | "lint": "eslint './src/**/*.{ts,tsx}'"
25 | },
26 | "eslintConfig": {
27 | "extends": [
28 | "react-app",
29 | "react-app/jest"
30 | ]
31 | },
32 | "browserslist": {
33 | "production": [
34 | ">0.2%",
35 | "not dead",
36 | "not op_mini all"
37 | ],
38 | "development": [
39 | "last 1 chrome version",
40 | "last 1 firefox version",
41 | "last 1 safari version"
42 | ]
43 | }
44 | }
45 |
--------------------------------------------------------------------------------
/part5/bloglist-frontend/src/services/blogs.js:
--------------------------------------------------------------------------------
1 | import axios from "axios"
2 | const baseUrl = "/api/blogs"
3 |
4 | let token = null
5 |
6 | const setToken = newToken => {
7 | token = `bearer ${newToken}`
8 | }
9 |
10 | const getToken = () => {
11 | return token
12 | }
13 |
14 | const getAll = () => {
15 | const request = axios.get(baseUrl)
16 | return request.then(response => response.data)
17 | }
18 |
19 | const create = async newObject => {
20 | const config = { headers: { Authorization: token } }
21 |
22 | const response = await axios.post(baseUrl, newObject, config)
23 | return response.data
24 | }
25 |
26 | const addLike = async (newObject, id) => {
27 | const config = { headers: { Authorization: token } }
28 |
29 | const response = await axios.put(`${baseUrl}/${id}`, newObject, config)
30 | return response.data
31 | }
32 |
33 | const remove = async id => {
34 | const config = { headers: { Authorization: token } }
35 |
36 | const response = await axios.delete(`${baseUrl}/${id}`, config)
37 | return response.data
38 | }
39 |
40 | const blogService = { setToken, getAll, create, getToken, addLike, remove }
41 |
42 | export default blogService
43 |
--------------------------------------------------------------------------------
/part7/ultimate-hooks/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "ultimate-hooks",
3 | "version": "0.1.0",
4 | "private": true,
5 | "dependencies": {
6 | "@testing-library/jest-dom": "^5.16.5",
7 | "@testing-library/react": "^13.4.0",
8 | "@testing-library/user-event": "^13.5.0",
9 | "axios": "^1.3.2",
10 | "react": "^18.2.0",
11 | "react-dom": "^18.2.0",
12 | "react-scripts": "5.0.1",
13 | "web-vitals": "^2.1.4"
14 | },
15 | "scripts": {
16 | "start": "react-scripts start",
17 | "build": "react-scripts build",
18 | "test": "react-scripts test",
19 | "eject": "react-scripts eject",
20 | "server": "json-server --port=3005 --watch db.json"
21 | },
22 | "eslintConfig": {
23 | "extends": [
24 | "react-app",
25 | "react-app/jest"
26 | ]
27 | },
28 | "browserslist": {
29 | "production": [
30 | ">0.2%",
31 | "not dead",
32 | "not op_mini all"
33 | ],
34 | "development": [
35 | "last 1 chrome version",
36 | "last 1 firefox version",
37 | "last 1 safari version"
38 | ]
39 | },
40 | "devDependencies": {
41 | "json-server": "^0.17.1"
42 | }
43 | }
44 |
--------------------------------------------------------------------------------
/part6/anecdotes-redux/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "redux-anecdotes",
3 | "version": "0.1.0",
4 | "private": true,
5 | "dependencies": {
6 | "@reduxjs/toolkit": "^1.9.2",
7 | "@testing-library/jest-dom": "^5.16.5",
8 | "@testing-library/react": "^13.4.0",
9 | "@testing-library/user-event": "^13.5.0",
10 | "axios": "^1.3.2",
11 | "react": "^18.2.0",
12 | "react-dom": "^18.2.0",
13 | "react-redux": "^8.0.5",
14 | "react-scripts": "5.0.1",
15 | "redux": "^4.2.0",
16 | "web-vitals": "^2.1.4"
17 | },
18 | "scripts": {
19 | "start": "react-scripts start",
20 | "build": "react-scripts build",
21 | "test": "react-scripts test",
22 | "eject": "react-scripts eject",
23 | "server": "json-server --watch db.json --port 3001"
24 | },
25 | "eslintConfig": {
26 | "extends": [
27 | "react-app",
28 | "react-app/jest"
29 | ]
30 | },
31 | "browserslist": {
32 | "production": [
33 | ">0.2%",
34 | "not dead",
35 | "not op_mini all"
36 | ],
37 | "development": [
38 | "last 1 chrome version",
39 | "last 1 firefox version",
40 | "last 1 safari version"
41 | ]
42 | },
43 | "devDependencies": {
44 | "json-server": "^0.17.1"
45 | }
46 | }
47 |
--------------------------------------------------------------------------------
/part7/bloglist/redux/bloglist-frontend/.eslintrc.json:
--------------------------------------------------------------------------------
1 | {
2 | "env": {
3 | "browser": true,
4 | "es6": true,
5 | "jest/globals": true,
6 | "node": true
7 | },
8 | "extends": [
9 | "eslint:recommended",
10 | "plugin:react/recommended"
11 | ],
12 | "parserOptions": {
13 | "ecmaFeatures": {
14 | "jsx": true
15 | },
16 | "ecmaVersion": 2018,
17 | "sourceType": "module"
18 | },
19 | "plugins": [
20 | "react",
21 | "jest"
22 | ],
23 | "rules": {
24 | "no-unused-vars": "warn",
25 | "indent": [
26 | "error",
27 | "tab"
28 | ],
29 | "linebreak-style": [
30 | "error",
31 | "unix"
32 | ],
33 | "quotes": [
34 | "error",
35 | "double"
36 | ],
37 | "semi": [
38 | "error",
39 | "never"
40 | ],
41 | "eqeqeq": "error",
42 | "no-trailing-spaces": "off",
43 | "object-curly-spacing": [
44 | "error",
45 | "always"
46 | ],
47 | "arrow-spacing": [
48 | "error",
49 | {
50 | "before": true,
51 | "after": true
52 | }
53 | ],
54 | "no-console": 0,
55 | "react/prop-types": 0,
56 | "react/react-in-jsx-scope": "off"
57 | },
58 | "settings": {
59 | "react": {
60 | "version": "detect"
61 | }
62 | }
63 | }
--------------------------------------------------------------------------------
/part2/phonebook/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "phonebook",
3 | "version": "0.1.0",
4 | "private": true,
5 | "dependencies": {
6 | "@testing-library/jest-dom": "^5.16.4",
7 | "@testing-library/react": "^13.3.0",
8 | "@testing-library/user-event": "^13.5.0",
9 | "axios": "^0.27.2",
10 | "react": "^18.2.0",
11 | "react-dom": "^18.2.0",
12 | "react-scripts": "5.0.1",
13 | "web-vitals": "^2.1.4"
14 | },
15 | "scripts": {
16 | "start": "react-scripts start",
17 | "build": "react-scripts build",
18 | "test": "react-scripts test",
19 | "eject": "react-scripts eject",
20 | "server": "json-server -p3001 --watch db.json"
21 | },
22 | "proxy": "http://localhost:3001",
23 | "eslintConfig": {
24 | "extends": [
25 | "react-app",
26 | "react-app/jest"
27 | ]
28 | },
29 | "browserslist": {
30 | "production": [
31 | ">0.2%",
32 | "not dead",
33 | "not op_mini all"
34 | ],
35 | "development": [
36 | "last 1 chrome version",
37 | "last 1 firefox version",
38 | "last 1 safari version"
39 | ]
40 | },
41 | "devDependencies": {
42 | "json-server": "^0.17.0"
43 | }
44 | }
45 |
--------------------------------------------------------------------------------
/part5/bloglist-frontend/.eslintrc.json:
--------------------------------------------------------------------------------
1 | {
2 | "env": {
3 | "browser": true,
4 | "es6": true,
5 | "jest/globals": true,
6 | "node": true,
7 | "cypress/globals": true
8 | },
9 | "extends": [
10 | "eslint:recommended",
11 | "plugin:react/recommended"
12 | ],
13 | "parserOptions": {
14 | "ecmaFeatures": {
15 | "jsx": true
16 | },
17 | "ecmaVersion": 2018,
18 | "sourceType": "module"
19 | },
20 | "plugins": [
21 | "react",
22 | "jest",
23 | "cypress/globals"
24 | ],
25 | "rules": {
26 | "indent": [
27 | "error",
28 | "tab"
29 | ],
30 | "linebreak-style": [
31 | "error",
32 | "unix"
33 | ],
34 | "quotes": [
35 | "error",
36 | "double"
37 | ],
38 | "semi": [
39 | "error",
40 | "never"
41 | ],
42 | "eqeqeq": "error",
43 | "no-trailing-spaces": "error",
44 | "object-curly-spacing": [
45 | "error",
46 | "always"
47 | ],
48 | "arrow-spacing": [
49 | "error",
50 | {
51 | "before": true,
52 | "after": true
53 | }
54 | ],
55 | "no-console": 0,
56 | "react/prop-types": 0,
57 | "react/react-in-jsx-scope": "off"
58 | },
59 | "settings": {
60 | "react": {
61 | "version": "detect"
62 | }
63 | }
64 | }
--------------------------------------------------------------------------------
/part6/unicafe-redux/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "unicafe",
3 | "version": "0.1.0",
4 | "private": true,
5 | "dependencies": {
6 | "@reduxjs/toolkit": "^1.9.2",
7 | "@testing-library/jest-dom": "^5.16.4",
8 | "@testing-library/react": "^13.3.0",
9 | "@testing-library/user-event": "^13.5.0",
10 | "react": "^18.2.0",
11 | "react-dom": "^18.2.0",
12 | "react-redux": "^8.0.5",
13 | "react-scripts": "5.0.1",
14 | "redux": "^4.2.1",
15 | "web-vitals": "^2.1.4"
16 | },
17 | "scripts": {
18 | "start": "react-scripts start",
19 | "build": "react-scripts build",
20 | "test": "react-scripts test",
21 | "eject": "react-scripts eject"
22 | },
23 | "eslintConfig": {
24 | "extends": [
25 | "react-app",
26 | "react-app/jest"
27 | ]
28 | },
29 | "browserslist": {
30 | "production": [
31 | ">0.2%",
32 | "not dead",
33 | "not op_mini all"
34 | ],
35 | "development": [
36 | "last 1 chrome version",
37 | "last 1 firefox version",
38 | "last 1 safari version"
39 | ]
40 | },
41 | "devDependencies": {
42 | "@redux-devtools/core": "^3.13.1",
43 | "deep-freeze": "^0.0.1"
44 | }
45 | }
46 |
--------------------------------------------------------------------------------
/part5/bloglist-frontend/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "frontend",
3 | "version": "0.1.0",
4 | "private": true,
5 | "dependencies": {
6 | "@testing-library/jest-dom": "^5.16.4",
7 | "@testing-library/react": "^13.1.1",
8 | "@testing-library/user-event": "^14.1.1",
9 | "axios": "^0.27.2",
10 | "prop-types": "^15.8.1",
11 | "react": "^18.1.0",
12 | "react-dom": "^18.1.0",
13 | "react-scripts": "5.0.1",
14 | "web-vitals": "^2.1.4"
15 | },
16 | "scripts": {
17 | "start": "react-scripts start",
18 | "build": "react-scripts build",
19 | "test": "react-scripts test",
20 | "eject": "react-scripts eject",
21 | "cypress:open": "cypress open"
22 | },
23 | "eslintConfig": {
24 | "extends": [
25 | "react-app",
26 | "react-app/jest"
27 | ]
28 | },
29 | "browserslist": {
30 | "production": [
31 | ">0.2%",
32 | "not dead",
33 | "not op_mini all"
34 | ],
35 | "development": [
36 | "last 1 chrome version",
37 | "last 1 firefox version",
38 | "last 1 safari version"
39 | ]
40 | },
41 | "proxy": "http://localhost:3003",
42 | "devDependencies": {
43 | "cypress": "^12.5.1",
44 | "eslint-plugin-cypress": "^2.12.1",
45 | "eslint-plugin-jest": "^26.8.7"
46 | }
47 | }
48 |
--------------------------------------------------------------------------------
/part7/bloglist/context-react-query/bloglist-frontend/.eslintrc.json:
--------------------------------------------------------------------------------
1 | {
2 | "env": {
3 | "browser": true,
4 | "es6": true,
5 | "jest/globals": true,
6 | "node": true
7 | },
8 | "extends": [
9 | "eslint:recommended",
10 | "plugin:react/recommended"
11 | ],
12 | "parserOptions": {
13 | "ecmaFeatures": {
14 | "jsx": true
15 | },
16 | "ecmaVersion": 2018,
17 | "sourceType": "module"
18 | },
19 | "plugins": [
20 | "react",
21 | "jest"
22 | ],
23 | "rules": {
24 | "indent": [
25 | "error",
26 | "tab",
27 | {
28 | "SwitchCase": 1
29 | }
30 | ],
31 | "linebreak-style": [
32 | "error",
33 | "unix"
34 | ],
35 | "quotes": [
36 | "error",
37 | "double"
38 | ],
39 | "semi": [
40 | "error",
41 | "never"
42 | ],
43 | "eqeqeq": "error",
44 | "no-trailing-spaces": "error",
45 | "object-curly-spacing": [
46 | "error",
47 | "always"
48 | ],
49 | "arrow-spacing": [
50 | "error",
51 | {
52 | "before": true,
53 | "after": true
54 | }
55 | ],
56 | "no-console": 0,
57 | "react/prop-types": 0,
58 | "react/react-in-jsx-scope": "off"
59 | },
60 | "settings": {
61 | "react": {
62 | "version": "detect"
63 | }
64 | }
65 | }
--------------------------------------------------------------------------------
/part7/bloglist/context-react-query/bloglist-frontend/src/NotificationContext.js:
--------------------------------------------------------------------------------
1 | import { createContext, useReducer, useContext } from "react"
2 |
3 | const notificationReducer = (state, action) => {
4 | switch (action.type) {
5 | case "SHOW":
6 | return [action.data[0], action.data[1]]
7 | case "HIDE":
8 | return ["", true]
9 | default:
10 | return state
11 | }
12 | }
13 |
14 | const NotificationContext = createContext()
15 |
16 | export const NotificationContextProvider = ({ children }) => {
17 | const [notification, notificationDispatch] = useReducer(
18 | notificationReducer,
19 | ["", true]
20 | )
21 |
22 | return (
23 |
26 | {children}
27 |
28 | )
29 | }
30 |
31 | // helpers
32 |
33 | export const useNotificationValue = () => {
34 | const notificationAndDispatch = useContext(NotificationContext)
35 | return notificationAndDispatch[0]
36 | }
37 |
38 | export const useNotificationDispatch = () => {
39 | const notificationAndDispatch = useContext(NotificationContext)
40 | return notificationAndDispatch[1]
41 | }
42 |
43 | export default NotificationContext
44 |
--------------------------------------------------------------------------------
/part6/anecdotes-redux/db.json:
--------------------------------------------------------------------------------
1 | {
2 | "anecdotes": [
3 | {
4 | "content": "If it hurts, do it more often",
5 | "id": "47145",
6 | "votes": 4
7 | },
8 | {
9 | "content": "Adding manpower to a late software project makes it later!",
10 | "id": "21149",
11 | "votes": 0
12 | },
13 | {
14 | "content": "The first 90 percent of the code accounts for the first 10 percent of the development time...The remaining 10 percent of the code accounts for the other 90 percent of the development time.",
15 | "id": "69581",
16 | "votes": 0
17 | },
18 | {
19 | "content": "Any fool can write code that a computer can understand. Good programmers write code that humans can understand.",
20 | "id": "36975",
21 | "votes": 0
22 | },
23 | {
24 | "content": "Premature optimization is the root of all evil.",
25 | "id": "25170",
26 | "votes": 0
27 | },
28 | {
29 | "content": "Debugging is twice as hard as writing the code in the first place. Therefore, if you write the code as cleverly as possible, you are, by definition, not smart enough to debug it.",
30 | "id": "98312",
31 | "votes": 0
32 | }
33 | ]
34 | }
--------------------------------------------------------------------------------
/part7/bloglist/context-react-query/bloglist-frontend/src/services/blogs.js:
--------------------------------------------------------------------------------
1 | import axios from "axios"
2 | const baseUrl = "/api/blogs"
3 |
4 | let token = null
5 |
6 | const setToken = newToken => {
7 | token = `bearer ${newToken}`
8 | }
9 |
10 | const getToken = () => {
11 | return token
12 | }
13 |
14 | const getAll = () => {
15 | const request = axios.get(baseUrl)
16 | return request.then(response => response.data)
17 | }
18 |
19 | const create = async newObject => {
20 | const config = { headers: { Authorization: token } }
21 |
22 | const response = await axios.post(baseUrl, newObject, config)
23 | return response.data
24 | }
25 |
26 | const addLike = async newObject => {
27 | const config = { headers: { Authorization: token } }
28 |
29 | const response = await axios.put(
30 | `${baseUrl}/${newObject.id}`,
31 | newObject,
32 | config
33 | )
34 | return response.data
35 | }
36 |
37 | const remove = async id => {
38 | const config = { headers: { Authorization: token } }
39 |
40 | const response = await axios.delete(`${baseUrl}/${id}`, config)
41 | return response.data
42 | }
43 |
44 | const blogService = { setToken, getAll, create, getToken, addLike, remove }
45 |
46 | export default blogService
47 |
--------------------------------------------------------------------------------
/part9/flight-diary/frontend/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "frontend",
3 | "version": "0.1.0",
4 | "private": true,
5 | "dependencies": {
6 | "@testing-library/jest-dom": "^5.16.5",
7 | "@testing-library/react": "^13.4.0",
8 | "@testing-library/user-event": "^13.5.0",
9 | "@types/jest": "^27.5.2",
10 | "@types/node": "^16.18.38",
11 | "@types/react": "^18.2.14",
12 | "@types/react-dom": "^18.2.6",
13 | "axios": "^1.4.0",
14 | "react": "^18.2.0",
15 | "react-dom": "^18.2.0",
16 | "react-scripts": "5.0.1",
17 | "typescript": "^4.9.5",
18 | "web-vitals": "^2.1.4"
19 | },
20 | "scripts": {
21 | "start": "react-scripts start",
22 | "build": "react-scripts build",
23 | "test": "react-scripts test",
24 | "eject": "react-scripts eject",
25 | "lint": "eslint './src/**/*.{ts,tsx}'"
26 | },
27 | "eslintConfig": {
28 | "extends": [
29 | "react-app",
30 | "react-app/jest"
31 | ]
32 | },
33 | "browserslist": {
34 | "production": [
35 | ">0.2%",
36 | "not dead",
37 | "not op_mini all"
38 | ],
39 | "development": [
40 | "last 1 chrome version",
41 | "last 1 firefox version",
42 | "last 1 safari version"
43 | ]
44 | }
45 | }
--------------------------------------------------------------------------------
/part2/courseinfo/src/App.js:
--------------------------------------------------------------------------------
1 | import Course from "./Course";
2 |
3 | const Courses = ({ courses }) =>
4 | courses.map((course) => {props.course.name}
3 | }
4 |
5 | const Part = props => {
6 | return (
7 |
8 | {props.part.name} {props.part.exercises}
9 |
10 | )
11 | }
12 |
13 | const Content = props => {
14 | return (
15 |
20 | )
21 | }
22 |
23 | const Total = props => {
24 | return (
25 |
26 | Number of exercises{" "}
27 | {props.course.parts[0].exercises +
28 | props.course.parts[1].exercises +
29 | props.course.parts[2].exercises}
30 |
31 | )
32 | }
33 |
34 | const App = () => {
35 | const course = {
36 | name: "Half Stack application development",
37 | parts: [
38 | {
39 | name: "Fundamentals of React",
40 | exercises: 10,
41 | },
42 | {
43 | name: "Using props to pass data",
44 | exercises: 7,
45 | },
46 | {
47 | name: "State of a component",
48 | exercises: 14,
49 | },
50 | ],
51 | }
52 |
53 | return (
54 |
55 |
56 |
59 | )
60 | }
61 |
62 | export default App
63 |
--------------------------------------------------------------------------------
/part7/bloglist/redux/bloglist-frontend/src/tests/BlogForm.test.js:
--------------------------------------------------------------------------------
1 | import React from "react"
2 | import "@testing-library/jest-dom/extend-expect"
3 | import { render, fireEvent } from "@testing-library/react"
4 | import BlogForm from "../components/BlogForm"
5 |
6 | describe("create new
21 |
53 |
54 | )
55 | }
56 |
57 | export default NoteForm
58 |
--------------------------------------------------------------------------------
/part7/bloglist/redux/bloglist-backend/app.js:
--------------------------------------------------------------------------------
1 | const config = require("./utils/config")
2 | const express = require("express")
3 | require("express-async-errors")
4 | const app = express()
5 | const cors = require("cors")
6 | const blogsRouter = require("./controllers/blogs")
7 | const usersRouter = require("./controllers/users")
8 | const middleware = require("./utils/middleware")
9 | const loginRouter = require("./controllers/login")
10 | const testingRouter = require("./controllers/testing")
11 | const logger = require("./utils/logger")
12 | const mongoose = require("mongoose")
13 |
14 | mongoose
15 | .connect(config.MONGODB_URI)
16 | .then(() => {
17 | logger.info("connected to MongoDB")
18 | })
19 | .catch(error => {
20 | logger.error("error connecting to MongoDB:", error.message)
21 | })
22 |
23 | app.use(cors())
24 | app.use(express.static("build"))
25 | app.use(express.json())
26 |
27 | app.use(middleware.requestLogger)
28 | app.use(middleware.tokenExtractor)
29 |
30 | app.use("/api/blogs", middleware.userExtractor, blogsRouter)
31 | app.use("/api/users", usersRouter)
32 | app.use("/api/login", loginRouter)
33 |
34 | if (process.env.NODE_ENV === "test") {
35 | app.use("/api/testing", testingRouter)
36 | }
37 |
38 | app.use(middleware.unknowEndpoint)
39 | app.use(middleware.errorHandler)
40 |
41 | module.exports = app
42 |
--------------------------------------------------------------------------------
/part7/bloglist/context-react-query/bloglist-backend/app.js:
--------------------------------------------------------------------------------
1 | const config = require("./utils/config")
2 | const express = require("express")
3 | require("express-async-errors")
4 | const app = express()
5 | const cors = require("cors")
6 | const blogsRouter = require("./controllers/blogs")
7 | const usersRouter = require("./controllers/users")
8 | const middleware = require("./utils/middleware")
9 | const loginRouter = require("./controllers/login")
10 | const testingRouter = require("./controllers/testing")
11 | const logger = require("./utils/logger")
12 | const mongoose = require("mongoose")
13 |
14 | mongoose
15 | .connect(config.MONGODB_URI)
16 | .then(() => {
17 | logger.info("connected to MongoDB")
18 | })
19 | .catch(error => {
20 | logger.error("error connecting to MongoDB:", error.message)
21 | })
22 |
23 | app.use(cors())
24 | app.use(express.static("build"))
25 | app.use(express.json())
26 |
27 | app.use(middleware.requestLogger)
28 | app.use(middleware.tokenExtractor)
29 |
30 | app.use("/api/blogs", middleware.userExtractor, blogsRouter)
31 | app.use("/api/users", usersRouter)
32 | app.use("/api/login", loginRouter)
33 |
34 | if (process.env.NODE_ENV === "test") {
35 | app.use("/api/testing", testingRouter)
36 | }
37 |
38 | app.use(middleware.unknowEndpoint)
39 | app.use(middleware.errorHandler)
40 |
41 | module.exports = app
42 |
--------------------------------------------------------------------------------
/part9/patientor/backend/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "backend",
3 | "version": "1.0.0",
4 | "description": "",
5 | "main": "index.js",
6 | "scripts": {
7 | "tsc": "tsc",
8 | "dev": "ts-node-dev src/index.ts",
9 | "lint": "eslint --ext .ts .",
10 | "test": "echo \"Error: no test specified\" && exit 1"
11 | },
12 | "author": "Juan Esteban Camargo",
13 | "license": "ISC",
14 | "devDependencies": {
15 | "@types/aria-query": "^5.0.4",
16 | "@types/babel__core": "^7.20.5",
17 | "@types/babel__generator": "^7.6.8",
18 | "@types/babel__template": "^7.4.4",
19 | "@types/babel__traverse": "^7.20.6",
20 | "@types/bonjour": "^3.5.13",
21 | "@types/cors": "^2.8.13",
22 | "@types/estree": "^1.0.6",
23 | "@types/express": "^4.17.17",
24 | "@types/graceful-fs": "^4.1.9",
25 | "@types/node": "^22.7.4",
26 | "@types/prettier": "^3.0.0",
27 | "@types/testing-library__jest-dom": "^6.0.0",
28 | "@types/trusted-types": "^2.0.7",
29 | "@types/uuid": "^9.0.2",
30 | "@typescript-eslint/eslint-plugin": "^5.59.8",
31 | "@typescript-eslint/parser": "^5.59.8",
32 | "eslint": "^8.41.0",
33 | "ts-node-dev": "^2.0.0",
34 | "typescript": "^5.0.4"
35 | },
36 | "dependencies": {
37 | "cors": "^2.8.5",
38 | "express": "^4.18.2",
39 | "uuid": "^9.0.0"
40 | }
41 | }
42 |
--------------------------------------------------------------------------------
/part8/library-frontend/src/queries.js:
--------------------------------------------------------------------------------
1 | import { gql } from "@apollo/client"
2 |
3 | export const ALL_AUTHORS = gql`
4 | query {
5 | allAuthors {
6 | name
7 | born
8 | bookCount
9 | }
10 | }
11 | `
12 |
13 | export const ALL_BOOKS = gql`
14 | query AllBooks($genre: String) {
15 | allBooks(genre: $genre) {
16 | title
17 | author {
18 | name
19 | }
20 | published
21 | genres
22 | }
23 | }
24 | `
25 |
26 | export const ADD_BOOK = gql`
27 | mutation addBook(
28 | $title: String!
29 | $author: String!
30 | $published: Int!
31 | $genres: [String!]!
32 | ) {
33 | addBook(
34 | title: $title
35 | author: $author
36 | published: $published
37 | genres: $genres
38 | ) {
39 | title
40 | author {
41 | name
42 | }
43 | published
44 | genres
45 | }
46 | }
47 | `
48 |
49 | export const EDIT_AUTHOR = gql`
50 | mutation EditAuthor($name: String!, $setBornTo: Int!) {
51 | editAuthor(name: $name, setBornTo: $setBornTo) {
52 | born
53 | name
54 | }
55 | }
56 | `
57 |
58 | export const LOGIN = gql`
59 | mutation Login($username: String!, $password: String!) {
60 | login(username: $username, password: $password) {
61 | value
62 | }
63 | }
64 | `
65 |
66 | export const ME = gql`
67 | query {
68 | me {
69 | username
70 | favoriteGenre
71 | id
72 | }
73 | }
74 | `
75 |
--------------------------------------------------------------------------------
/part7/bloglist/context-react-query/bloglist-frontend/src/components/BlogForm.js:
--------------------------------------------------------------------------------
1 | import { useState } from "react"
2 |
3 | const NoteForm = ({ createBlog }) => {
4 | const [title, setTitle] = useState("")
5 | const [author, setAuthor] = useState("")
6 | const [url, setUrl] = useState("")
7 |
8 | const addBlog = event => {
9 | event.preventDefault()
10 | const blog = { title, author, url }
11 | createBlog(blog)
12 |
13 | setAuthor("")
14 | setTitle("")
15 | setUrl("")
16 | }
17 |
18 | return (
19 | <>
20 | create new
21 |
53 |
54 | )
55 | }
56 |
57 | export default NoteForm
58 |
--------------------------------------------------------------------------------
/part9/patientor/frontend/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "front-new",
3 | "version": "0.1.0",
4 | "private": true,
5 | "dependencies": {
6 | "@emotion/react": "^11.10.5",
7 | "@emotion/styled": "^11.10.5",
8 | "@mui/icons-material": "^5.11.0",
9 | "@mui/material": "^5.11.8",
10 | "@testing-library/jest-dom": "^5.16.5",
11 | "@testing-library/react": "^13.4.0",
12 | "@testing-library/user-event": "^13.5.0",
13 | "@types/jest": "^27.5.2",
14 | "@types/node": "^16.18.12",
15 | "@types/react": "^18.0.28",
16 | "@types/react-dom": "^18.0.10",
17 | "axios": "^1.3.2",
18 | "react": "^18.2.0",
19 | "react-dom": "^18.2.0",
20 | "react-router-dom": "^6.8.1",
21 | "react-scripts": "5.0.1",
22 | "typescript": "^4.9.5",
23 | "web-vitals": "^2.1.4"
24 | },
25 | "scripts": {
26 | "start": "react-scripts start",
27 | "build": "react-scripts build",
28 | "test": "react-scripts test",
29 | "eject": "react-scripts eject"
30 | },
31 | "eslintConfig": {
32 | "extends": [
33 | "react-app",
34 | "react-app/jest"
35 | ]
36 | },
37 | "browserslist": {
38 | "production": [
39 | ">0.2%",
40 | "not dead",
41 | "not op_mini all"
42 | ],
43 | "development": [
44 | "last 1 chrome version",
45 | "last 1 firefox version",
46 | "last 1 safari version"
47 | ]
48 | },
49 | "devDependencies": {
50 | "@types/axios": "^0.14.0"
51 | }
52 | }
53 |
--------------------------------------------------------------------------------
/part6/anecdotes-redux/src/components/AnecdoteList.js:
--------------------------------------------------------------------------------
1 | import { useDispatch, useSelector } from "react-redux"
2 | import { voteAnecdote } from "../reducers/anecdoteReducer"
3 | import {
4 | setNotificationTime,
5 | removeNotification,
6 | } from "../reducers/notificationReducer"
7 |
8 | const AnecdoteList = () => {
9 | const anecdotes = useSelector(state => state.anecdotes)
10 | const filter = useSelector(state => state.filter)
11 | const dispatch = useDispatch()
12 |
13 | const vote = id => {
14 | dispatch(voteAnecdote(id))
15 | dispatch(
16 | setNotificationTime(
17 | `you voted '${anecdotes.find(a => a.id === id).content}'`,
18 | 5
19 | )
20 | )
21 | setTimeout(() => {
22 | dispatch(removeNotification())
23 | }, 5 * 1000)
24 | }
25 | return (
26 | <>
27 | {anecdotes
28 | .filter(anecdote => {
29 | return filter === ""
30 | ? true
31 | : anecdote.content.includes(filter)
32 | })
33 | .sort((x, y) => {
34 | if (x.votes > y.votes) return -1
35 | else return 1
36 | })
37 | .map(anecdote => (
38 |
39 |
{anecdote.content}
40 |
41 | has {anecdote.votes}
42 | vote(anecdote.id)}>
43 | vote
44 |
45 |
46 |
36 | {blog.title} {blog.author}
37 |
38 | //
39 | // {blog.title} {blog.author}
40 | // hide
41 | // like
46 | // remove
51 | // )}
52 | //
53 | )
54 | }
55 |
56 | export default Blog
57 |
--------------------------------------------------------------------------------
/part6/anecdotes-query/src/components/AnecdoteForm.js:
--------------------------------------------------------------------------------
1 | import { useMutation, useQueryClient } from "react-query"
2 | import { createAnecdote } from "../requests"
3 | import { useNotificationDispatch } from "../NotificationContext"
4 |
5 | const AnecdoteForm = () => {
6 | const queryClient = useQueryClient()
7 | const notificationDispatch = useNotificationDispatch()
8 |
9 | const newAnecdoteMutation = useMutation(createAnecdote, {
10 | onSuccess: () => {
11 | queryClient.invalidateQueries("anecdotes")
12 | },
13 | })
14 |
15 | const onCreate = event => {
16 | event.preventDefault()
17 | const content = event.target.anecdote.value
18 | event.target.anecdote.value = ""
19 | newAnecdoteMutation.mutate(
20 | { content, votes: 0 },
21 | {
22 | onSuccess: () => {
23 | notificationDispatch({
24 | type: "SHOW",
25 | data: `you created: '${content}'`,
26 | })
27 | setTimeout(() => {
28 | notificationDispatch({ type: "HIDE" })
29 | }, 5000)
30 | },
31 | onError: () => {
32 | notificationDispatch({
33 | type: "SHOW",
34 | data: `an error occurred while creating '${content}', use at least 5 characters for`,
35 | })
36 | setTimeout(() => {
37 | notificationDispatch({ type: "HIDE" })
38 | }, 5000)
39 | },
40 | }
41 | )
42 | }
43 |
44 | return (
45 |
46 |
create new
47 |
51 |
52 | )
53 | }
54 |
55 | export default AnecdoteForm
56 |
--------------------------------------------------------------------------------
/part8/library-frontend/src/components/Login.js:
--------------------------------------------------------------------------------
1 | import { useMutation } from "@apollo/client"
2 | import { useState } from "react"
3 | import { LOGIN } from "../queries"
4 |
5 | const Login = ({ show, setPage }) => {
6 | const [username, setUsername] = useState("")
7 | const [password, setPassword] = useState("")
8 | const [login] = useMutation(LOGIN, {
9 | onError: error => {
10 | console.log(error.graphQLErrors[0].message)
11 | },
12 | })
13 |
14 | if (!show) {
15 | return null
16 | }
17 |
18 | const submit = async event => {
19 | event.preventDefault()
20 |
21 | try {
22 | const result = await login({
23 | variables: { username, password },
24 | })
25 |
26 | if (result.data.login !== null) {
27 | const token = result.data.login.value
28 | localStorage.setItem("library-user-token", token)
29 | setPage("authors")
30 | } else {
31 | console.log("Wrong credentials")
32 | }
33 | } catch (error) {
34 | console.log(error)
35 | }
36 | setUsername("")
37 | setPassword("")
38 | }
39 |
40 | return (
41 |
61 | )
62 | }
63 |
64 | export default Login
65 |
--------------------------------------------------------------------------------
/part7/bloglist/redux/bloglist-frontend/src/tests/Blog.test.js:
--------------------------------------------------------------------------------
1 | import React from "react"
2 | import "@testing-library/jest-dom/extend-expect"
3 | import { render, screen } from "@testing-library/react"
4 | import userEvent from "@testing-library/user-event"
5 | import Blog from "../components/Blog"
6 |
7 | describe("
53 |
54 |
57 | )
58 | }
59 |
60 | export default App
61 |
--------------------------------------------------------------------------------
/part9/create-react-app/src/components/Content.tsx:
--------------------------------------------------------------------------------
1 | import { CoursePart } from "../types"
2 |
3 | const assertNever = (value: never): never => {
4 | throw new Error(
5 | `Unhandled discriminated union member: ${JSON.stringify(value)}`
6 | )
7 | }
8 |
9 | const Part = ({ part }: { part: CoursePart }) => {
10 | switch (part.kind) {
11 | case "basic":
12 | return (
13 |
14 |
15 | {part.name} {part.exerciseCount}
16 |
17 | {part.description}
19 |
20 | )
21 | case "group":
22 | return (
23 |
24 |
25 | {part.name} {part.exerciseCount}
26 |
27 |
30 | )
31 | case "background":
32 | return (
33 |
34 |
35 | {part.name} {part.exerciseCount}
36 |
37 |
42 | )
43 | case "special":
44 | return (
45 |
46 |
47 | {part.name} {part.exerciseCount}
48 |
49 |
53 | )
54 | default:
55 | return assertNever(part)
56 | }
57 | }
58 |
59 | const Content = ({ courseParts }: { courseParts: CoursePart[] }) => {
60 | return (
61 | <>
62 | {courseParts.map((part, index) => (
63 |