Created
June 8, 2020 04:55
-
-
Save hewrin/bee67abd8d15f34a18d07071d5b8dcd5 to your computer and use it in GitHub Desktop.
I'm trying to create an Editable Table, But for some reason the `values` value is empty even though I have set initialValues.
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| import React, { useEffect, useState, useCallback } from "react" | |
| import "@shopify/polaris/styles.css"; | |
| import { AppProvider, Card, ResourceList, ResourceItem, TextField, FormLayout, Filters, Page } from '@shopify/polaris'; | |
| import ApolloClient from 'apollo-boost'; | |
| import { gql } from "apollo-boost"; | |
| import { Formik, Form, Field, FieldArray } from 'formik'; | |
| function ArticleTable ({token}) { | |
| const [queryValue, setQueryValue] = useState(null); | |
| const [blogPostList, setblogPostList] = useState([]); | |
| const [initialBlogPostList, setinitialBlogPostList] = useState([]); | |
| const client = new ApolloClient({ | |
| uri: 'https://stuff-for-writers.myshopify.com/api/2019-07/graphql.json', | |
| headers: { | |
| 'Content-Type': "application/graphql", | |
| 'X-Shopify-Storefront-Access-Token': token.access_token, | |
| } | |
| }); | |
| useEffect(() => { | |
| client.query({ | |
| query: gql` | |
| { | |
| articles(first: 20) { | |
| edges { | |
| node { | |
| blog { | |
| id | |
| title | |
| } | |
| title | |
| content | |
| excerpt | |
| handle | |
| id | |
| tags | |
| seo { | |
| description | |
| title | |
| } | |
| authorV2 { | |
| name | |
| } | |
| } | |
| } | |
| } | |
| } | |
| ` | |
| }) | |
| .then(result => { | |
| const blogPosts = result.data.articles.edges.map(article => { | |
| return { | |
| blogTitle: article.node.blog.title, | |
| blogId: article.node.blog.id, | |
| content: article.node.content, | |
| authorName: article.node.authorV2.name, | |
| excerpt: article.node.excerpt, | |
| handle: article.node.handle, | |
| tags: article.node.tags.join(','), | |
| title: article.node.title, | |
| metadataDescription: article.node.seo.description, | |
| metadataTitle: article.node.seo.title | |
| } | |
| }) | |
| setblogPostList(blogPosts) | |
| setinitialBlogPostList(blogPosts) | |
| } | |
| ); | |
| }, []); | |
| useEffect(() => { | |
| if (queryValue) { | |
| const searchRegex = queryValue && new RegExp(`${queryValue}`, "gi"); | |
| const result = blogPostList.filter(blogPost => | |
| (searchRegex.test(blogPost.title)) || | |
| (searchRegex.test(blogPost.authorName)) || | |
| (searchRegex.test(blogPost.tags)) || | |
| (searchRegex.test(blogPost.metafieldTitle)) || | |
| (searchRegex.test(blogPost.metafieldDescription)) | |
| ) | |
| setblogPostList(result); | |
| } else { | |
| setblogPostList(initialBlogPostList); | |
| } | |
| }, [queryValue]); | |
| const handleFiltersQueryChange = useCallback( | |
| (value) => setQueryValue(value), | |
| [], | |
| ); | |
| const filterControl = ( | |
| <Filters | |
| queryValue={queryValue} | |
| filters={[]} | |
| onQueryChange={handleFiltersQueryChange} | |
| > | |
| </Filters> | |
| ); | |
| return ( | |
| <AppProvider> | |
| <Page title="Articles"></Page> | |
| <Card> | |
| <Formik initialValues={{ posts: blogPostList}} | |
| onSubmit={values => console.log(values)} | |
| render={({ values }) => { | |
| return( | |
| <Form> | |
| <FieldArray | |
| name="posts" | |
| render={() => { | |
| return ( | |
| <div> | |
| {values.posts.map((post, index) => ( | |
| <div key={index}> | |
| <Field name={`posts[${index}].title`} /> | |
| <Field name={`posts[${index}].authorName`} /> | |
| <Field name={`posts[${index}].tags`}/> | |
| <Field name={`posts[${index}].metafieldTitle`} /> | |
| <Field name={`posts[${index}].metafieldDescription`} /> | |
| </div> | |
| ))} | |
| </div> | |
| ) | |
| }} | |
| > | |
| </FieldArray> | |
| </Form> | |
| ) | |
| }} | |
| > | |
| </Formik> | |
| </Card> | |
| </AppProvider> | |
| ); | |
| } | |
| export default ArticleTable |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment