",
14 | "license": "ISC",
15 | "devDependencies": {
16 | "eslint": "^6.8.0",
17 | "jest": "^25.3.0",
18 | "nodemon": "^2.0.2",
19 | "supertest": "^4.0.2"
20 | },
21 | "dependencies": {
22 | "bcrypt": "^5.0.0",
23 | "body-parser": "^1.19.0",
24 | "cors": "^2.8.5",
25 | "cross-env": "^7.0.2",
26 | "dotenv": "^8.2.0",
27 | "express": "^4.17.1",
28 | "express-async-errors": "^3.1.1",
29 | "jsonwebtoken": "^8.5.1",
30 | "mongoose": "^5.9.7",
31 | "mongoose-unique-validator": "^2.0.3",
32 | "morgan": "^1.10.0"
33 | }
34 | }
35 |
--------------------------------------------------------------------------------
/part4/bloglist/tests/test_helper.js:
--------------------------------------------------------------------------------
1 | const Blog = require('../models/blog')
2 | const User = require('../models/user')
3 |
4 | const initialBlogs = [
5 | {
6 | id:"5a422a851b54a676234d17f7",
7 | title:"React patterns",
8 | author:"Michael Chan",
9 | url:"https://reactpatterns.com/",
10 | likes:7
11 | },
12 | {
13 | id:"5a422aa71b54a676234d17f8",
14 | title:"Go To Statement Considered Harmful",
15 | author:"Edsger W. Dijkstra",
16 | url:"http://www.u.arizona.edu/~rubinson/copyright_violations/Go_To_Considered_Harmful.html",
17 | likes:5
18 | }
19 | ]
20 |
21 | const blogsInDb = async () => {
22 | const blogs = await Blog.find({})
23 | return blogs.map(blog => blog.toJSON())
24 | }
25 |
26 | const usersInDb = async () => {
27 | const users = await User.find({})
28 | return users.map(u => u.toJSON())
29 | }
30 |
31 | module.exports = {
32 | initialBlogs, blogsInDb, usersInDb
33 | }
--------------------------------------------------------------------------------
/part4/bloglist/utils/config.js:
--------------------------------------------------------------------------------
1 | require('dotenv').config()
2 |
3 | let PORT = process.env.PORT
4 | let MONGODB_URI = process.env.MONGODB_URI
5 |
6 | if (process.env.NODE_ENV === 'test') {
7 | MONGODB_URI = process.env.TEST_MONGODB_URI
8 | } else if (process.env.NODE_ENV === 'development') {
9 | MONGODB_URI = process.env.DEV_MONGODB_URI
10 | }
11 |
12 | module.exports = {
13 | MONGODB_URI,
14 | PORT
15 | }
--------------------------------------------------------------------------------
/part4/bloglist/utils/logger.js:
--------------------------------------------------------------------------------
1 | const info = (...params) => {
2 | if (process.env.NODE_ENV !== 'test') {
3 | console.log(...params)
4 | }
5 | }
6 |
7 | const error = (...params) => {
8 | if (process.env.NODE_ENV !== 'test') {
9 | console.error(...params)
10 | }
11 | }
12 |
13 | module.exports = { info, error }
--------------------------------------------------------------------------------
/part4/bloglist/utils/middleware.js:
--------------------------------------------------------------------------------
1 | const logger = require('./logger')
2 | const jwt = require('jsonwebtoken')
3 |
4 | const errorHandler = (error, request, response, next) => {
5 | logger.error(error.message)
6 |
7 | if (error.name === 'CastError') {
8 | return response.status(400).send({ error: 'malformatted id' })
9 | } else if (error.name === 'ValidationError') {
10 | return response.status(400).json({ error: error.message })
11 | } else if (error.name === 'JsonWebTokenError') {
12 | return response.status(401).json({
13 | error: 'invalid token'
14 | })
15 | }
16 |
17 | logger.error(error.message)
18 | next(error)
19 | }
20 |
21 | const tokenExtractor = (request, response, next) => {
22 | const authorization = request.get('authorization')
23 |
24 | if (authorization && authorization.toLowerCase().startsWith('bearer ')) {
25 | request["token"] = authorization.substring(7)
26 | }
27 | next()
28 | }
29 |
30 | const tokenValidator = (request, response, next) => {
31 | const token = request.token
32 | if (!token) {
33 | return response.status(401).json({ error: 'token missing' })
34 | }
35 |
36 | const decodedToken = jwt.verify(token, process.env.SECRET)
37 | if (!decodedToken.id) {
38 | return response.status(401).json({ error: 'invalid token' })
39 | }
40 | next()
41 | }
42 |
43 | module.exports = { errorHandler, tokenExtractor, tokenValidator }
--------------------------------------------------------------------------------
/part5/README.md:
--------------------------------------------------------------------------------
1 | # Solutions for part 5 exercises
2 |
3 | In this part we return to the frontend, first looking at different possibilities for testing the React code. We will also implement token based authentication which will enable users to log in to our application.
--------------------------------------------------------------------------------
/part5/bloglist-frontend/.editorconfig:
--------------------------------------------------------------------------------
1 | # EditorConfig helps developers define and maintain consistent
2 | # coding styles between different editors and IDEs
3 | # editorconfig.org
4 |
5 | root = true
6 |
7 | [*]
8 |
9 | # Change these settings to your own preference
10 | indent_style = space
11 | indent_size = 2
12 |
13 | # We recommend you to keep these unchanged
14 | end_of_line = lf
15 | charset = utf-8
16 | trim_trailing_whitespace = true
17 | insert_final_newline = true
18 |
19 | [*.md]
20 | trim_trailing_whitespace = false
--------------------------------------------------------------------------------
/part5/bloglist-frontend/.eslintignore:
--------------------------------------------------------------------------------
1 | node_modules
2 | build
--------------------------------------------------------------------------------
/part5/bloglist-frontend/.eslintrc.js:
--------------------------------------------------------------------------------
1 | module.exports = {
2 | "env": {
3 | "browser": true,
4 | "es6": true,
5 | "jest/globals": true
6 | },
7 | "extends": [
8 | "eslint:recommended",
9 | "plugin:react/recommended"
10 | ],
11 | "parserOptions": {
12 | "ecmaFeatures": {
13 | "jsx": true
14 | },
15 | "ecmaVersion": 2018,
16 | "sourceType": "module"
17 | },
18 | "plugins": [
19 | "react", "jest"
20 | ],
21 | "rules": {
22 | "indent": [
23 | "error",
24 | 2
25 | ],
26 | "quotes": [
27 | "error",
28 | "single"
29 | ],
30 | "semi": [
31 | "error",
32 | "never"
33 | ],
34 | "eqeqeq": "error",
35 | "no-trailing-spaces": "error",
36 | "object-curly-spacing": [
37 | "error", "always"
38 | ],
39 | "arrow-spacing": [
40 | "error", { "before": true, "after": true }
41 | ],
42 | "no-console": 0,
43 | "react/prop-types": 0
44 | }
45 | }
46 |
--------------------------------------------------------------------------------
/part5/bloglist-frontend/.gitignore:
--------------------------------------------------------------------------------
1 | # See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
2 |
3 | # dependencies
4 | /node_modules
5 | /.pnp
6 | .pnp.js
7 |
8 | # testing
9 | /coverage
10 |
11 | # production
12 | /build
13 |
14 | # misc
15 | .DS_Store
16 | .env.local
17 | .env.development.local
18 | .env.test.local
19 | .env.production.local
20 |
21 | npm-debug.log*
22 | yarn-debug.log*
23 | yarn-error.log*
24 |
--------------------------------------------------------------------------------
/part5/bloglist-frontend/README.md:
--------------------------------------------------------------------------------
1 | # Bloglist frontend
2 |
3 | In this exercise, we will now create a frontend for the bloglist backend we created in the last part.
4 | A login functionnality is also implemented for restricting the possibility to view and create blogs only by authenticated users. We assume that a user already exists with the good credentials.
5 |
6 | Since the objective of this part is to test the react app, unit tests and end-to-end (E2E) tests with cypress are also implemented.
7 |
8 | ## Start the application locally
9 |
10 | To start an application:
11 |
12 | ```bash
13 | # First, you need to start the backend, to do so, head to the part4. Everything is explained in the README
14 |
15 | # Install dependancies
16 | $ npm install
17 |
18 | # Start the frontend application
19 | $ npm start
20 |
21 | # For running E2E tests
22 | $ npm run cypress:open # Then, click on run all specs
23 | ```
24 |
25 | You can then access the app on : http://localhost:3000/
--------------------------------------------------------------------------------
/part5/bloglist-frontend/cypress.json:
--------------------------------------------------------------------------------
1 | {}
2 |
--------------------------------------------------------------------------------
/part5/bloglist-frontend/cypress/fixtures/example.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "Using fixtures to represent data",
3 | "email": "hello@cypress.io",
4 | "body": "Fixtures are a great way to mock data for responses to routes"
5 | }
--------------------------------------------------------------------------------
/part5/bloglist-frontend/cypress/plugins/index.js:
--------------------------------------------------------------------------------
1 | ///
30 | {successMessage}
31 |
32 | )
33 | } else {
34 | return (
35 |
36 | {errorMessage}
37 |
38 | )
39 | }
40 | }
41 |
42 | Notification.propTypes = {
43 | errorMessage: PropTypes.string,
44 | successMessage: PropTypes.string
45 | }
46 |
47 | export default Notification
48 |
--------------------------------------------------------------------------------
/part5/bloglist-frontend/src/components/Togglable.js:
--------------------------------------------------------------------------------
1 | import React, { useState, useImperativeHandle } from 'react'
2 | import PropTypes from 'prop-types'
3 |
4 | const Togglable = React.forwardRef((props, ref) => {
5 | const [visible, setVisible] = useState(false)
6 |
7 | const hideWhenVisible = { display: visible ? 'none' : '' }
8 | const showWhenVisible = { display: visible ? '' : 'none' }
9 |
10 | const toggleVisibility = () => {
11 | setVisible(!visible)
12 | }
13 |
14 | useImperativeHandle(ref, () => {
15 | return {
16 | toggleVisibility
17 | }
18 | })
19 |
20 | return (
21 |
22 |
23 | {props.buttonLabel}
24 |
25 |
26 | {props.children}
27 | cancel
28 |
29 |
17 |
create new
18 |
19 |
Anecdotes
20 |
21 |
22 |
23 |
16 |
17 | {anecdote.content}
18 |
19 |
20 | has {anecdote.votes}
21 | vote
22 |
23 |
17 | filter
19 | )
20 | }
21 |
22 | export default Filter
--------------------------------------------------------------------------------
/part6/redux-anecdotes/src/components/Notification.js:
--------------------------------------------------------------------------------
1 | import React from 'react'
2 | import { useSelector } from 'react-redux'
3 |
4 | const Notification = () => {
5 | const notification = useSelector(state => state.notification)
6 |
7 | const style = {
8 | border: 'solid',
9 | padding: 10,
10 | borderWidth: 1
11 | }
12 |
13 | if (notification === null) {
14 | return null
15 | }
16 |
17 | return (
18 |
19 | {notification}
20 |
21 | )
22 | }
23 |
24 | export default Notification
--------------------------------------------------------------------------------
/part6/redux-anecdotes/src/index.js:
--------------------------------------------------------------------------------
1 | import React from 'react'
2 | import ReactDOM from 'react-dom'
3 | import { Provider } from 'react-redux'
4 | import store from './utils/store'
5 | import App from './App'
6 |
7 |
8 | ReactDOM.render(
9 |
10 | ,
12 | document.getElementById('root')
13 | )
--------------------------------------------------------------------------------
/part6/redux-anecdotes/src/reducers/filterReducer.js:
--------------------------------------------------------------------------------
1 | const filterReducer = (state = null, action) => {
2 | switch (action.type) {
3 | case 'SET_FILTER':
4 | return action.filter
5 | default:
6 | return state
7 | }
8 | }
9 |
10 | export const filterChange = (filter) => {
11 | return {
12 | type: 'SET_FILTER',
13 | filter,
14 | }
15 | }
16 |
17 | export default filterReducer
--------------------------------------------------------------------------------
/part6/redux-anecdotes/src/reducers/notificationReducer.js:
--------------------------------------------------------------------------------
1 | const notificationReducer = (state = null, action) => {
2 | switch (action.type) {
3 | case 'NEW_NOTIFICATION':
4 | return action.notification
5 | case 'HIDE_NOTIFICATION':
6 | return action.notification
7 | default:
8 | return state
9 | }
10 | }
11 |
12 | export const setNotification = (notification, displayTime) => {
13 | return async dispatch => {
14 | dispatch({
15 | type: 'NEW_NOTIFICATION',
16 | notification,
17 | })
18 |
19 | setTimeout(() => {
20 | dispatch({
21 | type: 'HIDE_NOTIFICATION',
22 | notification: null
23 | })
24 | }, displayTime * 1000)
25 | }
26 | }
27 |
28 | export default notificationReducer
--------------------------------------------------------------------------------
/part6/redux-anecdotes/src/services/anecdotes.js:
--------------------------------------------------------------------------------
1 | import axios from 'axios'
2 |
3 | const baseUrl = 'http://localhost:3001/anecdotes'
4 |
5 | const getAll = async () => {
6 | const response = await axios.get(baseUrl)
7 | return response.data
8 | }
9 |
10 | const createNew = async (content) => {
11 | const object = {
12 | content: content,
13 | id: (100000 * Math.random()).toFixed(0),
14 | votes: 0
15 | }
16 | const response = await axios.post(baseUrl, object)
17 | return response.data
18 | }
19 |
20 | const update = async objectToUpdate => {
21 | const response = await axios.put(`${baseUrl}/${objectToUpdate.id}`, objectToUpdate)
22 | return response.data
23 | }
24 |
25 | export default { getAll, createNew, update }
--------------------------------------------------------------------------------
/part6/redux-anecdotes/src/utils/store.js:
--------------------------------------------------------------------------------
1 | import { createStore, combineReducers, applyMiddleware } from 'redux'
2 | import thunk from 'redux-thunk'
3 | import { composeWithDevTools } from 'redux-devtools-extension'
4 |
5 | import anecdoteReducer from '../reducers/anecdoteReducer'
6 | import notificationReducer from '../reducers/notificationReducer'
7 | import filterReducer from '../reducers/filterReducer'
8 |
9 | const reducer = combineReducers({
10 | notification: notificationReducer,
11 | anecdotes: anecdoteReducer,
12 | filter: filterReducer
13 | })
14 |
15 | const store = createStore(
16 | reducer,
17 | composeWithDevTools(
18 | applyMiddleware(thunk)
19 | )
20 | )
21 |
22 | export default store
--------------------------------------------------------------------------------
/part6/unicafe-redux/.gitignore:
--------------------------------------------------------------------------------
1 | # See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
2 |
3 | # dependencies
4 | /node_modules
5 | /.pnp
6 | .pnp.js
7 |
8 | # testing
9 | /coverage
10 |
11 | # production
12 | /build
13 |
14 | # misc
15 | .DS_Store
16 | .env.local
17 | .env.development.local
18 | .env.test.local
19 | .env.production.local
20 |
21 | npm-debug.log*
22 | yarn-debug.log*
23 | yarn-error.log*
24 |
--------------------------------------------------------------------------------
/part6/unicafe-redux/README.md:
--------------------------------------------------------------------------------
1 | # Unicafe Redux
2 |
3 | In this exercise, we made a simplified version of the unicafe-exercise from part 1 with handling of the state management with `Redux`. As a reminder, the unicafe app collects customer feedback with three options: good, neutral, and bad.
4 |
5 | ## Start the application
6 |
7 | To start an application, do the following :
8 |
9 | ```bash
10 | # Install dependancies
11 | $ npm install
12 | # Start the application
13 | $ npm start
14 | ```
15 |
16 | You can then access the app on : [http://localhost:3000/](http://localhost:3000/)
--------------------------------------------------------------------------------
/part6/unicafe-redux/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "unicafe-redux",
3 | "version": "0.1.0",
4 | "private": true,
5 | "dependencies": {
6 | "@testing-library/jest-dom": "^4.2.4",
7 | "@testing-library/react": "^9.4.0",
8 | "@testing-library/user-event": "^7.2.1",
9 | "react": "^16.12.0",
10 | "react-dom": "^16.12.0",
11 | "react-scripts": "3.3.1",
12 | "redux": "^4.0.5"
13 | },
14 | "scripts": {
15 | "start": "react-scripts start",
16 | "build": "react-scripts build",
17 | "test": "react-scripts test",
18 | "eject": "react-scripts eject"
19 | },
20 | "eslintConfig": {
21 | "extends": "react-app"
22 | },
23 | "browserslist": {
24 | "production": [
25 | ">0.2%",
26 | "not dead",
27 | "not op_mini all"
28 | ],
29 | "development": [
30 | "last 1 chrome version",
31 | "last 1 firefox version",
32 | "last 1 safari version"
33 | ]
34 | },
35 | "devDependencies": {
36 | "deep-freeze": "0.0.1"
37 | }
38 | }
39 |
--------------------------------------------------------------------------------
/part6/unicafe-redux/public/favicon.ico:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/anancarv/fullstackopen/3b12bbb3f9ca4ca8c5b9c29df558d787e1009e8c/part6/unicafe-redux/public/favicon.ico
--------------------------------------------------------------------------------
/part6/unicafe-redux/public/logo192.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/anancarv/fullstackopen/3b12bbb3f9ca4ca8c5b9c29df558d787e1009e8c/part6/unicafe-redux/public/logo192.png
--------------------------------------------------------------------------------
/part6/unicafe-redux/public/logo512.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/anancarv/fullstackopen/3b12bbb3f9ca4ca8c5b9c29df558d787e1009e8c/part6/unicafe-redux/public/logo512.png
--------------------------------------------------------------------------------
/part6/unicafe-redux/public/manifest.json:
--------------------------------------------------------------------------------
1 | {
2 | "short_name": "React App",
3 | "name": "Create React App Sample",
4 | "icons": [
5 | {
6 | "src": "favicon.ico",
7 | "sizes": "64x64 32x32 24x24 16x16",
8 | "type": "image/x-icon"
9 | },
10 | {
11 | "src": "logo192.png",
12 | "type": "image/png",
13 | "sizes": "192x192"
14 | },
15 | {
16 | "src": "logo512.png",
17 | "type": "image/png",
18 | "sizes": "512x512"
19 | }
20 | ],
21 | "start_url": ".",
22 | "display": "standalone",
23 | "theme_color": "#000000",
24 | "background_color": "#ffffff"
25 | }
26 |
--------------------------------------------------------------------------------
/part6/unicafe-redux/public/robots.txt:
--------------------------------------------------------------------------------
1 | # https://www.robotstxt.org/robotstxt.html
2 | User-agent: *
3 | Disallow:
4 |
--------------------------------------------------------------------------------
/part6/unicafe-redux/src/index.js:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import ReactDOM from 'react-dom'
3 | import { createStore } from 'redux'
4 | import counterReducer from './reducers/counterReducer'
5 |
6 | const store = createStore(counterReducer)
7 |
8 | const App = () => {
9 | return (
10 |
11 |
store.dispatch({type: 'GOOD'})}>good
12 |
store.dispatch({type: 'OK'})}>neutral
13 |
store.dispatch({type: 'BAD'})}>bad
14 |
store.dispatch({type: 'ZERO'})}>reset stats
15 |
good {store.getState().good}
16 |
neutral {store.getState().ok}
17 |
bad {store.getState().bad}
18 |
15 |
16 | {notification.message}
17 |
18 |
22 |
23 | {notification.message}
24 |
25 |
23 |
24 | {props.buttonLabel}
25 |
26 |
27 | {props.children}
28 | cancel
29 |
30 |
8 |
10 | )
11 | }
12 |
13 | const UserList = () => {
14 | const users = useSelector((state) => state.users)
15 | return users.map((user) =>
10 |
11 |
13 | ,
14 | document.getElementById('root')
15 | )
16 |
--------------------------------------------------------------------------------
/part7/bloglist/src/reducers/notificationReducer.js:
--------------------------------------------------------------------------------
1 | const notificationReducer = (state = null, action) => {
2 | switch (action.type) {
3 | case 'NEW_NOTIFICATION':
4 | return action.data
5 | case 'HIDE_NOTIFICATION':
6 | return action.data
7 | default:
8 | return state
9 | }
10 | }
11 |
12 | export const setNotification = (
13 | notification,
14 | notificationType,
15 | displayTime
16 | ) => {
17 | return async (dispatch) => {
18 | dispatch({
19 | type: 'NEW_NOTIFICATION',
20 | data: {
21 | message: notification,
22 | type: notificationType
23 | }
24 | })
25 |
26 | setTimeout(() => {
27 | dispatch({
28 | type: 'HIDE_NOTIFICATION',
29 | data: null
30 | })
31 | }, displayTime * 1000)
32 | }
33 | }
34 |
35 | export default notificationReducer
36 |
--------------------------------------------------------------------------------
/part7/bloglist/src/reducers/userReducer.js:
--------------------------------------------------------------------------------
1 | import userService from '../services/users'
2 |
3 | const userReducer = (state = [], action) => {
4 | switch (action.type) {
5 | case 'INIT_ALL_USERS':
6 | return action.data
7 | default:
8 | return state
9 | }
10 | }
11 |
12 | export const initializeAllUsers = () => {
13 | return async (dispatch) => {
14 | const users = await userService.getAll()
15 | dispatch({
16 | type: 'INIT_ALL_USERS',
17 | data: users
18 | })
19 | }
20 | }
21 |
22 | export default userReducer
23 |
--------------------------------------------------------------------------------
/part7/bloglist/src/services/blogs.js:
--------------------------------------------------------------------------------
1 | import axios from 'axios'
2 | const baseUrl = '/api/blogs'
3 |
4 | let token = null
5 | let config
6 |
7 | const setToken = (newToken) => {
8 | token = `bearer ${newToken}`
9 | config = {
10 | headers: { Authorization: token }
11 | }
12 | }
13 |
14 | const getAll = async () => {
15 | const response = await axios.get(baseUrl, config)
16 | return response.data
17 | }
18 |
19 | const create = async (newObject) => {
20 | const response = await axios.post(baseUrl, newObject, config)
21 | return response.data
22 | }
23 |
24 | const update = async (objectToUpdate) => {
25 | const response = await axios.put(
26 | `${baseUrl}/${objectToUpdate.id}`,
27 | objectToUpdate,
28 | config
29 | )
30 | return response.data
31 | }
32 |
33 | const remove = async (id) => {
34 | const response = await axios.delete(`${baseUrl}/${id}`, config)
35 | return response.data
36 | }
37 |
38 | export default { getAll, create, update, setToken, remove }
39 |
--------------------------------------------------------------------------------
/part7/bloglist/src/services/login.js:
--------------------------------------------------------------------------------
1 | import axios from 'axios'
2 | const baseUrl = '/api/login'
3 |
4 | const login = async (credentials) => {
5 | const response = await axios.post(baseUrl, credentials)
6 | return response.data
7 | }
8 |
9 | export default { login }
10 |
--------------------------------------------------------------------------------
/part7/bloglist/src/services/users.js:
--------------------------------------------------------------------------------
1 | import axios from 'axios'
2 | const baseUrl = '/api/users'
3 |
4 | const getAll = async () => {
5 | const response = await axios.get(baseUrl)
6 | return response.data
7 | }
8 |
9 | export default { getAll }
10 |
--------------------------------------------------------------------------------
/part7/bloglist/src/setupTests.js:
--------------------------------------------------------------------------------
1 | // jest-dom adds custom jest matchers for asserting on DOM nodes.
2 | // allows you to do things like:
3 | // expect(element).toHaveTextContent(/react/i)
4 | // learn more: https://github.com/testing-library/jest-dom
5 | import '@testing-library/jest-dom/extend-expect'
6 |
--------------------------------------------------------------------------------
/part7/bloglist/src/utils/store.js:
--------------------------------------------------------------------------------
1 | import { createStore, combineReducers, applyMiddleware } from 'redux'
2 | import thunk from 'redux-thunk'
3 | import { composeWithDevTools } from 'redux-devtools-extension'
4 |
5 | import userReducer from '../reducers/userReducer'
6 | import authReducer from '../reducers/authReducer'
7 | import blogReducer from '../reducers/blogReducer'
8 | import notificationReducer from '../reducers/notificationReducer'
9 |
10 | const reducer = combineReducers({
11 | user: authReducer,
12 | users: userReducer,
13 | blog: blogReducer,
14 | notification: notificationReducer
15 | })
16 |
17 | const store = createStore(reducer, composeWithDevTools(applyMiddleware(thunk)))
18 |
19 | export default store
20 |
--------------------------------------------------------------------------------
/part7/country-hook/.gitignore:
--------------------------------------------------------------------------------
1 | # See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
2 |
3 | # dependencies
4 | /node_modules
5 | /.pnp
6 | .pnp.js
7 |
8 | # testing
9 | /coverage
10 |
11 | # production
12 | /build
13 |
14 | # misc
15 | .DS_Store
16 | .env.local
17 | .env.development.local
18 | .env.test.local
19 | .env.production.local
20 |
21 | npm-debug.log*
22 | yarn-debug.log*
23 | yarn-error.log*
24 |
--------------------------------------------------------------------------------
/part7/country-hook/README.md:
--------------------------------------------------------------------------------
1 | # Countries exercises with custom hooks
2 |
3 | In this exercise, we made a new version of the countries exercise from part 2 using custom hooks.
4 |
5 | This application is used to search for country details from the https://restcountries.eu/ interface. If country is found, the details of the country are displayed.
6 |
7 | ## Start the application
8 |
9 | To start an application, do the following :
10 |
11 | ```bash
12 | # Install dependancies
13 | $ npm install
14 |
15 | # Start the application
16 | $ npm start
17 | ```
18 |
19 | You can then access the app on : [http://localhost:3000/](http://localhost:3000/)
20 |
--------------------------------------------------------------------------------
/part7/country-hook/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "countryhook",
3 | "version": "0.1.0",
4 | "private": true,
5 | "dependencies": {
6 | "@testing-library/jest-dom": "^4.2.4",
7 | "@testing-library/react": "^9.4.0",
8 | "@testing-library/user-event": "^7.2.1",
9 | "axios": "^0.19.2",
10 | "react": "^16.12.0",
11 | "react-dom": "^16.12.0",
12 | "react-scripts": "3.4.0"
13 | },
14 | "scripts": {
15 | "start": "react-scripts start",
16 | "build": "react-scripts build",
17 | "test": "react-scripts test",
18 | "eject": "react-scripts eject"
19 | },
20 | "eslintConfig": {
21 | "extends": "react-app"
22 | },
23 | "browserslist": {
24 | "production": [
25 | ">0.2%",
26 | "not dead",
27 | "not op_mini all"
28 | ],
29 | "development": [
30 | "last 1 chrome version",
31 | "last 1 firefox version",
32 | "last 1 safari version"
33 | ]
34 | }
35 | }
36 |
--------------------------------------------------------------------------------
/part7/country-hook/public/favicon.ico:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/anancarv/fullstackopen/3b12bbb3f9ca4ca8c5b9c29df558d787e1009e8c/part7/country-hook/public/favicon.ico
--------------------------------------------------------------------------------
/part7/country-hook/public/logo192.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/anancarv/fullstackopen/3b12bbb3f9ca4ca8c5b9c29df558d787e1009e8c/part7/country-hook/public/logo192.png
--------------------------------------------------------------------------------
/part7/country-hook/public/logo512.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/anancarv/fullstackopen/3b12bbb3f9ca4ca8c5b9c29df558d787e1009e8c/part7/country-hook/public/logo512.png
--------------------------------------------------------------------------------
/part7/country-hook/public/manifest.json:
--------------------------------------------------------------------------------
1 | {
2 | "short_name": "React App",
3 | "name": "Create React App Sample",
4 | "icons": [
5 | {
6 | "src": "favicon.ico",
7 | "sizes": "64x64 32x32 24x24 16x16",
8 | "type": "image/x-icon"
9 | },
10 | {
11 | "src": "logo192.png",
12 | "type": "image/png",
13 | "sizes": "192x192"
14 | },
15 | {
16 | "src": "logo512.png",
17 | "type": "image/png",
18 | "sizes": "512x512"
19 | }
20 | ],
21 | "start_url": ".",
22 | "display": "standalone",
23 | "theme_color": "#000000",
24 | "background_color": "#ffffff"
25 | }
26 |
--------------------------------------------------------------------------------
/part7/country-hook/public/robots.txt:
--------------------------------------------------------------------------------
1 | # https://www.robotstxt.org/robotstxt.html
2 | User-agent: *
3 | Disallow:
4 |
--------------------------------------------------------------------------------
/part7/country-hook/src/App.js:
--------------------------------------------------------------------------------
1 | import React, { useState } from 'react'
2 | import { useField, useCountry } from './hooks'
3 | import Country from './components/Country'
4 |
5 | const App = () => {
6 | const nameInput = useField('text')
7 | const [name, setName] = useState('')
8 | const country = useCountry(name)
9 |
10 | const fetch = (event) => {
11 | event.preventDefault()
12 | setName(nameInput.value)
13 | }
14 |
15 | return (
16 |
17 |
21 |
22 |
24 | )
25 | }
26 |
27 | export default App
--------------------------------------------------------------------------------
/part7/country-hook/src/components/Country.js:
--------------------------------------------------------------------------------
1 | import React from 'react'
2 |
3 | const Country = ({ country }) => {
4 | if (!country) {
5 | return null
6 | }
7 |
8 | if (country.length === 0) {
9 | return (
10 |
11 | not found...
12 |
13 | )
14 | }
15 |
16 | const countryObject = country[0]
17 |
18 | return (
19 |
20 |
{countryObject.name}
21 |
capital {countryObject.capital}
22 |
population {countryObject.population}
23 |
24 |
5 |
About anecdote app
6 |
According to Wikipedia:
7 |
8 |
9 | An anecdote is a brief, revealing account of an individual person or an
10 | incident. Occasionally humorous, anecdotes differ from jokes because their
11 | primary purpose is not simply to provoke laughter but to reveal a truth
12 | more general than the brief tale itself, such as to characterize a person
13 | by delineating a specific quirk or trait, to communicate an abstract idea
14 | about a person, place, or thing through the concrete details of a short
15 | narrative. An anecdote is "a story with a point."
16 |
17 |
18 |
19 | Software engineering is full of excellent anecdotes, at this app you can
20 | find the best and add more.
21 |
22 |
7 |
{anecdote.content}
8 |
9 |
Author: {anecdote.author}
10 |
Has {anecdote.votes} votes
11 |
12 | For more info see: {anecdote.info}
13 |
14 |
15 |
7 |
Anecdotes
8 |
9 | {anecdotes.map((anecdote) => (
10 |
11 |
13 | ))}
14 |
15 |
10 |
20 | )
21 | }
22 |
23 | export default Menu
24 |
--------------------------------------------------------------------------------
/part7/routed-anecdotes/src/components/Notification.js:
--------------------------------------------------------------------------------
1 | import React from 'react'
2 | import PropTypes from 'prop-types'
3 |
4 | const Notification = ({ notification }) => {
5 | const style = {
6 | border: 'solid',
7 | padding: 10,
8 | borderWidth: 1
9 | }
10 |
11 | if (notification === null) {
12 | return null
13 | }
14 |
15 | return {notification}
16 | }
17 |
18 | Notification.propTypes = {
19 | notification: PropTypes.string
20 | }
21 |
22 | export default Notification
23 |
--------------------------------------------------------------------------------
/part7/routed-anecdotes/src/hooks/index.js:
--------------------------------------------------------------------------------
1 | import { useState } from 'react'
2 |
3 | export const useField = (type) => {
4 | const [value, setValue] = useState('')
5 |
6 | const onChange = (event) => {
7 | setValue(event.target.value)
8 | }
9 |
10 | const reset = () => {
11 | setValue('')
12 | }
13 |
14 | return {
15 | type,
16 | value,
17 | reset,
18 | onChange
19 | }
20 | }
--------------------------------------------------------------------------------
/part7/routed-anecdotes/src/index.js:
--------------------------------------------------------------------------------
1 | import React from 'react'
2 | import ReactDOM from 'react-dom'
3 | import { BrowserRouter as Router } from 'react-router-dom'
4 | import App from './App'
5 |
6 | ReactDOM.render(
7 |
8 | ,
10 | document.getElementById('root')
11 | )
12 |
--------------------------------------------------------------------------------
/part7/ultimate-hooks/.gitignore:
--------------------------------------------------------------------------------
1 | # See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
2 |
3 | # dependencies
4 | /node_modules
5 | /.pnp
6 | .pnp.js
7 |
8 | # testing
9 | /coverage
10 |
11 | # production
12 | /build
13 |
14 | # misc
15 | .DS_Store
16 | .env.local
17 | .env.development.local
18 | .env.test.local
19 | .env.production.local
20 |
21 | npm-debug.log*
22 | yarn-debug.log*
23 | yarn-error.log*
24 |
--------------------------------------------------------------------------------
/part7/ultimate-hooks/README.md:
--------------------------------------------------------------------------------
1 | # Ultimate hooks
2 |
3 | In this exercise, we are refactoring [this app](https://github.com/fullstack-hy2020/ultimate-hooks) using custom hooks. This app displays notes and phone numbers fetched from a backend server.
4 |
5 | However, we noticed that the same code responsible for fetching notes from the backend could be reused in the blog post application. Indeed, only the `baseUrl` differs. As a result, we extracted the code for communicating with a backend server into its own `useResource` hook.
6 |
7 | ## Start the application
8 |
9 | To start an application, do the following :
10 |
11 | ```bash
12 | # Install dependancies
13 | $ npm install
14 | # Start the JSON Server
15 | $ npm run server
16 | # On another terminal, start the application
17 | $ npm start
18 | ```
19 |
20 | You can then access the app on : http://localhost:3000/
21 |
22 | You can also see the content of the JSON Server by heading to:
23 | * http://localhost:3005/notes
24 | * http://localhost:3005/persons
25 |
--------------------------------------------------------------------------------
/part7/ultimate-hooks/db.json:
--------------------------------------------------------------------------------
1 | {
2 | "notes": [
3 | {
4 | "content": "custom-hookit aivan mahtavia",
5 | "id": 1
6 | },
7 | {
8 | "content": "paras feature ikinä <3",
9 | "id": 2
10 | }
11 | ],
12 | "persons": [
13 | {
14 | "name": "mluukkai",
15 | "number": "040-5483923",
16 | "id": 1
17 | }
18 | ]
19 | }
--------------------------------------------------------------------------------
/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": "^4.2.4",
7 | "@testing-library/react": "^9.4.0",
8 | "@testing-library/user-event": "^7.2.1",
9 | "axios": "^0.19.2",
10 | "react": "^16.12.0",
11 | "react-dom": "^16.12.0",
12 | "react-scripts": "3.3.1"
13 | },
14 | "scripts": {
15 | "start": "react-scripts start",
16 | "build": "react-scripts build",
17 | "test": "react-scripts test",
18 | "eject": "react-scripts eject",
19 | "server": "json-server --port=3005 --watch db.json"
20 | },
21 | "eslintConfig": {
22 | "extends": "react-app"
23 | },
24 | "browserslist": {
25 | "production": [
26 | ">0.2%",
27 | "not dead",
28 | "not op_mini all"
29 | ],
30 | "development": [
31 | "last 1 chrome version",
32 | "last 1 firefox version",
33 | "last 1 safari version"
34 | ]
35 | },
36 | "devDependencies": {
37 | "json-server": "^0.15.1"
38 | }
39 | }
40 |
--------------------------------------------------------------------------------
/part7/ultimate-hooks/public/favicon.ico:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/anancarv/fullstackopen/3b12bbb3f9ca4ca8c5b9c29df558d787e1009e8c/part7/ultimate-hooks/public/favicon.ico
--------------------------------------------------------------------------------
/part7/ultimate-hooks/public/logo192.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/anancarv/fullstackopen/3b12bbb3f9ca4ca8c5b9c29df558d787e1009e8c/part7/ultimate-hooks/public/logo192.png
--------------------------------------------------------------------------------
/part7/ultimate-hooks/public/logo512.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/anancarv/fullstackopen/3b12bbb3f9ca4ca8c5b9c29df558d787e1009e8c/part7/ultimate-hooks/public/logo512.png
--------------------------------------------------------------------------------
/part7/ultimate-hooks/public/manifest.json:
--------------------------------------------------------------------------------
1 | {
2 | "short_name": "React App",
3 | "name": "Create React App Sample",
4 | "icons": [
5 | {
6 | "src": "favicon.ico",
7 | "sizes": "64x64 32x32 24x24 16x16",
8 | "type": "image/x-icon"
9 | },
10 | {
11 | "src": "logo192.png",
12 | "type": "image/png",
13 | "sizes": "192x192"
14 | },
15 | {
16 | "src": "logo512.png",
17 | "type": "image/png",
18 | "sizes": "512x512"
19 | }
20 | ],
21 | "start_url": ".",
22 | "display": "standalone",
23 | "theme_color": "#000000",
24 | "background_color": "#ffffff"
25 | }
26 |
--------------------------------------------------------------------------------
/part7/ultimate-hooks/public/robots.txt:
--------------------------------------------------------------------------------
1 | # https://www.robotstxt.org/robotstxt.html
2 | User-agent: *
3 | Disallow:
4 |
--------------------------------------------------------------------------------
/part7/ultimate-hooks/src/App.js:
--------------------------------------------------------------------------------
1 |
2 | import React from 'react'
3 | import { useField, useResource } from './hooks'
4 |
5 | const App = () => {
6 | const content = useField('text')
7 | const name = useField('text')
8 | const number = useField('text')
9 |
10 | const [notes, noteService] = useResource('http://localhost:3005/notes')
11 | const [persons, personService] = useResource('http://localhost:3005/persons')
12 |
13 | const handleNoteSubmit = (event) => {
14 | event.preventDefault()
15 | noteService.create({ content: content.value })
16 | }
17 |
18 | const handlePersonSubmit = (event) => {
19 | event.preventDefault()
20 | personService.create({ name: name.value, number: number.value})
21 | }
22 |
23 | return (
24 |
25 |
notes
26 |
30 | {notes.map(n =>
{n.content}
)}
31 |
32 |
persons
33 |
38 | {persons.map(n =>
{n.name} {n.number}
)}
39 |
10 | JWT_SECRET=
11 | PASSWORD= # All users have the same password, we focus here on GraphQL
12 | ```
13 |
14 | To start an application:
15 | ```bash
16 | # Install dependancies
17 | $ npm install
18 |
19 | # Start the application
20 | $ npm run dev
21 | ```
22 |
23 | You can then access the GraphQL-playground on: http://localhost:4000/.
24 |
25 | This is a very useful tool for a developer, and can be used to make queries to the server.
--------------------------------------------------------------------------------
/part8/library-backend/models/author.js:
--------------------------------------------------------------------------------
1 | const mongoose = require('mongoose')
2 |
3 | const schema = new mongoose.Schema({
4 | name: {
5 | type: String,
6 | required: true,
7 | unique: true,
8 | minlength: 4
9 | },
10 | born: {
11 | type: Number,
12 | },
13 | })
14 |
15 | module.exports = mongoose.model('Author', schema)
--------------------------------------------------------------------------------
/part8/library-backend/models/book.js:
--------------------------------------------------------------------------------
1 | const mongoose = require('mongoose')
2 |
3 | const schema = new mongoose.Schema({
4 | title: {
5 | type: String,
6 | required: true,
7 | unique: true,
8 | minlength: 2
9 | },
10 | published: {
11 | type: Number,
12 | },
13 | author: {
14 | type: mongoose.Schema.Types.ObjectId,
15 | ref: 'Author'
16 | },
17 | genres: [
18 | { type: String}
19 | ]
20 | })
21 |
22 | module.exports = mongoose.model('Book', schema)
--------------------------------------------------------------------------------
/part8/library-backend/models/users.js:
--------------------------------------------------------------------------------
1 | const mongoose = require('mongoose')
2 | const uniqueValidator = require('mongoose-unique-validator')
3 |
4 | const schema = new mongoose.Schema({
5 | username: {
6 | type: String,
7 | required: true,
8 | unique: true,
9 | minlength: 3
10 | },
11 | favoriteGenre: {
12 | type: String,
13 | required: true,
14 | },
15 | })
16 |
17 | schema.plugin(uniqueValidator)
18 | module.exports = mongoose.model('User', schema)
--------------------------------------------------------------------------------
/part8/library-backend/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "library-backend",
3 | "version": "1.0.0",
4 | "description": "GraphQL backend for a small library",
5 | "main": "index.js",
6 | "scripts": {
7 | "start": "node index.js",
8 | "dev": "nodemon index.js",
9 | "test": "echo \"Error: no test specified\" && exit 1"
10 | },
11 | "author": "",
12 | "license": "ISC",
13 | "devDependencies": {
14 | "nodemon": "^2.0.7"
15 | },
16 | "dependencies": {
17 | "apollo-server": "^2.21.2",
18 | "dotenv": "^9.0.2",
19 | "graphql": "^15.5.0",
20 | "jsonwebtoken": "^8.5.1",
21 | "mongoose": "^5.12.8",
22 | "mongoose-unique-validator": "^2.0.3",
23 | "uuid": "^8.3.2"
24 | }
25 | }
26 |
--------------------------------------------------------------------------------
/part8/library-frontend/.gitignore:
--------------------------------------------------------------------------------
1 | # See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
2 |
3 | # dependencies
4 | /node_modules
5 | /.pnp
6 | .pnp.js
7 |
8 | # testing
9 | /coverage
10 |
11 | # production
12 | /build
13 |
14 | # misc
15 | .DS_Store
16 | .env.local
17 | .env.development.local
18 | .env.test.local
19 | .env.production.local
20 |
21 | npm-debug.log*
22 | yarn-debug.log*
23 | yarn-error.log*
24 |
--------------------------------------------------------------------------------
/part8/library-frontend/README.md:
--------------------------------------------------------------------------------
1 | ## GraphQL frontend
2 |
3 | Through the exercises, we will implement a GraphQL frontend for the GraphQL-library created previously.
4 |
5 |
6 | ### Start the application locally
7 | First, you need to start the backend from the previous exercise. To do so, head to the `part8/library-backend` directory and follow the instructions from the README.
8 |
9 |
10 | Then, start the frontend:
11 | ```bash
12 | # Install dependancies
13 | $ npm install
14 |
15 | # Start the application
16 | $ npm start
17 | ```
18 |
19 | You can then access the app on: http://localhost:3000/.
--------------------------------------------------------------------------------
/part8/library-frontend/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "frontend",
3 | "version": "0.1.0",
4 | "private": true,
5 | "dependencies": {
6 | "@apollo/client": "^3.3.15",
7 | "@testing-library/jest-dom": "^4.2.4",
8 | "@testing-library/react": "^9.4.1",
9 | "@testing-library/user-event": "^7.2.1",
10 | "apollo-link-context": "^1.0.20",
11 | "graphql": "^15.5.0",
12 | "react": "^16.12.0",
13 | "react-dom": "^16.12.0",
14 | "react-scripts": "3.4.0",
15 | "react-select": "^4.3.0"
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": "react-app"
25 | },
26 | "browserslist": {
27 | "production": [
28 | ">0.2%",
29 | "not dead",
30 | "not op_mini all"
31 | ],
32 | "development": [
33 | "last 1 chrome version",
34 | "last 1 firefox version",
35 | "last 1 safari version"
36 | ]
37 | }
38 | }
39 |
--------------------------------------------------------------------------------
/part8/library-frontend/public/favicon.ico:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/anancarv/fullstackopen/3b12bbb3f9ca4ca8c5b9c29df558d787e1009e8c/part8/library-frontend/public/favicon.ico
--------------------------------------------------------------------------------
/part8/library-frontend/public/logo192.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/anancarv/fullstackopen/3b12bbb3f9ca4ca8c5b9c29df558d787e1009e8c/part8/library-frontend/public/logo192.png
--------------------------------------------------------------------------------
/part8/library-frontend/public/logo512.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/anancarv/fullstackopen/3b12bbb3f9ca4ca8c5b9c29df558d787e1009e8c/part8/library-frontend/public/logo512.png
--------------------------------------------------------------------------------
/part8/library-frontend/public/manifest.json:
--------------------------------------------------------------------------------
1 | {
2 | "short_name": "React App",
3 | "name": "Create React App Sample",
4 | "icons": [
5 | {
6 | "src": "favicon.ico",
7 | "sizes": "64x64 32x32 24x24 16x16",
8 | "type": "image/x-icon"
9 | },
10 | {
11 | "src": "logo192.png",
12 | "type": "image/png",
13 | "sizes": "192x192"
14 | },
15 | {
16 | "src": "logo512.png",
17 | "type": "image/png",
18 | "sizes": "512x512"
19 | }
20 | ],
21 | "start_url": ".",
22 | "display": "standalone",
23 | "theme_color": "#000000",
24 | "background_color": "#ffffff"
25 | }
26 |
--------------------------------------------------------------------------------
/part8/library-frontend/public/robots.txt:
--------------------------------------------------------------------------------
1 | # https://www.robotstxt.org/robotstxt.html
2 | User-agent: *
3 | Disallow:
4 |
--------------------------------------------------------------------------------
/part8/library-frontend/src/components/Authors.js:
--------------------------------------------------------------------------------
1 | import React from 'react'
2 | import { useQuery } from '@apollo/client'
3 | import BornYearForm from './BornYearForm'
4 | import { ALL_AUTHORS } from '../queries'
5 |
6 | const Authors = ({show, notify}) => {
7 | const result = useQuery(ALL_AUTHORS)
8 |
9 | if (!show) {
10 | return null
11 | }
12 |
13 | if (result.loading) {
14 | return loading...
15 | }
16 |
17 | return (
18 |
19 |
authors
20 |
21 |
22 |
23 |
25 | born
26 |
27 |
28 | books
29 |
30 |
31 | {result.data.allAuthors.map(a =>
32 |
33 | {a.name}
34 | {a.born}
35 | {a.bookCount}
36 |
37 | )}
38 |
39 |
40 |
41 |
42 |
28 |
29 | books in your favorite genre {user.data.me.favoriteGenre}
30 |
31 |
32 |
33 |
34 | author
36 | published
37 |
38 | {favoriteBooks.map((a) => (
39 |
40 | {a.title}
41 | {a.author.name}
42 | {a.published}
43 |
44 | ))}
45 |
46 |
47 |
29 | ,
31 | document.getElementById('root')
32 | )
--------------------------------------------------------------------------------
/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 {
15 | allBooks {
16 | title
17 | published
18 | genres
19 | author {
20 | name
21 | }
22 | }
23 | }
24 | `
25 |
26 | export const ME = gql`
27 | query {
28 | me {
29 | username
30 | favoriteGenre
31 | }
32 | }
33 | `
34 |
35 | export const ALL_BOOKS_WITH_GENRE = gql`
36 | query getallBooks($genre: String!) {
37 | allBooks(genre: $genre) {
38 | title
39 | published
40 | genres
41 | author {
42 | name
43 | }
44 | }
45 | }
46 | `
47 |
48 | export const CREATE_BOOK = gql`
49 | mutation createBook($title: String!, $author: String!, $published: Int!, $genres: [String!]!){
50 | addBook(
51 | title: $title,
52 | author: $author,
53 | published: $published,
54 | genres: $genres
55 | ) {
56 | title,
57 | author
58 | }
59 | }
60 | `
61 |
62 | export const EDIT_BORN_YEAR = gql`
63 | mutation changeBornYear($name: String!, $setBornTo: Int!){
64 | editAuthor(
65 | name: $name,
66 | setBornTo: $setBornTo
67 | ) {
68 | name
69 | born
70 | }
71 | }
72 | `
73 |
74 | export const LOGIN = gql`
75 | mutation login($username: String!, $password: String!) {
76 | login(username: $username, password: $password) {
77 | value
78 | }
79 | }
80 | `
--------------------------------------------------------------------------------
/part9/README.md:
--------------------------------------------------------------------------------
1 | # Solutions for part 9 exercises
2 |
3 | This part is all about TypeScript: and open-source typed superset of JavaScript developed by Microsoft that compiles to plain JavaScript.
4 |
5 | In this part we will be using the tools previously introduced to build end-to-end features to an existing ecosystem with linters predefined and an existing codebase writing TypeScript.
--------------------------------------------------------------------------------
/part9/courseinfo/.eslintrc:
--------------------------------------------------------------------------------
1 | {
2 | "env": {
3 | "browser": true,
4 | "es6": true,
5 | "jest": true
6 | },
7 | "extends": [
8 | "eslint:recommended",
9 | "plugin:react/recommended",
10 | "plugin:@typescript-eslint/recommended"
11 | ],
12 | "plugins": ["react", "@typescript-eslint"],
13 | "settings": {
14 | "react": {
15 | "pragma": "React",
16 | "version": "detect"
17 | }
18 | },
19 | "rules": {
20 | "@typescript-eslint/explicit-function-return-type": 0
21 | }
22 | }
--------------------------------------------------------------------------------
/part9/courseinfo/.gitignore:
--------------------------------------------------------------------------------
1 | # See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
2 |
3 | # dependencies
4 | /node_modules
5 | /.pnp
6 | .pnp.js
7 |
8 | # testing
9 | /coverage
10 |
11 | # production
12 | /build
13 |
14 | # misc
15 | .DS_Store
16 | .env.local
17 | .env.development.local
18 | .env.test.local
19 | .env.production.local
20 |
21 | npm-debug.log*
22 | yarn-debug.log*
23 | yarn-error.log*
24 |
--------------------------------------------------------------------------------
/part9/courseinfo/README.md:
--------------------------------------------------------------------------------
1 | # Course information
2 |
3 | Simple web applicaton for understanding the core concepts of TypeScript with React
4 |
5 | ## Start the application
6 |
7 | To start an application, do the following :
8 |
9 | ```bash
10 | # Install dependancies
11 | $ yarn install
12 |
13 | # Start the application
14 | $ yarn start
15 | ```
16 |
17 | You can then access the app on : [http://localhost:3000/](http://localhost:3000/)
--------------------------------------------------------------------------------
/part9/courseinfo/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "courseinfo",
3 | "version": "0.1.0",
4 | "private": true,
5 | "dependencies": {
6 | "@testing-library/jest-dom": "^4.2.4",
7 | "@testing-library/react": "^9.3.2",
8 | "@testing-library/user-event": "^7.1.2",
9 | "@types/jest": "^24.0.0",
10 | "@types/node": "^12.0.0",
11 | "@types/react": "^16.9.0",
12 | "@types/react-dom": "^16.9.0",
13 | "react": "^16.13.1",
14 | "react-dom": "^16.13.1",
15 | "react-scripts": "3.4.1",
16 | "typescript": "~3.7.2"
17 | },
18 | "scripts": {
19 | "start": "react-scripts start",
20 | "build": "react-scripts build",
21 | "test": "react-scripts test",
22 | "eject": "react-scripts eject",
23 | "lint": "eslint './src/**/*.{ts,tsx}'"
24 | },
25 | "eslintConfig": {
26 | "extends": "react-app"
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 | }
41 |
--------------------------------------------------------------------------------
/part9/courseinfo/public/favicon.ico:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/anancarv/fullstackopen/3b12bbb3f9ca4ca8c5b9c29df558d787e1009e8c/part9/courseinfo/public/favicon.ico
--------------------------------------------------------------------------------
/part9/courseinfo/public/logo192.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/anancarv/fullstackopen/3b12bbb3f9ca4ca8c5b9c29df558d787e1009e8c/part9/courseinfo/public/logo192.png
--------------------------------------------------------------------------------
/part9/courseinfo/public/logo512.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/anancarv/fullstackopen/3b12bbb3f9ca4ca8c5b9c29df558d787e1009e8c/part9/courseinfo/public/logo512.png
--------------------------------------------------------------------------------
/part9/courseinfo/public/manifest.json:
--------------------------------------------------------------------------------
1 | {
2 | "short_name": "React App",
3 | "name": "Create React App Sample",
4 | "icons": [
5 | {
6 | "src": "favicon.ico",
7 | "sizes": "64x64 32x32 24x24 16x16",
8 | "type": "image/x-icon"
9 | },
10 | {
11 | "src": "logo192.png",
12 | "type": "image/png",
13 | "sizes": "192x192"
14 | },
15 | {
16 | "src": "logo512.png",
17 | "type": "image/png",
18 | "sizes": "512x512"
19 | }
20 | ],
21 | "start_url": ".",
22 | "display": "standalone",
23 | "theme_color": "#000000",
24 | "background_color": "#ffffff"
25 | }
26 |
--------------------------------------------------------------------------------
/part9/courseinfo/public/robots.txt:
--------------------------------------------------------------------------------
1 | # https://www.robotstxt.org/robotstxt.html
2 | User-agent: *
3 | Disallow:
4 |
--------------------------------------------------------------------------------
/part9/courseinfo/src/App.tsx:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import Header from './components/Header'
3 | import Content from './components/Content'
4 | import Total from './components/Total'
5 | import { CoursePartOne, CoursePartTwo, CoursePartThree, CoursePartFour } from './types'
6 |
7 | type CoursePart = CoursePartOne | CoursePartTwo | CoursePartThree | CoursePartFour;
8 |
9 |
10 | const App: React.FC = () => {
11 | const courseName: string = "Half Stack application development";
12 | const courseParts: CoursePart[] = [
13 | {
14 | name: "Fundamentals",
15 | exerciseCount: 10,
16 | description: "This is an awesome course part"
17 | },
18 | {
19 | name: "Using props to pass data",
20 | exerciseCount: 7,
21 | groupProjectCount: 3
22 | },
23 | {
24 | name: "Deeper type usage",
25 | exerciseCount: 14,
26 | description: "Confusing description",
27 | exerciseSubmissionLink: "https://fake-exercise-submit.made-up-url.dev"
28 | },
29 | {
30 | name: "Another course part",
31 | exerciseCount: 8,
32 | description: "Confusing description",
33 | comment: "This is a comment"
34 | }
35 | ];
36 |
37 | return (
38 |
39 |
40 |
43 | );
44 | };
45 |
46 | export default App;
47 |
--------------------------------------------------------------------------------
/part9/courseinfo/src/components/Content.tsx:
--------------------------------------------------------------------------------
1 | import React from 'react'
2 | import Part from './Part'
3 | import { ContentProps } from '../types'
4 |
5 | const Content: React.FC = ({courseParts}) =>
6 |
7 | {courseParts.map((part, i) =>
8 |
9 | )}
10 |
= ({courseName}) => {courseName}
5 |
6 | export default Header
--------------------------------------------------------------------------------
/part9/courseinfo/src/components/Part.tsx:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import { PartProps } from '../types'
3 |
4 | const Part: React.FC = ({part}) => {
5 | switch (part.name) {
6 | case "Fundamentals":
7 | return (
8 |
9 | {part.name} {part.description} {part.exerciseCount}
10 |
11 | )
12 | case "Using props to pass data":
13 | return (
14 |
15 | {part.name} {part.description} {part.exerciseCount} {part.groupProjectCount}
16 |
17 | )
18 | case "Deeper type usage":
19 | return (
20 |
21 | {part.name} {part.description} {part.exerciseCount} {part.exerciseSubmissionLink}
22 |
23 | )
24 | case "Another course part":
25 | return (
26 |
27 | {part.name} {part.description} {part.exerciseCount} {part.comment}
28 |
29 | )
30 | default:
31 | return null;
32 | }
33 | }
34 |
35 | export default Part;
--------------------------------------------------------------------------------
/part9/courseinfo/src/components/Total.tsx:
--------------------------------------------------------------------------------
1 | import React from 'react'
2 | import { ContentProps } from '../types'
3 |
4 | const Total: React.FC = ({courseParts}) => {
5 | const total = courseParts.reduce((sum, part) => sum + part.exerciseCount, 0)
6 |
7 | return (
8 | Number of exercises {total}
9 | )
10 | }
11 |
12 | export default Total
--------------------------------------------------------------------------------
/part9/courseinfo/src/index.tsx:
--------------------------------------------------------------------------------
1 | import React from "react";
2 | import ReactDOM from "react-dom";
3 | import App from './App'
4 |
5 | ReactDOM.render( = diagnoseEntries;
5 |
6 | const getAll = (): Array => {
7 | return diagnoses;
8 | };
9 |
10 | export default {
11 | getAll
12 | };
13 |
--------------------------------------------------------------------------------
/part9/patientor-backend/src/services/patientService.ts:
--------------------------------------------------------------------------------
1 | import { v4 as uuidv4 } from 'uuid';
2 | import patientEntries from '../../data/patients';
3 | import {
4 | NonSensitivePatientEntry,
5 | PatientEntry,
6 | NewPatientEntry
7 | } from '../types';
8 |
9 | const patients: Array = patientEntries.map(
10 | ({ id, name, dateOfBirth, gender, occupation, entries }) => ({
11 | id,
12 | name,
13 | dateOfBirth,
14 | gender,
15 | occupation,
16 | entries
17 | })
18 | );
19 |
20 | const getAll = (): Array => {
21 | return patients;
22 | };
23 |
24 | const getOne = (id: string): NonSensitivePatientEntry | undefined => {
25 | return patients.find((patient) => patient.id === id);
26 | };
27 |
28 | const addPatient = (entry: NewPatientEntry): PatientEntry => {
29 | const newPatientEntry = {
30 | id: uuidv4(),
31 | ...entry
32 | };
33 | patients.push(newPatientEntry);
34 | return newPatientEntry;
35 | };
36 |
37 | export default {
38 | getAll,
39 | getOne,
40 | addPatient
41 | };
42 |
--------------------------------------------------------------------------------
/part9/patientor-backend/tsconfig.json:
--------------------------------------------------------------------------------
1 | {
2 | "compilerOptions": {
3 | "target": "ES6",
4 | "outDir": "./build/",
5 | "module": "commonjs",
6 | "strict": true,
7 | "noUnusedLocals": true,
8 | "noUnusedParameters": true,
9 | "noImplicitReturns": true,
10 | "noFallthroughCasesInSwitch": true,
11 | "esModuleInterop": true,
12 | "resolveJsonModule": true
13 | }
14 | }
--------------------------------------------------------------------------------
/part9/patientor-frontend/.eslintrc:
--------------------------------------------------------------------------------
1 | {
2 | "extends": [
3 | "eslint:recommended",
4 | "plugin:@typescript-eslint/recommended",
5 | "plugin:react/recommended",
6 | "plugin:@typescript-eslint/recommended-requiring-type-checking"
7 | ],
8 | "plugins": ["@typescript-eslint", "react"],
9 | "env": {
10 | "browser": true,
11 | "es6": true
12 | },
13 | "rules": {
14 | "@typescript-eslint/semi": ["error"],
15 | "@typescript-eslint/explicit-function-return-type": 0,
16 | "@typescript-eslint/no-unused-vars": [
17 | "error", { "argsIgnorePattern": "^_" }
18 | ],
19 | "@typescript-eslint/no-explicit-any": 1,
20 | "no-case-declarations": 0,
21 | "react/prop-types": 0
22 | },
23 | "settings": {
24 | "react": {
25 | "pragma": "React",
26 | "version": "detect"
27 | }
28 | },
29 | "parser": "@typescript-eslint/parser",
30 | "parserOptions": {
31 | "project": "./tsconfig.json"
32 | }
33 | }
--------------------------------------------------------------------------------
/part9/patientor-frontend/.gitignore:
--------------------------------------------------------------------------------
1 | node_modules
2 |
--------------------------------------------------------------------------------
/part9/patientor-frontend/.prettierrc:
--------------------------------------------------------------------------------
1 | {
2 | "trailingComma": "none",
3 | "tabWidth": 2,
4 | "semi": true,
5 | "singleQuote": true
6 | }
--------------------------------------------------------------------------------
/part9/patientor-frontend/README.md:
--------------------------------------------------------------------------------
1 | # Patientor - frontend
2 |
3 | This project was bootstrapped with [Create React App](https://github.com/facebook/create-react-app).
4 |
5 | ## Available Scripts
6 |
7 | In the project directory, you can run:
8 |
9 | ### `npm install`
10 |
11 | Install the project dependencies.
12 |
13 | ### `npm start`
14 |
15 | Runs the app in the development mode.
14 | Add a new patient
15 |
16 | {error && {`Error: ${error}`} }
17 |
19 |
20 | );
21 |
22 | export default AddPatientModal;
23 |
--------------------------------------------------------------------------------
/part9/patientor-frontend/src/PatientPage/HealthCheck.tsx:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import { Icon, Card } from 'semantic-ui-react';
3 | import { HealthCheckEntry } from '../types';
4 |
5 | const style = { margin: 10 };
6 |
7 | const HealthCheck: React.FC<{ entry: HealthCheckEntry }> = ({ entry }) => {
8 | let color: 'green' | 'yellow' | 'orange' | 'red';
9 |
10 | switch (entry.healthCheckRating) {
11 | case 0:
12 | color = 'green';
13 | break;
14 | case 1:
15 | color = 'yellow';
16 | break;
17 | case 2:
18 | color = 'orange';
19 | break;
20 | case 3:
21 | color = 'red';
22 | break;
23 | default:
24 | color = 'green';
25 | break;
26 | }
27 |
28 | return (
29 |
30 |
31 |
32 | {entry.date}
34 |
36 |
38 |
39 |
40 | );
41 | };
42 |
43 | export default HealthCheck;
44 |
--------------------------------------------------------------------------------
/part9/patientor-frontend/src/PatientPage/Hospital.tsx:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import { Icon, Card } from 'semantic-ui-react';
3 | import { HospitalEntry } from '../types';
4 |
5 | const style = { margin: 10 };
6 |
7 | const Hospital: React.FC<{ entry: HospitalEntry }> = ({ entry }) => (
8 |
9 |
10 |
11 | {entry.date}
13 |
15 |
16 | );
17 |
18 | export default Hospital;
19 |
--------------------------------------------------------------------------------
/part9/patientor-frontend/src/PatientPage/OccupationalHealthcare.tsx:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import { Icon, Card } from 'semantic-ui-react';
3 | import { OccupationalHealthcareEntry } from '../types';
4 |
5 | const style = { margin: 10 };
6 |
7 | const OccupationalHealthcare: React.FC<{
8 | entry: OccupationalHealthcareEntry;
9 | }> = ({ entry }) => (
10 |
11 |
12 |
13 | {entry.date}
15 |
17 |
18 | );
19 |
20 | export default OccupationalHealthcare;
21 |
--------------------------------------------------------------------------------
/part9/patientor-frontend/src/components/HealthRatingBar.tsx:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import { Rating } from 'semantic-ui-react';
3 |
4 | type BarProps = {
5 | rating: number;
6 | showText: boolean;
7 | };
8 |
9 | const HEALTHBAR_TEXTS = [
10 | 'The patient is in great shape',
11 | 'The patient has a low risk of getting sick',
12 | 'The patient has a high risk of getting sick',
13 | 'The patient has a diagnosed condition'
14 | ];
15 |
16 | const HealthRatingBar = ({ rating, showText }: BarProps) => {
17 | return (
18 |
19 | {
}
20 | {showText ?
{HEALTHBAR_TEXTS[rating]}
: null}
21 |
9 | ,
11 | document.getElementById('root')
12 | );
13 |
--------------------------------------------------------------------------------
/part9/patientor-frontend/src/react-app-env.d.ts:
--------------------------------------------------------------------------------
1 | /// ]>([
17 | initialState,
18 | () => initialState
19 | ]);
20 |
21 | type StateProviderProps = {
22 | reducer: React.Reducer;
23 | children: React.ReactElement;
24 | };
25 |
26 | export const StateProvider: React.FC = ({
27 | reducer,
28 | children
29 | }: StateProviderProps) => {
30 | const [state, dispatch] = useReducer(reducer, initialState);
31 | return (
32 |
33 | {children}
34 |
35 | );
36 | };
37 | export const useStateValue = () => useContext(StateContext);
38 |
--------------------------------------------------------------------------------
/part9/patientor-frontend/src/types.ts:
--------------------------------------------------------------------------------
1 | export interface Diagnosis {
2 | code: string;
3 | name: string;
4 | latin?: string;
5 | }
6 |
7 | export enum Gender {
8 | Male = 'male',
9 | Female = 'female',
10 | Other = 'other'
11 | }
12 |
13 | interface BaseEntry {
14 | id: string;
15 | description: string;
16 | date: string;
17 | specialist: string;
18 | diagnosisCodes?: Array;
19 | }
20 |
21 | export enum HealthCheckRating {
22 | 'Healthy' = 0,
23 | 'LowRisk' = 1,
24 | 'HighRisk' = 2,
25 | 'CriticalRisk' = 3
26 | }
27 |
28 | export interface HealthCheckEntry extends BaseEntry {
29 | type: 'HealthCheck';
30 | healthCheckRating: HealthCheckRating;
31 | }
32 |
33 | export interface OccupationalHealthcareEntry extends BaseEntry {
34 | type: 'OccupationalHealthcare';
35 | employerName: string;
36 | sickLeave?: {
37 | startDate: string;
38 | endDate: string;
39 | };
40 | }
41 |
42 | export interface HospitalEntry extends BaseEntry {
43 | type: 'Hospital';
44 | discharge: {
45 | date: string;
46 | criteria: string;
47 | };
48 | }
49 |
50 | export type Entry =
51 | | HospitalEntry
52 | | OccupationalHealthcareEntry
53 | | HealthCheckEntry;
54 |
55 | export interface Patient {
56 | id: string;
57 | name: string;
58 | occupation: string;
59 | gender: Gender;
60 | ssn?: string;
61 | dateOfBirth?: string;
62 | entries: Entry[];
63 | }
64 |
--------------------------------------------------------------------------------
/part9/patientor-frontend/tsconfig.json:
--------------------------------------------------------------------------------
1 | {
2 | "compilerOptions": {
3 | "target": "es5",
4 | "lib": [
5 | "dom",
6 | "dom.iterable",
7 | "esnext"
8 | ],
9 | "skipLibCheck": true,
10 | "esModuleInterop": true,
11 | "allowSyntheticDefaultImports": true,
12 | "strict": true,
13 | "forceConsistentCasingInFileNames": true,
14 | "module": "esnext",
15 | "moduleResolution": "node",
16 | "resolveJsonModule": true,
17 | "isolatedModules": true,
18 | "noEmit": true,
19 | "jsx": "react",
20 | "downlevelIteration": true,
21 | "allowJs": true
22 | },
23 | "include": [
24 | "src"
25 | ]
26 | }
27 |
--------------------------------------------------------------------------------
24 |