Add container component for feature: questions list

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/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": {

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/pages/_document.js

@@ -0,0 +1,43 @@
+import * as React from 'react';
+import Document, { Html, Head, Main, NextScript } from 'next/document';
+import { ServerStyleSheet } from 'styled-components';
+
+class NextDocument extends Document {
+  static async getInitialProps(ctx) {
+    const sheet = new ServerStyleSheet();
+    const originalRenderPage = ctx.renderPage;
+
+    try {
+      ctx.renderPage = () =>
+        originalRenderPage({
+          enhanceApp: App => props => sheet.collectStyles(<App {...props} />),
+        });
+
+      const initialProps = await Document.getInitialProps(ctx);
+      return {
+        ...initialProps,
+        styles: (
+          <>
+            {initialProps.styles}
+            {sheet.getStyleElement()}
+          </>
+        ),
+      };
+    } finally {
+      sheet.seal();
+    }
+  }
+  render() {
+    return (
+      <Html lang="en-US">
+        <Head />
+        <body>
+          <Main />
+          <NextScript />
+        </body>
+      </Html>
+    );
+  }
+}
+
+export default NextDocument;

web/src/pages/questions.js

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