move feed query

marguerrrite · Aug 15, 2021 · 25615cc · 25615cc
1 parent 741fc1b
commit 25615cc
Show file tree

Hide file tree

Showing 2 changed files with 69 additions and 70 deletions.
diff --git a/src/components/Feed/Feed.jsx b/src/components/Feed/Feed.jsx
@@ -1,6 +1,5 @@
 import React, { useState, useEffect } from 'react';
 import { navigate } from "@reach/router";
-import { StaticQuery, graphql } from 'gatsby';
 import queryString from 'query-string';
 //import Img from 'gatsby-image';
 import Link from "components/_ui/Link/Link";
@@ -11,8 +10,8 @@ import cardImg from './card-img.png';
 let windowGlobal = typeof window !== 'undefined' && window;
 let parsedParams = windowGlobal.location ? queryString.parse(windowGlobal.location.search) : {};
 
-//let feedSections = ["work & writing", "about", "contact"]
-//let workSections = ["data viz", "web development", "tutorial", "beginner", "other"]
+let feedSections = ["work & writing", "about", "contact"]
+let workSections = ["data viz", "web development", "tutorial", "beginner", "other"]
 
 const Feed = () => {
     const [feedQuery, setFeedQuery] = useState(parsedParams || '');
@@ -51,17 +50,11 @@ const Feed = () => {
     }, [feedQuery]);
 
     return (
-        <StaticQuery
-            query={FEED_QUERY}
-            render={(data) => {
-                console.log(data)
-
-                return (
-                    <div className="Feed__container">
-                        <div className="Feed__nav">
-                            {/* {feedSections.map((section, i) => (
-                                <div className="Feed__nav__section" key={i}>
-                                    <div className="Feed__nav__title">
+        <div className="Feed__container">
+            <div className="Feed__nav">
+                {feedSections.map((section, i) => (
+                    <div className="Feed__nav__section" key={i}>
+                        {/* <div className="Feed__nav__title">
                                         {section}
                                     </div>
 
@@ -79,13 +72,13 @@ const Feed = () => {
                                                 </label>
                                             ))}
                                         </div>
-                                    )}
+                                    )} */}
 
-                                </div>
-                            ))} */}
-                        </div>
-                        <div className="Feed__content">
-                            {/* {content.map((item, i) => (
+                    </div>
+                ))}
+            </div>
+            <div className="Feed__content">
+                {/* {content.map((item, i) => (
                                 <Link key={i} className="FeedCard" to="/movies">
                                     <div className="FeedCard__metas">
                                         <div className="FeedCard__title">
@@ -107,52 +100,29 @@ const Feed = () => {
                                 </Link>
                             ))} */}
 
-                            <Link className="FeedCard" to="/movies">
-                                <div className="FeedCard__metas">
-                                    <div className="FeedCard__title">
-                                        Movies Consumed
-                                    </div>
-                                    <div className="FeedCard__category">
-                                        Data Viz
-                                    </div>
-                                </div>
-                                <div className="FeedCard__image">
-                                    <img src={cardImg} alt="" />
-                                </div>
-                                <div className="FeedCard__description">
-                                    https://github.com/margueriteroth/stu/tree/master/python
-                                </div>
-                            </Link>
+                <Link className="FeedCard" to="/movies">
+                    <div className="FeedCard__metas">
+                        <div className="FeedCard__title">
+                            Movies Consumed
                         </div>
+                        <div className="FeedCard__category">
+                            Data Viz
+                        </div>
+                    </div>
+                    <div className="FeedCard__image">
+                        <img src={cardImg} alt="" />
+                    </div>
+                    <div className="FeedCard__description">
+                        https://github.com/margueriteroth/stu/tree/master/python
                     </div>
-                );
-            }}
-        />
+                </Link>
+            </div>
+        </div>
     );
 };
 
 Feed.propTypes = {
 
 };
 
-export default Feed;
-
-
-const FEED_QUERY = graphql`
-    query {
-        allMdx(filter: {fileAbsolutePath: {regex: "/blog/"}}, sort: {fields: frontmatter___date, order: DESC}) {
-          edges {
-            node {
-              id
-              fields {
-                slug
-              }
-              frontmatter {
-                title
-                date(formatString: "MMMM D, YYYY")
-              }
-            }
-          }
-        }
-      }
-`;
+export default Feed;
diff --git a/src/pages/index.js b/src/pages/index.js
@@ -1,19 +1,48 @@
-import React from "react";
+import React from "react"
+import { StaticQuery, graphql } from "gatsby"
 import Feed from "components/Feed/Feed"
 import Layout from "components/Layout/Layout"
 import MaxWidth from "components/_ui/MaxWidth/MaxWidth"
 import MoviesContainer from "components/Movies/MoviesContainer"
 import "./index.scss"
 
 const HomePage = () => (
-    <Layout>
-        <MaxWidth size="l" className="Home">
-            <div className="Home__greeting">
-                Hello! I'm Marguerite — a designer and software engineer.
-            </div>
-            <Feed />
-        </MaxWidth>
-    </Layout>
+    <StaticQuery
+        query={FEED_QUERY}
+        render={data => (
+            <Layout>
+                <MaxWidth size="l" className="Home">
+                    <div className="Home__greeting">
+                        Hello! I'm Marguerite — a designer and software
+                        engineer.
+                    </div>
+                    <Feed />
+                </MaxWidth>
+            </Layout>
+        )}
+    />
 )
 
-export default HomePage;
+export default HomePage
+
+const FEED_QUERY = graphql`
+    query {
+        allMdx(
+            filter: { fileAbsolutePath: { regex: "/blog/" } }
+            sort: { fields: frontmatter___date, order: DESC }
+        ) {
+            edges {
+                node {
+                    id
+                    fields {
+                        slug
+                    }
+                    frontmatter {
+                        title
+                        date(formatString: "MMMM D, YYYY")
+                    }
+                }
+            }
+        }
+    }
+`