AndrewTrieu/fullstack-open
Archived
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Upload 5.12

Browse Source
This commit is contained in:
Andrew Trieu
2023-06-21 09:57:08 +03:00
parent 8c37a7308b
commit bb55cbad5b
11 changed files with 463 additions and 168 deletions
Download Patch File Download Diff File Expand all files Collapse all files

3
part5/bloglist-frontend/.eslintignore Normal file
View File

@@ -0,0 +1,3 @@
node_modules
build
.eslintrc.js

35
part5/bloglist-frontend/.eslintrc.js Normal file
View File

@@ -0,0 +1,35 @@
/* eslint-env node */
module.exports = {
env: {
browser: true,
es6: true,
'jest/globals': true,
},
extends: ['eslint:recommended', 'plugin:react/recommended'],
parserOptions: {
ecmaFeatures: {
jsx: true,
},
ecmaVersion: 2018,
sourceType: 'module',
},
plugins: ['react', 'jest'],
rules: {
indent: ['error', 2],
'linebreak-style': ['error', 'unix'],
quotes: ['error', 'single'],
semi: ['error', 'never'],
eqeqeq: 'error',
'no-trailing-spaces': 'error',
'object-curly-spacing': ['error', 'always'],
'arrow-spacing': ['error', { before: true, after: true }],
'no-console': 0,
'react/prop-types': 0,
'react/react-in-jsx-scope': 'off',
},
settings: {
react: {
version: 'detect',
},
},
}

283
part5/bloglist-frontend/package-lock.json generated
View File

