Add button

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

api/config/credentials.yml.enc

@@ -1 +1 @@
-TWWkF7e+LzqcrrttF7VdMWVoYMJfoe6hOYoi3Cr29Wto4gtgAmcYIUNFOkd4ERbnezlHCGfTzHOgGzmAKpuMAhYpmYUQmr6VwVjwElOlMQfkviR68ZnCvB8Qn627piM2elNF0Zh77XegD10G75WINfgV6J2QBkAGAC2n4j1z5oW+YiKvzY7X8YAYPTOvy6UsfeWgbfeZppSSTWZ96Bm3TenUsWrHWTmPSQy9Acc2ESkWn1jwVUtMow1pflMV8reXPQ9E7Ka9wR/Fb89/lEJnaU7NzpCok+QqD0kKzUyQet67ure9Qf0TUJWdcFdGyK+c/r6Wvubujnj+lZTDjoI/FCIoU6bfSiLwO/zwMiMK/TfrTWupxlrtVgbb+/V5KpZHJRECJsrO6TH0WIIXJUh+CgMbeG2NHzZSMNub--3xEx9GVjYV1rq1bS--Jsp02/gJHo5LhqmkQj1jrQ==
+wGpXtNQvWFLteuK79pX1cB5+UIyrZAaXjtFgNwM6qin8lCF1hGZncTKjW4z3nZJveekR8GwHzXIJloGXb3le02jiLSMdTZcw2fqx/Fc7O7HDcERbqOtiCg8sYF8fBW9MDmhsUL5VYTN7SRNIxGzAYpQS3YkUfOR5xMbEIFrhG8uHN/4+B8tmpcbXqmLqCPcCwdLjXM5RrYbYR41i7AA6mu2XP9A5vVv9sROtxK8+D+jO+zWqn1FVm8HsiW0UIJObgKN39iD9fR70CW7hO2ga26rIkgDCxRDrQASx2pljV/PHM9SyxDxirV9FwBGKDILjx3i7xatnDsLtOHbLV6j4KACLTH4Q8WQvWpLOjRYdRJQoAvwhqQBJ1cz7vg4WGpGrDjgvHHkn76ZdDZ/QIAj4x6Ct7JYaF04Khaj+--i5NqeGsOAvoOkm3g--GG70z+7MR5KXPqM8aQ1kFg==

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

realworld.code-workspace

@@ -7,5 +7,8 @@
       "path": "./web"
     }
   ],
-  "settings": {}
+  "settings": {
+    "editor.defaultFormatter": "esbenp.prettier-vscode",
+    "editor.formatOnSave": true
+  }
 }

web/.storybook/main.js

@@ -1,6 +1,7 @@
 module.exports = {
   stories: ['../src/**/*.stories.js'],
   addons: [
+    '@storybook/addon-essentials',
     '@storybook/addon-actions',
     '@storybook/addon-links',
     'storybook-addon-apollo-client',

web/.storybook/preview-head.html

@@ -3,11 +3,8 @@
   rel="stylesheet"
   type="text/css"
 ></link>
-<link
-  href="//fonts.googleapis.com/css?family=Titillium+Web:700|Source+Serif+Pro:400,700|Merriweather+Sans:400,700|Source+Sans+Pro:400,300,600,700,300italic,400italic,600italic,700italic&amp;display=swap"
-  rel="stylesheet"
-  type="text/css"
-></link>
+<link rel="preconnect" href="https://fonts.gstatic.com">
+<link href="https://fonts.googleapis.com/css2?family=Lato:wght@700&display=swap" rel="stylesheet">
 <link
   href="//demo.productionready.io/main.css"
   rel="stylesheet"

web/package.json

@@ -9,6 +9,7 @@
   },
   "dependencies": {
     "@apollo/client": "3.3.14",
+    "@storybook/addon-essentials": "^6.2.7",
     "clsx": "1.1.1",
     "cookie": "0.4.1",
     "formik": "2.2.6",
@@ -20,6 +21,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": {

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 (
+    <form onSubmit={handleSubmit}>
+      <div>
+        <label>Body</label>
+        <textarea name="body" onChange={handleChange} value={form.body} />
+      </div>
+      <div>
+        <button type="submit">Create Question</button>
+      </div>
+    </form>
+  );
+}
+
+const CreateQuestionFormCreateQuestionMutation = gql`
+  mutation CreateQuestionFormCreateQuestionMutation(
+    $input: CreateQuestionInput!
+  ) {
+    createQuestion(input: $input) {
+      question {
+        id
+        body
+      }
+    }
+  }
+`;

web/src/containers/questions-connection-list/index.js

@@ -0,0 +1,23 @@
+import { gql } from '@apollo/client';
+
+export function QuestionsConnectionList({ questionsConnection }) {
+  if (!questionsConnection || questionsConnection.edges.length === 0)
+    return null;
+
+  return (
+    <ul>
+      {questionsConnection.edges.map(edge => (
+        <li key={edge.node.id}>{edge.node.body}</li>
+      ))}
+    </ul>
+  );
+}
+
+QuestionsConnectionList.fragments = {
+  question: gql`
+    fragment QuestionsConnectionListQuestion on Question {
+      id
+      body
+    }
+  `,
+};

web/src/containers/questions-page/index.js

@@ -0,0 +1,29 @@
+import * as React from 'react';
+import { useQuery, gql } from '@apollo/client';
+import { CreateQuestionForm } from '../create-question-form';
+import { QuestionsConnectionList } from '../questions-connection-list';
+
+export const QuestionsPageQuery = gql`
+  query QuestionsPageQuery {
+    questionsConnection {
+      edges {
+        node {
+          ...QuestionsConnectionListQuestion
+        }
+      }
+    }
+  }
+  ${QuestionsConnectionList.fragments.question}
+`;
+
+export function QuestionsPage() {
+  const query = useQuery(QuestionsPageQuery, { variables: { first: 10 } });
+  console.log(query);
+
+  return (
+    <>
+      <CreateQuestionForm />
+      <QuestionsConnectionList {...query.data} />
+    </>
+  );
+}