Skip to content

Commit 83a4d6d

Browse files
shreystechtipsshreystechtips
committed
reformat file and add keys
1 parent ec026f3 commit 83a4d6d

File tree

1 file changed

+164
-172
lines changed

1 file changed

+164
-172
lines changed

‎src/templates/home.js‎

Lines changed: 164 additions & 172 deletions
Original file line numberDiff line numberDiff line change
@@ -1,180 +1,172 @@
1-
import React from "react"
2-
import { Link } from "gatsby"
3-
import PropTypes from "prop-types"
4-
import Helmet from "react-helmet"
5-
import moment from "moment"
1+
import React from "react";
2+
import { Link } from "gatsby";
3+
import moment from "moment";
64
import {
7-
Typography,
8-
Grid,
9-
Link as MaterialLink,
10-
makeStyles,
11-
Card,
12-
CardContent,
13-
Paper,
14-
} from "@material-ui/core"
15-
import SEO from "../components/seo"
16-
import Layout from "../components/layout"
17-
18-
const style = {
19-
card: {
20-
maxWidth: 350,
21-
minWidth: 300,
22-
maxHeight: 375,
23-
borderRadius: 8,
24-
// backgroundColor: "#F3F3F7",
25-
},
26-
gridRoot: {
27-
justifyContent: "center",
28-
alignItems: "center",
29-
// textAlign: "center",
30-
},
31-
}
32-
33-
const useStyles = makeStyles(theme => ({
34-
card: {
35-
maxWidth: 350,
36-
minWidth: 300,
37-
maxHeight: 375,
38-
borderRadius: 8,
39-
// backgroundColor: "#F3F3F7",
40-
},
41-
gridRoot: {
42-
justifyContent: "center",
43-
alignItems: "center",
44-
// textAlign: "center",
45-
},
46-
}))
5+
Typography,
6+
Grid,
7+
// Link as MaterialLink,
8+
makeStyles,
9+
Card,
10+
CardContent,
11+
// Paper,
12+
} from "@material-ui/core";
13+
import SEO from "../components/seo";
14+
import Layout from "../components/layout";
15+
const useStyles = makeStyles((theme) => ({
16+
card: {
17+
maxWidth: 350,
18+
minWidth: 300,
19+
maxHeight: 375,
20+
borderRadius: 8,
21+
},
22+
// backgroundColor:
23+
// theme.palette.type === "light"
24+
// ? "#F3F3F7"
25+
// : "#FF0000",
26+
// },
27+
gridRoot: {
28+
justifyContent: "center",
29+
alignItems: "center",
30+
// textAlign: "center",
31+
},
32+
}));
4733