@@ -12,10 +12,14 @@
"@testing-library/react": "^13.4.0", "@testing-library/react": "^13.4.0",
"@testing-library/user-event": "^13.5.0", "@testing-library/user-event": "^13.5.0",
"axios": "^1.2.3", "axios": "^1.2.3",
"prop-types": "^15.8.1",
"react": "^18.2.0", "react": "^18.2.0",
"react-dom": "^18.2.0", "react-dom": "^18.2.0",
"react-scripts": "5.0.1", "react-scripts": "5.0.1",
"web-vitals": "^2.1.4" "web-vitals": "^2.1.4"
},
"devDependencies": {
"eslint-plugin-jest": "^27.2.2"
} }
}, },
"node_modules/@adobe/css-tools": { "node_modules/@adobe/css-tools": {
@@ -2125,6 +2129,20 @@
"postcss-selector-parser": "^6.0.10" "postcss-selector-parser": "^6.0.10"
} }
}, },
"node_modules/@eslint-community/eslint-utils": {
"version": "4.4.0",
"resolved": "https://registry.npmjs.org/@eslint-community/eslint-utils/-/eslint-utils-4.4.0.tgz",
"integrity": "sha512-1/sA4dwrzBAyeUoQ6oxahHKmrZvsnLCg4RfxW3ZFGGmQkSNQPFNLV9CUEFQP1x9EYXHTo5p6xdhZM1Ne9p/AfA==",
"dependencies": {
"eslint-visitor-keys": "^3.3.0"
},
"engines": {
"node": "^12.22.0 || ^14.17.0 || >=16.0.0"
},
"peerDependencies": {
"eslint": "^6.0.0 || ^7.0.0 || >=8.0.0"
}
},
"node_modules/@eslint/eslintrc": { "node_modules/@eslint/eslintrc": {
"version": "1.4.1", "version": "1.4.1",
"resolved": "https://registry.npmjs.org/@eslint/eslintrc/-/eslintrc-1.4.1.tgz", "resolved": "https://registry.npmjs.org/@eslint/eslintrc/-/eslintrc-1.4.1.tgz",
@@ -4189,11 +4207,11 @@
} }
}, },
"node_modules/@typescript-eslint/experimental-utils": { "node_modules/@typescript-eslint/experimental-utils": {
"version": "5.49.0", "version": "5.60.0",
"resolved": "https://registry.npmjs.org/@typescript-eslint/experimental-utils/-/experimental-utils-5.49.0.tgz", "resolved": "https://registry.npmjs.org/@typescript-eslint/experimental-utils/-/experimental-utils-5.60.0.tgz",
"integrity": "sha512-veLpCJLYn44Fru7mSvi2doxQMzMCOFSDYdMUQhAzaH1vFYq2RVNpecZ8d18Wh6UMv07yahXkiv/aShWE48iE9Q==", "integrity": "sha512-ovid3u7CNBrr0Ct35LUPkNYH4e+z4Kc6dPfSG99oMmH9SfoEoefq09uSnJI4mUb/UM7a/peVM03G+MzLxrD16g==",
"dependencies": { "dependencies": {
"@typescript-eslint/utils": "5.49.0" "@typescript-eslint/utils": "5.60.0"
}, },
"engines": { "engines": {
"node": "^12.22.0 || ^14.17.0 || >=16.0.0" "node": "^12.22.0 || ^14.17.0 || >=16.0.0"
@@ -4206,6 +4224,121 @@
"eslint": "^6.0.0 || ^7.0.0 || ^8.0.0" "eslint": "^6.0.0 || ^7.0.0 || ^8.0.0"
} }
}, },
"node_modules/@typescript-eslint/experimental-utils/node_modules/@typescript-eslint/scope-manager": {
"version": "5.60.0",
"resolved": "https://registry.npmjs.org/@typescript-eslint/scope-manager/-/scope-manager-5.60.0.tgz",
"integrity": "sha512-hakuzcxPwXi2ihf9WQu1BbRj1e/Pd8ZZwVTG9kfbxAMZstKz8/9OoexIwnmLzShtsdap5U/CoQGRCWlSuPbYxQ==",
"dependencies": {
"@typescript-eslint/types": "5.60.0",
"@typescript-eslint/visitor-keys": "5.60.0"
},
"engines": {
"node": "^12.22.0 || ^14.17.0 || >=16.0.0"
},
"funding": {
"type": "opencollective",
"url": "https://opencollective.com/typescript-eslint"
}
},
"node_modules/@typescript-eslint/experimental-utils/node_modules/@typescript-eslint/types": {
"version": "5.60.0",
"resolved": "https://registry.npmjs.org/@typescript-eslint/types/-/types-5.60.0.tgz",
"integrity": "sha512-ascOuoCpNZBccFVNJRSC6rPq4EmJ2NkuoKnd6LDNyAQmdDnziAtxbCGWCbefG1CNzmDvd05zO36AmB7H8RzKPA==",
"engines": {
"node": "^12.22.0 || ^14.17.0 || >=16.0.0"
},
"funding": {
"type": "opencollective",
"url": "https://opencollective.com/typescript-eslint"
}
},
"node_modules/@typescript-eslint/experimental-utils/node_modules/@typescript-eslint/typescript-estree": {
"version": "5.60.0",
"resolved": "https://registry.npmjs.org/@typescript-eslint/typescript-estree/-/typescript-estree-5.60.0.tgz",
"integrity": "sha512-R43thAuwarC99SnvrBmh26tc7F6sPa2B3evkXp/8q954kYL6Ro56AwASYWtEEi+4j09GbiNAHqYwNNZuNlARGQ==",
"dependencies": {
"@typescript-eslint/types": "5.60.0",
"@typescript-eslint/visitor-keys": "5.60.0",
"debug": "^4.3.4",
"globby": "^11.1.0",
"is-glob": "^4.0.3",
"semver": "^7.3.7",
"tsutils": "^3.21.0"
},
"engines": {
"node": "^12.22.0 || ^14.17.0 || >=16.0.0"
},
"funding": {
"type": "opencollective",
"url": "https://opencollective.com/typescript-eslint"
},
"peerDependenciesMeta": {
"typescript": {
"optional": true
}
}
},
"node_modules/@typescript-eslint/experimental-utils/node_modules/@typescript-eslint/utils": {
"version": "5.60.0",
"resolved": "https://registry.npmjs.org/@typescript-eslint/utils/-/utils-5.60.0.tgz",
"integrity": "sha512-ba51uMqDtfLQ5+xHtwlO84vkdjrqNzOnqrnwbMHMRY8Tqeme8C2Q8Fc7LajfGR+e3/4LoYiWXUM6BpIIbHJ4hQ==",
"dependencies": {
"@eslint-community/eslint-utils": "^4.2.0",
"@types/json-schema": "^7.0.9",
"@types/semver": "^7.3.12",
"@typescript-eslint/scope-manager": "5.60.0",
"@typescript-eslint/types": "5.60.0",
"@typescript-eslint/typescript-estree": "5.60.0",
"eslint-scope": "^5.1.1",
"semver": "^7.3.7"
},
"engines": {
"node": "^12.22.0 || ^14.17.0 || >=16.0.0"
},
"funding": {
"type": "opencollective",
"url": "https://opencollective.com/typescript-eslint"
},
"peerDependencies": {
"eslint": "^6.0.0 || ^7.0.0 || ^8.0.0"
}
},
"node_modules/@typescript-eslint/experimental-utils/node_modules/@typescript-eslint/visitor-keys": {
"version": "5.60.0",
"resolved": "https://registry.npmjs.org/@typescript-eslint/visitor-keys/-/visitor-keys-5.60.0.tgz",
"integrity": "sha512-wm9Uz71SbCyhUKgcaPRauBdTegUyY/ZWl8gLwD/i/ybJqscrrdVSFImpvUz16BLPChIeKBK5Fa9s6KDQjsjyWw==",
"dependencies": {
"@typescript-eslint/types": "5.60.0",
"eslint-visitor-keys": "^3.3.0"
},
"engines": {
"node": "^12.22.0 || ^14.17.0 || >=16.0.0"
},
"funding": {
"type": "opencollective",
"url": "https://opencollective.com/typescript-eslint"
}
},
"node_modules/@typescript-eslint/experimental-utils/node_modules/eslint-scope": {
"version": "5.1.1",
"resolved": "https://registry.npmjs.org/eslint-scope/-/eslint-scope-5.1.1.tgz",
"integrity": "sha512-2NxwbF/hZ0KpepYN0cNbo+FN6XoK7GaHlQhgx/hIZl6Va0bF45RQOOwhLIy8lQDbuCiadSLCBnH2CFYquit5bw==",
"dependencies": {
"esrecurse": "^4.3.0",
"estraverse": "^4.1.1"
},
"engines": {
"node": ">=8.0.0"
}
},
"node_modules/@typescript-eslint/experimental-utils/node_modules/estraverse": {
"version": "4.3.0",
"resolved": "https://registry.npmjs.org/estraverse/-/estraverse-4.3.0.tgz",
"integrity": "sha512-39nnKffWz8xN1BU/2c79n9nB9HDzo0niYUqx6xyqUnyoAnQyyWpOTdZEeiCch8BBu515t4wp9ZmgVfVhn9EBpw==",
"engines": {
"node": ">=4.0"
}
},
"node_modules/@typescript-eslint/parser": { "node_modules/@typescript-eslint/parser": {
"version": "5.49.0", "version": "5.49.0",
"resolved": "https://registry.npmjs.org/@typescript-eslint/parser/-/parser-5.49.0.tgz", "resolved": "https://registry.npmjs.org/@typescript-eslint/parser/-/parser-5.49.0.tgz",
@@ -7069,6 +7202,29 @@
"eslint": "^8.0.0" "eslint": "^8.0.0"
} }
}, },
"node_modules/eslint-config-react-app/node_modules/eslint-plugin-jest": {
"version": "25.7.0",
"resolved": "https://registry.npmjs.org/eslint-plugin-jest/-/eslint-plugin-jest-25.7.0.tgz",
"integrity": "sha512-PWLUEXeeF7C9QGKqvdSbzLOiLTx+bno7/HC9eefePfEb257QFHg7ye3dh80AZVkaa/RQsBB1Q/ORQvg2X7F0NQ==",
"dependencies": {
"@typescript-eslint/experimental-utils": "^5.0.0"
},
"engines": {
"node": "^12.13.0 || ^14.15.0 || >=16.0.0"
},
"peerDependencies": {
"@typescript-eslint/eslint-plugin": "^4.0.0 || ^5.0.0",
"eslint": "^6.0.0 || ^7.0.0 || ^8.0.0"
},
"peerDependenciesMeta": {
"@typescript-eslint/eslint-plugin": {
"optional": true
},
"jest": {
"optional": true
}
}
},
"node_modules/eslint-import-resolver-node": { "node_modules/eslint-import-resolver-node": {
"version": "0.3.7", "version": "0.3.7",
"resolved": "https://registry.npmjs.org/eslint-import-resolver-node/-/eslint-import-resolver-node-0.3.7.tgz", "resolved": "https://registry.npmjs.org/eslint-import-resolver-node/-/eslint-import-resolver-node-0.3.7.tgz",
@@ -7184,18 +7340,20 @@
} }
}, },
"node_modules/eslint-plugin-jest": { "node_modules/eslint-plugin-jest": {
"version": "25.7.0", "version": "27.2.2",
"resolved": "https://registry.npmjs.org/eslint-plugin-jest/-/eslint-plugin-jest-25.7.0.tgz", "resolved": "https://registry.npmjs.org/eslint-plugin-jest/-/eslint-plugin-jest-27.2.2.tgz",
"integrity": "sha512-PWLUEXeeF7C9QGKqvdSbzLOiLTx+bno7/HC9eefePfEb257QFHg7ye3dh80AZVkaa/RQsBB1Q/ORQvg2X7F0NQ==", "integrity": "sha512-euzbp06F934Z7UDl5ZUaRPLAc9MKjh0rMPERrHT7UhlCEwgb25kBj37TvMgWeHZVkR5I9CayswrpoaqZU1RImw==",
"dev": true,
"dependencies": { "dependencies": {
"@typescript-eslint/experimental-utils": "^5.0.0" "@typescript-eslint/utils": "^5.10.0"
}, },
"engines": { "engines": {
"node": "^12.13.0 || ^14.15.0 || >=16.0.0" "node": "^14.15.0 || ^16.10.0 || >=18.0.0"
}, },
"peerDependencies": { "peerDependencies": {
"@typescript-eslint/eslint-plugin": "^4.0.0 || ^5.0.0", "@typescript-eslint/eslint-plugin": "^5.0.0",
"eslint": "^6.0.0 || ^7.0.0 || ^8.0.0" "eslint": "^7.0.0 || ^8.0.0",
"jest": "*"
}, },
"peerDependenciesMeta": { "peerDependenciesMeta": {
"@typescript-eslint/eslint-plugin": { "@typescript-eslint/eslint-plugin": {
@@ -18486,6 +18644,14 @@
"integrity": "sha512-zJ6hb3FDgBbO8d2e83vg6zq7tNvDqSq9RwdwfzJ8tdm9JHNvANq2fqwyRn6mlpUb7CwTs5ILdUrGwi9Gk4vY5w==", "integrity": "sha512-zJ6hb3FDgBbO8d2e83vg6zq7tNvDqSq9RwdwfzJ8tdm9JHNvANq2fqwyRn6mlpUb7CwTs5ILdUrGwi9Gk4vY5w==",
"requires": {} "requires": {}
}, },
"@eslint-community/eslint-utils": {
"version": "4.4.0",
"resolved": "https://registry.npmjs.org/@eslint-community/eslint-utils/-/eslint-utils-4.4.0.tgz",
"integrity": "sha512-1/sA4dwrzBAyeUoQ6oxahHKmrZvsnLCg4RfxW3ZFGGmQkSNQPFNLV9CUEFQP1x9EYXHTo5p6xdhZM1Ne9p/AfA==",
"requires": {
"eslint-visitor-keys": "^3.3.0"
}
},
"@eslint/eslintrc": { "@eslint/eslintrc": {
"version": "1.4.1", "version": "1.4.1",
"resolved": "https://registry.npmjs.org/@eslint/eslintrc/-/eslintrc-1.4.1.tgz", "resolved": "https://registry.npmjs.org/@eslint/eslintrc/-/eslintrc-1.4.1.tgz",
@@ -20029,11 +20195,79 @@
} }
}, },
"@typescript-eslint/experimental-utils": { "@typescript-eslint/experimental-utils": {
"version": "5.49.0", "version": "5.60.0",
"resolved": "https://registry.npmjs.org/@typescript-eslint/experimental-utils/-/experimental-utils-5.49.0.tgz", "resolved": "https://registry.npmjs.org/@typescript-eslint/experimental-utils/-/experimental-utils-5.60.0.tgz",
"integrity": "sha512-veLpCJLYn44Fru7mSvi2doxQMzMCOFSDYdMUQhAzaH1vFYq2RVNpecZ8d18Wh6UMv07yahXkiv/aShWE48iE9Q==", "integrity": "sha512-ovid3u7CNBrr0Ct35LUPkNYH4e+z4Kc6dPfSG99oMmH9SfoEoefq09uSnJI4mUb/UM7a/peVM03G+MzLxrD16g==",
"requires": { "requires": {
"@typescript-eslint/utils": "5.49.0" "@typescript-eslint/utils": "5.60.0"
},
"dependencies": {
"@typescript-eslint/scope-manager": {
"version": "5.60.0",
"resolved": "https://registry.npmjs.org/@typescript-eslint/scope-manager/-/scope-manager-5.60.0.tgz",
"integrity": "sha512-hakuzcxPwXi2ihf9WQu1BbRj1e/Pd8ZZwVTG9kfbxAMZstKz8/9OoexIwnmLzShtsdap5U/CoQGRCWlSuPbYxQ==",
"requires": {
"@typescript-eslint/types": "5.60.0",
"@typescript-eslint/visitor-keys": "5.60.0"
}
},
"@typescript-eslint/types": {
"version": "5.60.0",
"resolved": "https://registry.npmjs.org/@typescript-eslint/types/-/types-5.60.0.tgz",
"integrity": "sha512-ascOuoCpNZBccFVNJRSC6rPq4EmJ2NkuoKnd6LDNyAQmdDnziAtxbCGWCbefG1CNzmDvd05zO36AmB7H8RzKPA=="
},
"@typescript-eslint/typescript-estree": {
"version": "5.60.0",
"resolved": "https://registry.npmjs.org/@typescript-eslint/typescript-estree/-/typescript-estree-5.60.0.tgz",
"integrity": "sha512-R43thAuwarC99SnvrBmh26tc7F6sPa2B3evkXp/8q954kYL6Ro56AwASYWtEEi+4j09GbiNAHqYwNNZuNlARGQ==",
"requires": {
"@typescript-eslint/types": "5.60.0",
"@typescript-eslint/visitor-keys": "5.60.0",
"debug": "^4.3.4",
"globby": "^11.1.0",
"is-glob": "^4.0.3",
"semver": "^7.3.7",
"tsutils": "^3.21.0"
}
},
"@typescript-eslint/utils": {
"version": "5.60.0",
"resolved": "https://registry.npmjs.org/@typescript-eslint/utils/-/utils-5.60.0.tgz",
"integrity": "sha512-ba51uMqDtfLQ5+xHtwlO84vkdjrqNzOnqrnwbMHMRY8Tqeme8C2Q8Fc7LajfGR+e3/4LoYiWXUM6BpIIbHJ4hQ==",
"requires": {
"@eslint-community/eslint-utils": "^4.2.0",
"@types/json-schema": "^7.0.9",
"@types/semver": "^7.3.12",
"@typescript-eslint/scope-manager": "5.60.0",
"@typescript-eslint/types": "5.60.0",
"@typescript-eslint/typescript-estree": "5.60.0",
"eslint-scope": "^5.1.1",
"semver": "^7.3.7"
}
},
"@typescript-eslint/visitor-keys": {
"version": "5.60.0",
"resolved": "https://registry.npmjs.org/@typescript-eslint/visitor-keys/-/visitor-keys-5.60.0.tgz",
"integrity": "sha512-wm9Uz71SbCyhUKgcaPRauBdTegUyY/ZWl8gLwD/i/ybJqscrrdVSFImpvUz16BLPChIeKBK5Fa9s6KDQjsjyWw==",
"requires": {
"@typescript-eslint/types": "5.60.0",
"eslint-visitor-keys": "^3.3.0"
}
},
"eslint-scope": {
"version": "5.1.1",
"resolved": "https://registry.npmjs.org/eslint-scope/-/eslint-scope-5.1.1.tgz",
"integrity": "sha512-2NxwbF/hZ0KpepYN0cNbo+FN6XoK7GaHlQhgx/hIZl6Va0bF45RQOOwhLIy8lQDbuCiadSLCBnH2CFYquit5bw==",
"requires": {
"esrecurse": "^4.3.0",
"estraverse": "^4.1.1"
}
},
"estraverse": {
"version": "4.3.0",
"resolved": "https://registry.npmjs.org/estraverse/-/estraverse-4.3.0.tgz",
"integrity": "sha512-39nnKffWz8xN1BU/2c79n9nB9HDzo0niYUqx6xyqUnyoAnQyyWpOTdZEeiCch8BBu515t4wp9ZmgVfVhn9EBpw=="
}
} }
}, },
"@typescript-eslint/parser": { "@typescript-eslint/parser": {
@@ -22227,6 +22461,16 @@
"eslint-plugin-react": "^7.27.1", "eslint-plugin-react": "^7.27.1",
"eslint-plugin-react-hooks": "^4.3.0", "eslint-plugin-react-hooks": "^4.3.0",
"eslint-plugin-testing-library": "^5.0.1" "eslint-plugin-testing-library": "^5.0.1"
},
"dependencies": {
"eslint-plugin-jest": {
"version": "25.7.0",
"resolved": "https://registry.npmjs.org/eslint-plugin-jest/-/eslint-plugin-jest-25.7.0.tgz",
"integrity": "sha512-PWLUEXeeF7C9QGKqvdSbzLOiLTx+bno7/HC9eefePfEb257QFHg7ye3dh80AZVkaa/RQsBB1Q/ORQvg2X7F0NQ==",
"requires": {
"@typescript-eslint/experimental-utils": "^5.0.0"
}
}
} }
}, },
"eslint-import-resolver-node": { "eslint-import-resolver-node": {
@@ -22322,11 +22566,12 @@
} }
}, },
"eslint-plugin-jest": { "eslint-plugin-jest": {
"version": "25.7.0", "version": "27.2.2",
"resolved": "https://registry.npmjs.org/eslint-plugin-jest/-/eslint-plugin-jest-25.7.0.tgz", "resolved": "https://registry.npmjs.org/eslint-plugin-jest/-/eslint-plugin-jest-27.2.2.tgz",
"integrity": "sha512-PWLUEXeeF7C9QGKqvdSbzLOiLTx+bno7/HC9eefePfEb257QFHg7ye3dh80AZVkaa/RQsBB1Q/ORQvg2X7F0NQ==", "integrity": "sha512-euzbp06F934Z7UDl5ZUaRPLAc9MKjh0rMPERrHT7UhlCEwgb25kBj37TvMgWeHZVkR5I9CayswrpoaqZU1RImw==",
"dev": true,
"requires": { "requires": {
"@typescript-eslint/experimental-utils": "^5.0.0" "@typescript-eslint/utils": "^5.10.0"
} }
}, },
"eslint-plugin-jsx-a11y": { "eslint-plugin-jsx-a11y": {

9
part5/bloglist-frontend/package.json
View File

@@ -7,6 +7,7 @@
"@testing-library/react": "^13.4.0", "@testing-library/react": "^13.4.0",
"@testing-library/user-event": "^13.5.0", "@testing-library/user-event": "^13.5.0",
"axios": "^1.2.3", "axios": "^1.2.3",
"prop-types": "^15.8.1",
"react": "^18.2.0", "react": "^18.2.0",
"react-dom": "^18.2.0", "react-dom": "^18.2.0",
"react-scripts": "5.0.1", "react-scripts": "5.0.1",
@@ -16,7 +17,8 @@
"start": "react-scripts start", "start": "react-scripts start",
"build": "react-scripts build", "build": "react-scripts build",
"test": "react-scripts test", "test": "react-scripts test",
"eject": "react-scripts eject" "eject": "react-scripts eject",
"eslint": "eslint ."
}, },
"eslintConfig": { "eslintConfig": {
"extends": [ "extends": [
@@ -36,5 +38,8 @@
"last 1 safari version" "last 1 safari version"
] ]
}, },
"proxy": "http://localhost:3001/" "proxy": "http://localhost:3001/",
"devDependencies": {
"eslint-plugin-jest": "^27.2.2"
}
} }

138
part5/bloglist-frontend/src/App.js
View File

@@ -1,110 +1,110 @@
import { useState, useEffect, useRef } from "react"; import { useState, useEffect, useRef } from 'react'
import Blog from "./components/Blog"; import Blog from './components/Blog'
import { BlogForm } from "./components/BlogForm"; import { BlogForm } from './components/BlogForm'
import Notification from "./components/Notification"; import Notification from './components/Notification'
import blogService from "./services/blogs"; import blogService from './services/blogs'
import loginService from "./services/login"; import loginService from './services/login'
import Togglable from "./components/Togglable"; import Togglable from './components/Togglable'
const App = () => { const App = () => {
const [blogs, setBlogs] = useState([]); const [blogs, setBlogs] = useState([])
const [user, setUser] = useState(null); const [user, setUser] = useState(null)
const [username, setUsername] = useState(""); const [username, setUsername] = useState('')
const [password, setPassword] = useState(""); const [password, setPassword] = useState('')
const [errorMessage, setErrorMessage] = useState(null); const [errorMessage, setErrorMessage] = useState(null)
const [successMessage, setSuccessMessage] = useState(null); const [successMessage, setSuccessMessage] = useState(null)
const resetInputFields = () => { const resetInputFields = () => {
setUsername(""); setUsername('')
setPassword(""); setPassword('')
}; }
const setNotification = (message, type) => { const setNotification = (message, type) => {
if (type === "success") { if (type === 'success') {
setSuccessMessage(message); setSuccessMessage(message)
setTimeout(() => { setTimeout(() => {
setSuccessMessage(null); setSuccessMessage(null)
}, 5000); }, 5000)
} else if (type === "error") { } else if (type === 'error') {
setErrorMessage(message); setErrorMessage(message)
setTimeout(() => { setTimeout(() => {
setErrorMessage(null); setErrorMessage(null)
}, 5000); }, 5000)
}
} }
};
useEffect(() => { useEffect(() => {
blogService.getAll().then((blogs) => setBlogs(blogs)); blogService.getAll().then((blogs) => setBlogs(blogs))
const loggedInUserLocal = window.localStorage.getItem("loggedInUser"); const loggedInUserLocal = window.localStorage.getItem('loggedInUser')
if (loggedInUserLocal) { if (loggedInUserLocal) {
const user = JSON.parse(loggedInUserLocal); const user = JSON.parse(loggedInUserLocal)
setUser(user); setUser(user)
blogService.setToken(user.token); blogService.setToken(user.token)
} }
}, []); }, [])
const handleLogin = async (event) => { const handleLogin = async (event) => {
event.preventDefault(); event.preventDefault()
try { try {
const user = await loginService.login({ username, password }); const user = await loginService.login({ username, password })
blogService.setToken(user.token); blogService.setToken(user.token)
window.localStorage.setItem("loggedInUser", JSON.stringify(user)); window.localStorage.setItem('loggedInUser', JSON.stringify(user))
setUser(user); setUser(user)
resetInputFields(); resetInputFields()
setNotification("Login successful", "success"); setNotification('Login successful', 'success')
} catch (exception) { } catch (exception) {
setNotification("Wrong credentials", "error"); setNotification('Wrong credentials', 'error')
}
} }
};
const handleLogout = async (event) => { const handleLogout = async (event) => {
event.preventDefault(); event.preventDefault()
try { try {
setNotification("Logout successful", "success"); setNotification('Logout successful', 'success')
window.localStorage.clear(); window.localStorage.clear()
blogService.setToken(null); blogService.setToken(null)
setUser(null); setUser(null)
resetInputFields(); resetInputFields()
} catch (exception) { } catch (exception) {
setNotification("Logout failed", "error"); setNotification('Logout failed', 'error')
} }
}; }
const newBlogRef = useRef(); const newBlogRef = useRef()
const handleNewBlog = (newBlog) => { const handleNewBlog = (newBlog) => {
newBlogRef.current.toggleVisibility(); newBlogRef.current.toggleVisibility()
blogService blogService
.create(newBlog) .create(newBlog)
.then((returnedBlog) => { .then((returnedBlog) => {
setBlogs(blogs.concat(returnedBlog)); setBlogs(blogs.concat(returnedBlog))
resetInputFields(); resetInputFields()
setNotification( setNotification(
`A new blog ${returnedBlog.title} by ${returnedBlog.author} at ${returnedBlog.url} added`, `A new blog ${returnedBlog.title} by ${returnedBlog.author} at ${returnedBlog.url} added`,
"success" 'success'
); )
}) })
.catch((error) => { .catch((error) => {
setNotification("Failed to add new blog: " + error, "error"); setNotification('Failed to add new blog: ' + error, 'error')
}); })
}; }
const handleRemoveBlog = (blog) => { const handleRemoveBlog = (blog) => {
if (window.confirm(`Remove blog ${blog.title} by ${blog.author}?`)) { if (window.confirm(`Remove blog ${blog.title} by ${blog.author}?`)) {
blogService blogService
.remove(blog.id) .remove(blog.id)
.then(() => { .then(() => {
setBlogs(blogs.filter((b) => b.id !== blog.id)); setBlogs(blogs.filter((b) => b.id !== blog.id))
setNotification( setNotification(
`Blog ${blog.title} by ${blog.author} removed`, `Blog ${blog.title} by ${blog.author} removed`,
"success" 'success'
); )
}) })
.catch((error) => { .catch((error) => {
setNotification("Failed to remove blog: " + error, "error"); setNotification('Failed to remove blog: ' + error, 'error')
}); })
}
} }
};
const loginForm = () => ( const loginForm = () => (
<form onSubmit={handleLogin}> <form onSubmit={handleLogin}>
@@ -128,7 +128,7 @@ const App = () => {
</div> </div>
<button type="submit">Login</button> <button type="submit">Login</button>
</form> </form>
); )
const blogForm = () => { const blogForm = () => {
return ( return (
@@ -148,8 +148,8 @@ const App = () => {
/> />
))} ))}
</div> </div>
); )
}; }
return ( return (
<div> <div>
@@ -167,7 +167,7 @@ const App = () => {
<div>{blogForm()}</div> <div>{blogForm()}</div>
)} )}
</div> </div>
); )
}; }
export default App; export default App

30
part5/bloglist-frontend/src/components/Blog.js
View File

@@ -1,30 +1,30 @@
import { useState } from "react"; import { useState } from 'react'
import blogService from "../services/blogs"; import blogService from '../services/blogs'
import Togglable from "./Togglable"; import Togglable from './Togglable'
const Blog = ({ blog, setNotification, removeBlog }) => { const Blog = ({ blog, setNotification, removeBlog }) => {
const blogStyle = { const blogStyle = {
paddingTop: 10, paddingTop: 10,
paddingLeft: 2, paddingLeft: 2,
border: "solid", border: 'solid',
borderWidth: 1, borderWidth: 1,
marginBottom: 5, marginBottom: 5,
}; }
const [likes, setLikes] = useState(blog.likes); const [likes, setLikes] = useState(blog.likes)
const handleLike = (blog) => { const handleLike = (blog) => {
blog.likes = blog.likes + 1; blog.likes = blog.likes + 1
blogService blogService
.update(blog.id, blog) .update(blog.id, blog)
.then((returnedBlog) => { .then((returnedBlog) => {
setLikes(returnedBlog.likes); setLikes(returnedBlog.likes)
setNotification(`You liked ${blog.title}`, "success"); setNotification(`You liked ${blog.title}`, 'success')
}) })
.catch((error) => { .catch((error) => {
setNotification(`Like failed. Error: ${error}`, "error"); setNotification(`Like failed. Error: ${error}`, 'error')
}); })
}; }
return ( return (
<div style={blogStyle}> <div style={blogStyle}>
@@ -43,7 +43,7 @@ const Blog = ({ blog, setNotification, removeBlog }) => {
</Togglable> </Togglable>
</div> </div>
</div> </div>
); )
}; }
export default Blog; export default Blog

28
part5/bloglist-frontend/src/components/BlogForm.js
View File

@@ -1,25 +1,25 @@
import { useState } from "react"; import { useState } from 'react'
export const BlogForm = ({ createBlog }) => { export const BlogForm = ({ createBlog }) => {
const [title, setTitle] = useState(""); const [title, setTitle] = useState('')
const [author, setAuthor] = useState(""); const [author, setAuthor] = useState('')
const [urlAddress, setUrlAddress] = useState(""); const [urlAddress, setUrlAddress] = useState('')
const resetInputFields = () => { const resetInputFields = () => {
setTitle(""); setTitle('')
setAuthor(""); setAuthor('')
setUrlAddress(""); setUrlAddress('')
}; }
const addBlog = async (event) => { const addBlog = async (event) => {
event.preventDefault(); event.preventDefault()
createBlog({ createBlog({
title: title, title: title,
author: author, author: author,
url: urlAddress, url: urlAddress,
}); })
resetInputFields(); resetInputFields()
}; }
return ( return (
<div> <div>
@@ -55,5 +55,5 @@ export const BlogForm = ({ createBlog }) => {
<button type="submit">Create</button> <button type="submit">Create</button>
</form> </form>
</div> </div>
); )
}; }

18
part5/bloglist-frontend/src/components/Notification.js
View File

@@ -1,18 +1,18 @@
const errorNotification = ({ message }) => { const errorNotification = ({ message }) => {
if (message === null) { if (message === null) {
return null; return null
} else { } else {
return <div style={{ color: "red" }}>{message}</div>; return <div style={{ color: 'red' }}>{message}</div>
} }
}; }
const successNotification = ({ message }) => { const successNotification = ({ message }) => {
if (message === null) { if (message === null) {
return null; return null
} else { } else {
return <div style={{ color: "green" }}>{message}</div>; return <div style={{ color: 'green' }}>{message}</div>
} }
}; }
const Notification = ({ errorMessage, successMessage }) => { const Notification = ({ errorMessage, successMessage }) => {
return ( return (
@@ -20,7 +20,7 @@ const Notification = ({ errorMessage, successMessage }) => {
{errorNotification({ message: errorMessage })} {errorNotification({ message: errorMessage })}
{successNotification({ message: successMessage })} {successNotification({ message: successMessage })}
</div> </div>
); )
}; }
export default Notification; export default Notification

29
part5/bloglist-frontend/src/components/Togglable.js
View File

@@ -1,18 +1,19 @@
import { useState, forwardRef, useImperativeHandle } from "react"; import { useState, forwardRef, useImperativeHandle } from 'react'
import PropTypes from 'prop-types'
const Togglable = forwardRef((props, refs) => { const Togglable = forwardRef((props, refs) => {
const [visible, setVisible] = useState(false); const [visible, setVisible] = useState(false)
const hideWhenVisible = { display: visible ? "none" : "" }; const hideWhenVisible = { display: visible ? 'none' : '' }
const showWhenVisible = { display: visible ? "" : "none" }; const showWhenVisible = { display: visible ? '' : 'none' }
const toggleVisibility = () => { const toggleVisibility = () => {
setVisible(!visible); setVisible(!visible)
}; }
useImperativeHandle(refs, () => { useImperativeHandle(refs, () => {
return { toggleVisibility }; return { toggleVisibility }
}); })
return ( return (
<div> <div>
@@ -24,7 +25,13 @@ const Togglable = forwardRef((props, refs) => {
<button onClick={toggleVisibility}>Cancel</button> <button onClick={toggleVisibility}>Cancel</button>
</div> </div>
</div> </div>
); )
}); })
export default Togglable; Togglable.propTypes = {
buttonLabel: PropTypes.string.isRequired,
}
Togglable.displayName = 'Togglable'
export default Togglable

44
part5/bloglist-frontend/src/services/blogs.js
View File

@@ -1,39 +1,39 @@
import axios from "axios"; import axios from 'axios'
const baseUrl = "/api/blogs"; const baseUrl = '/api/blogs'
let token = null; let token = null
const setToken = (newToken) => { const setToken = (newToken) => {
token = `Bearer ${newToken}`; token = `Bearer ${newToken}`
}; }
const getAll = async () => { const getAll = async () => {
const request = axios.get(baseUrl); const request = axios.get(baseUrl)
const response = await request; const response = await request
return response.data; return response.data
}; }
const create = async (newObject) => { const create = async (newObject) => {
const config = { const config = {
headers: { Authorization: token }, headers: { Authorization: token },
}; }
const response = await axios.post(baseUrl, newObject, config); const response = await axios.post(baseUrl, newObject, config)
return response.data; return response.data
}; }
const update = async (id, newObject) => { const update = async (id, newObject) => {
const response = await axios.put(`${baseUrl}/${id}`, newObject); const response = await axios.put(`${baseUrl}/${id}`, newObject)
return response.data; return response.data
}; }
const remove = async (id) => { const remove = async (id) => {
const config = { const config = {
headers: { Authorization: token }, headers: { Authorization: token },
}; }
const response = await axios.delete(`${baseUrl}/${id}`, config); const response = await axios.delete(`${baseUrl}/${id}`, config)
return response.data; return response.data
}; }
const blogService = { const blogService = {
setToken, setToken,
@@ -41,6 +41,6 @@ const blogService = {
create, create,
update, update,
remove, remove,
}; }
export default blogService; export default blogService

14
part5/bloglist-frontend/src/services/login.js
View File

@@ -1,11 +1,11 @@
import axios from "axios"; import axios from 'axios'
const baseUrl = "/api/login"; const baseUrl = '/api/login'
const login = async (credentials) => { const login = async (credentials) => {
const response = await axios.post(baseUrl, credentials); const response = await axios.post(baseUrl, credentials)
return response.data; return response.data
}; }
const loginService = { login }; const loginService = { login }
export default loginService; export default loginService