From 56cfb908fc4596c74d5f7b68aeacfd8cd898b829 Mon Sep 17 00:00:00 2001 From: Luke D Date: Fri, 9 Apr 2021 12:33:58 -0700 Subject: [PATCH] Add container component for feature: questions list. --- api/app/graphql/mutations/create_question.rb | 2 +- api/config/credentials.yml.enc | 2 +- api/db/seeds.rb | 12 ++- realworld.code-workspace | 5 +- web/package.json | 1 + .../containers/create-question-form/index.js | 80 +++++++++++++++++++ .../questions-connection-list/index.js | 23 ++++++ web/src/pages/_document.js | 43 ++++++++++ web/src/pages/questions.js | 28 +++++++ web/yarn.lock | 80 +++++++++++++++++-- 10 files changed, 258 insertions(+), 18 deletions(-) create mode 100644 web/src/containers/create-question-form/index.js create mode 100644 web/src/containers/questions-connection-list/index.js create mode 100644 web/src/pages/_document.js create mode 100644 web/src/pages/questions.js diff --git a/api/app/graphql/mutations/create_question.rb b/api/app/graphql/mutations/create_question.rb index 91965b96..2d13b306 100644 --- a/api/app/graphql/mutations/create_question.rb +++ b/api/app/graphql/mutations/create_question.rb @@ -4,7 +4,7 @@ module Mutations class CreateQuestion < Mutations::BaseMutation class CreateQuestionInput < Types::BaseInputObject argument :body, String, required: true - argument :tag_ids, [ID], required: true + argument :tag_ids, [ID], required: false def prepare to_h diff --git a/api/config/credentials.yml.enc b/api/config/credentials.yml.enc index cbd20ba5..0dca3114 100644 --- a/api/config/credentials.yml.enc +++ b/api/config/credentials.yml.enc @@ -1 +1 @@ -TWWkF7e+LzqcrrttF7VdMWVoYMJfoe6hOYoi3Cr29Wto4gtgAmcYIUNFOkd4ERbnezlHCGfTzHOgGzmAKpuMAhYpmYUQmr6VwVjwElOlMQfkviR68ZnCvB8Qn627piM2elNF0Zh77XegD10G75WINfgV6J2QBkAGAC2n4j1z5oW+YiKvzY7X8YAYPTOvy6UsfeWgbfeZppSSTWZ96Bm3TenUsWrHWTmPSQy9Acc2ESkWn1jwVUtMow1pflMV8reXPQ9E7Ka9wR/Fb89/lEJnaU7NzpCok+QqD0kKzUyQet67ure9Qf0TUJWdcFdGyK+c/r6Wvubujnj+lZTDjoI/FCIoU6bfSiLwO/zwMiMK/TfrTWupxlrtVgbb+/V5KpZHJRECJsrO6TH0WIIXJUh+CgMbeG2NHzZSMNub--3xEx9GVjYV1rq1bS--Jsp02/gJHo5LhqmkQj1jrQ== \ No newline at end of file +wGpXtNQvWFLteuK79pX1cB5+UIyrZAaXjtFgNwM6qin8lCF1hGZncTKjW4z3nZJveekR8GwHzXIJloGXb3le02jiLSMdTZcw2fqx/Fc7O7HDcERbqOtiCg8sYF8fBW9MDmhsUL5VYTN7SRNIxGzAYpQS3YkUfOR5xMbEIFrhG8uHN/4+B8tmpcbXqmLqCPcCwdLjXM5RrYbYR41i7AA6mu2XP9A5vVv9sROtxK8+D+jO+zWqn1FVm8HsiW0UIJObgKN39iD9fR70CW7hO2ga26rIkgDCxRDrQASx2pljV/PHM9SyxDxirV9FwBGKDILjx3i7xatnDsLtOHbLV6j4KACLTH4Q8WQvWpLOjRYdRJQoAvwhqQBJ1cz7vg4WGpGrDjgvHHkn76ZdDZ/QIAj4x6Ct7JYaF04Khaj+--i5NqeGsOAvoOkm3g--GG70z+7MR5KXPqM8aQ1kFg== \ No newline at end of file diff --git a/api/db/seeds.rb b/api/db/seeds.rb index 9a95b10e..50e892b9 100644 --- a/api/db/seeds.rb +++ b/api/db/seeds.rb @@ -32,16 +32,14 @@ user.build_profile user.save! 20.times do - user.articles.build( + user.questions.build( body: Faker::Lorem.paragraph(sentence_count: 10), - description: Faker::Lorem.sentence, - title: Faker::Lorem.sentence - ) do |article| - article.save! - article.tags << Tag.offset(rand(Tag.count)).first + ) do |question| + question.save! + question.tags << Tag.offset(rand(Tag.count)).first 5.times do User.offset(rand(User.count)).first.comments.create( - article: article, + question: question, body: Faker::Lorem.sentence ) end diff --git a/realworld.code-workspace b/realworld.code-workspace index 6bc1d322..5578dd66 100644 --- a/realworld.code-workspace +++ b/realworld.code-workspace @@ -7,5 +7,8 @@ "path": "./web" } ], - "settings": {} + "settings": { + "editor.defaultFormatter": "esbenp.prettier-vscode", + "editor.formatOnSave": true + } } diff --git a/web/package.json b/web/package.json index 9ad9048d..6fc5a935 100644 --- a/web/package.json +++ b/web/package.json @@ -20,6 +20,7 @@ "react": "17.0.2", "react-dom": "17.0.2", "react-markdown": "5.0.3", + "styled-components": "5.1.1", "yup": "0.32.9" }, "scripts": { diff --git a/web/src/containers/create-question-form/index.js b/web/src/containers/create-question-form/index.js new file mode 100644 index 00000000..1dc54e6e --- /dev/null +++ b/web/src/containers/create-question-form/index.js @@ -0,0 +1,80 @@ +import React from 'react'; +import { useMutation, gql } from '@apollo/client'; + +function formReducer(state, partial) { + return { ...state, ...partial }; +} + +const DEFAULT_FORM = { body: '', tagIds: [] }; + +export function CreateQuestionForm() { + const [form, setForm] = React.useReducer(formReducer, DEFAULT_FORM); + const [createQuestion] = useMutation( + CreateQuestionFormCreateQuestionMutation, + { + update(cache, response) { + cache.modify({ + fields: { + questionsConnection(questionsConnection) { + const newQuestionRef = cache.writeFragment({ + data: response.data.createQuestion.question, + fragment: gql` + fragment CreateQuestionFormNewQuestion on Question { + id + body + } + `, + }); + + return { + ...questionsConnection, + edges: [newQuestionRef, ...questionsConnection.edges], + }; + }, + }, + }); + }, + } + ); + + const handleChange = event => { + event.preventDefault(); + event.stopPropagation(); + + const { name, value } = event.currentTarget; + + setForm({ [name]: value }); + }; + + const handleSubmit = event => { + event.preventDefault(); + createQuestion({ variables: { input: form } }).then(() => + setForm(DEFAULT_FORM) + ); + }; + + return ( +
+
+ +