4834
export default function Index(props) {
49-
const classes = useStyles()
50-
const [assortedPosts, setPosts] = React.useState({})
51-
const { pageContext } = props
52-
const { data } = pageContext
53-
const { edges: posts } = data.allMarkdownRemark
54-
React.useEffect(() => {
55-
var vals = {}
56-
// const temp = posts.filter(
57-
// post =>
58-
// post.node.frontmatter.path != null &&
59-
// post.node.frontmatter.date != null &&
60-
// post.node.frontmatter.title != null &&
61-
// post.node.frontmatter.path.length > 0
62-
// )
63-
posts.map(post => {
64-
var cut = post.frontmatter.path.split("/")
65-
cut = cut.slice(1)
66-
if (cut.length >= 2) {
67-
if (!vals.hasOwnProperty(cut[0])) {
68-
vals[cut[0]] = {}
69-
}
70-
if (!vals[cut[0]].hasOwnProperty(cut[1])) {
71-
vals[cut[0]][cut[1]] = []
72-
}
73-
vals[cut[0]][cut[1]].push(post)
74-
}
75-
})
76-
setPosts(vals)
77-
}, [])
35+
const classes = useStyles();
36+
const [assortedPosts, setPosts] = React.useState({});
37+
const { pageContext } = props;
38+
const { data } = pageContext;
39+
const { edges: posts } = data.allMarkdownRemark;
40+
React.useEffect(() => {
41+
var vals = {};
42+
// const temp = posts.filter(
43+
// post =>
44+
// post.node.frontmatter.path != null &&
45+
// post.node.frontmatter.date != null &&
46+
// post.node.frontmatter.title != null &&
47+
// post.node.frontmatter.path.length > 0
48+
// )
49+
posts.map((post) => {
50+
var cut = post.frontmatter.path.split("/");
51+
cut = cut.slice(1);
52+
if (cut.length >= 2) {
53+
if (!vals.hasOwnProperty(cut[0])) {
54+
vals[cut[0]] = {};
55+
}
56+
if (!vals[cut[0]].hasOwnProperty(cut[1])) {
57+
vals[cut[0]][cut[1]] = [];
58+
}
59+
vals[cut[0]][cut[1]].push(post);
60+
}
61+
});
62+
setPosts(vals);
63+
}, []);
64+
65+
const generatePostsBox = (outerKey, postList) => {
66+
const data = postList[outerKey];
7867

79-
const generatePostsBox = (outerKey, postList) => {
80-
const data = postList[outerKey]
81-
return (
82-
<>
83-
<Typography
84-
variant="h5"
85-
color="textPrimary"
86-
style={{ fontWeight: "bold", textAlign: "center" }}
87-
>
88-
{outerKey.toUpperCase()}
89-
</Typography>
90-
{Object.keys(data).map(key => (
91-
<Grid
92-
container
93-
direction="column"
94-
key={key}
95-
style={{
96-
// overflow: "hidden",
97-
marginBottom: 20,
98-
padding: 0,
99-
}}
100-
>
101-
<Typography variant="h6" color="textPrimary">
102-
{key.charAt(0).toUpperCase() + key.substring(1)}
103-
</Typography>
104-
<Grid
105-
container
106-
direction="row"
107-
spacing={4}
108-
wrap="nowrap"
109-
style={{
110-
overflowX: "auto",
111-
// maxWidth: data[key].length * style.card.maxWidth - 15,
112-
// margin: "auto",
113-
}}
114-
>
115-
{data[key].map(post => (
116-
<Grid item className="blog-post-preview" key={post.id}>
117-
<Grid container direction="column">
118-
<Card
119-
className={classes.card}
120-
component={Link}
121-
to={post.frontmatter.path}
122-
style={{
123-
textDecoration: "none",
124-
}}
125-
>
126-
<CardContent>
127-
<Grid item>
128-
<Typography variant="h4">
129-
{post.frontmatter.title}
130-
</Typography>
131-
<Typography variant="h6">
132-
{moment(post.frontmatter.date).format(
133-
"MMMM DD, YYYY"
134-
)}
135-
</Typography>
136-
</Grid>
137-
<Grid item>
138-
<Typography noWrap variant="body2">
139-
Section {post.frontmatter.path}
140-
</Typography>
141-
</Grid>
142-
<Grid item>
143-
<Typography variant="body1">
144-
{post.excerpt}
145-
</Typography>
146-
</Grid>
147-
</CardContent>
148-
</Card>
149-
</Grid>
150-
</Grid>
151-
))}
152-
</Grid>
153-
</Grid>
154-
))}
155-
</>
156-
)
157-
}
68+
return (
69+
<>
70+
<Typography
71+
variant="h5"
72+
color="textPrimary"
73+
style={{ fontWeight: "bold", textAlign: "center" }}
74+
key={outerKey}
75+
>
76+
{outerKey.toUpperCase()}
77+
</Typography>
78+
{Object.keys(data).map((key) => (
79+
<Grid
80+
container
81+
direction="column"
82+
key={key}
83+
style={{
84+
// overflow: "hidden",
85+
marginBottom: 20,
86+
padding: 0,
87+
}}
88+
>
89+
<Typography variant="h6" color="textPrimary">
90+
{key.charAt(0).toUpperCase() + key.substring(1)}
91+
</Typography>
92+
<Grid
93+
container
94+
direction="row"
95+
spacing={4}
96+
wrap="nowrap"
97+
style={{
98+
overflowX: "auto",
99+
// maxWidth: data[key].length * style.card.maxWidth - 15,
100+
// margin: "auto",
101+
}}
102+
>
103+
{data[key].map((post) => (
104+
<Grid
105+
item
106+
className="blog-post-preview"
107+
key={post.frontmatter.path}
108+
>
109+
<Grid container direction="column">
110+
<Card
111+
className={classes.card}
112+
component={Link}
113+
to={post.frontmatter.path}
114+
style={{
115+
textDecoration: "none",
116+
}}
117+
>
118+
<CardContent>
119+
<Grid item>
120+
<Typography variant="h4">
121+
{post.frontmatter.title}
122+
</Typography>
123+
<Typography variant="h6">
124+
{moment(post.frontmatter.date).format(
125+
"MMMM DD, YYYY"
126+
)}
127+
</Typography>
128+
</Grid>
129+
<Grid item>
130+
<Typography noWrap variant="body2">
131+
Section {post.frontmatter.path}
132+
</Typography>
133+
</Grid>
134+
<Grid item>
135+
<Typography variant="body1">
136+
{post.excerpt}
137+
</Typography>
138+
</Grid>
139+
</CardContent>
140+
</Card>
141+
</Grid>
142+
</Grid>
143+
))}
144+
</Grid>
145+
</Grid>
146+
))}
147+
</>
148+
);
149+
};
158150

159-
return (
160-
<Layout>
161-
<div className="blog-posts" style={{ margin: "auto" }}>
162-
<SEO title="Home" />
163-
<div style={{ margin: 10 }}>
164-
<Grid
165-
container
166-
direction="column"
167-
spacing={2}
168-
className={classes.gridRoot}
169-
>
170-
{Object.keys(assortedPosts).map(key => {
171-
return generatePostsBox(key, assortedPosts)
172-
})}
173-
</Grid>
174-
</div>
175-
</div>
176-
</Layout>
177-
)
151+
return (
152+
<Layout>
153+
<div className="blog-posts" style={{ margin: "auto" }}>
154+
<SEO title="Home" />
155+
<div style={{ margin: 10 }}>
156+
<Grid
157+
container
158+
direction="column"
159+
spacing={2}
160+
className={classes.gridRoot}
161+
>
162+
{Object.keys(assortedPosts).map((key) => {
163+
return generatePostsBox(key, assortedPosts);
164+
})}
165+
</Grid>
166+
</div>
167+
</div>
168+
</Layout>
169+
);
178170
}
179171

180172
// export const pageQuery = graphql`

0 commit comments

Comments
 (0)