18 |
29 | );
30 |
31 | export default SeeTags;
32 |
--------------------------------------------------------------------------------
/content/portfolio/wattics/wattics.md:
--------------------------------------------------------------------------------
1 | ---
2 | title: Wattics
3 | date: "2017-07-30T18:35:00.284Z"
4 | description: "An energy analytics platform"
5 | ---
6 | ## Wattics Dashboard
7 |
8 |
19 |
9 | 
10 |
10 | 
11 |
Hello, world!
39 | ```
40 |
41 | - Name 2 CSS styling frameworks
42 |
43 | ⭐⭐
44 |
45 | - How would you build a responsive interface ?
46 | - What is the difference margin vs padding ?
47 | - What are CSS preprocessors ?
48 |
--------------------------------------------------------------------------------
/src/pages/404.js:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import { graphql } from 'gatsby';
3 |
4 | import { PropTypes } from 'prop-types';
5 | import Layout from '../components/layout/layout';
6 | import SEO from '../components/seo/seo';
7 |
8 | const NotFoundPage = ({ data, location }) => {
9 | const siteTitle = data.site.siteMetadata.title;
10 |
11 | return (
12 | Not Found
15 |You just hit a route that doesn't exist... the sadness.
16 |Projects
26 |27 | Here are some projects I worked for ! 28 |
29 | {posts.map(({ node }) => { 30 | const post = node; 31 | return ( 32 | <> 33 |34 |
26 |
44 |
28 |
43 | Tags
29 |-
30 | {group.map((tag) => (
31 |
- 32 | 33 | {tag.fieldValue} 34 | {' '} 35 | ( 36 | {tag.totalCount} 37 | ) 38 | 39 | 40 | ))} 41 |
18 |
34 | );
35 | };
36 |
37 | Tags.propTypes = {
38 | pageContext: PropTypes.shape({
39 | tag: PropTypes.string.isRequired,
40 | }),
41 | data: PropTypes.shape({
42 | allMarkdownRemark: PropTypes.shape({
43 | totalCount: PropTypes.number.isRequired,
44 | edges: PropTypes.arrayOf(
45 | PropTypes.shape({
46 | node: PropTypes.shape({
47 | frontmatter: PropTypes.shape({
48 | title: PropTypes.string.isRequired,
49 | }),
50 | fields: PropTypes.shape({
51 | slug: PropTypes.string.isRequired,
52 | }),
53 | }),
54 | }).isRequired,
55 | ),
56 | }),
57 | }),
58 | };
59 |
60 | Tags.defaultProps = {
61 | pageContext: {
62 | tag: '',
63 | },
64 | data: {
65 | totalCount: 0,
66 | node: {
67 | frontmatter: {
68 | title: '',
69 | },
70 | fields: {
71 | slug: '',
72 | },
73 | },
74 | },
75 | };
76 |
77 | export default Tags;
78 |
79 | export const pageQuery = graphql`
80 | query($tag: String) {
81 | allMarkdownRemark(
82 | limit: 2000
83 | sort: { fields: [frontmatter___date], order: DESC }
84 | filter: { frontmatter: { tags: { in: [$tag] } } }
85 | ) {
86 | totalCount
87 | edges {
88 | node {
89 | fields {
90 | slug
91 | }
92 | frontmatter {
93 | title
94 | }
95 | }
96 | }
97 | }
98 | }
99 | `;
100 |
--------------------------------------------------------------------------------
/src/components/seo/seo.js:
--------------------------------------------------------------------------------
1 | /**
2 | * SEO component that queries for data with
3 | * Gatsby's useStaticQuery React hook
4 | *
5 | * See: https://www.gatsbyjs.org/docs/use-static-query/
6 | */
7 |
8 | import React from 'react';
9 | import PropTypes from 'prop-types';
10 | import Helmet from 'react-helmet';
11 | import { useStaticQuery, graphql } from 'gatsby';
12 |
13 | import favicon16 from '../../../content/assets/favicon/favicon-16x16.png';
14 | import favicon32 from '../../../content/assets/favicon/favicon-32x32.png';
15 | import favicon96 from '../../../content/assets/favicon/favicon-96x96.png';
16 |
17 | const SEO = ({
18 | description, lang, meta, title,
19 | }) => {
20 | const { site } = useStaticQuery(
21 | graphql`
22 | query {
23 | site {
24 | siteMetadata {
25 | title
26 | description
27 | social { twitter }
28 | }
29 | }
30 | }
31 | `,
32 | );
33 |
34 | const metaDescription = description || site.siteMetadata.description;
35 |
36 | return (
37 |
19 |
33 | {tagHeader}
20 |-
21 | {edges.map(({ node }) => {
22 | const { slug } = node.fields;
23 | const { title } = node.frontmatter;
24 | return (
25 |
- 26 | {title} 27 | 28 | ); 29 | })} 30 |
52 |
102 | );
103 | };
104 |
105 | export default Bio;
106 |
--------------------------------------------------------------------------------
/src/components/layout/layout.js:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import { Link } from 'gatsby';
3 |
4 | import { PropTypes } from 'prop-types';
5 | import { rhythm, scale } from '../../utils/typography';
6 | import SeeTags from '../see-tags/see-tags';
7 | import SeeArticles from '../see-articles/see-articles';
8 | import SeePortfolio from '../see-portfolio/see-portfolio';
9 |
10 | const Layout = ({
11 | location, title, description, children,
12 | }) => {
13 | // eslint-disable-next-line no-undef
14 | const rootPath = `${__PATH_PREFIX__}/`;
15 | let header;
16 |
17 | if (location.pathname === rootPath || location.pathname === `${rootPath}tags`) {
18 | header = (
19 | <>
20 |
66 | Written by
67 | {' '}
68 | {author.name}
69 | {' '}
70 | {author.summary}
71 | {' '}
72 |
73 | Find me on :
74 |
75 |
27 | 35 | {title} 36 | 37 |
38 |39 | {description} 40 |
41 | { location.pathname.includes('tags') ?53 | 61 | {title} 62 | 63 |
64 | ); 65 | } 66 | return ( 67 |
75 | {header}
76 | {children}
77 |
91 |
92 | );
93 | };
94 |
95 | Layout.propTypes = {
96 | location: PropTypes.shape({
97 | pathname: PropTypes.string.isRequired,
98 | }).isRequired,
99 | title: PropTypes.string.isRequired,
100 | description: PropTypes.string,
101 | children: PropTypes.oneOfType([
102 | PropTypes.arrayOf(PropTypes.node),
103 | PropTypes.node,
104 | ]).isRequired,
105 | };
106 |
107 | Layout.defaultProps = {
108 | description: '',
109 | };
110 |
111 | export default Layout;
112 |
--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "nans-random-thoughts",
3 | "private": false,
4 | "description": "Simply a JAM stack blog",
5 | "version": "0.1.0",
6 | "author": "Nans Dumortier All posts:
18 | {posts.map(({ node }) => { 19 | const title = node.frontmatter.title || node.fields.slug; 20 | return ( 21 |28 | 29 | {title} 30 | 31 |
32 | {node.frontmatter.date} 33 |{text}
; 41 | } 42 | ````` 43 | 44 | When running into that issue, I found multiple solutions, the most used one seems to be this one : 45 | 46 | `````javascript 47 | function OtherExample() { 48 | const [text, setText] = useState("waiting..."); 49 | 50 | useEffect(() => { 51 | let isMounted = true; // 👈 52 | simulateSlowNetworkRequest().then(() => { 53 | if (!isMounted) { // 👈 54 | setText("done!"); // no more error 55 | } 56 | }); 57 | return () => { 58 | isMounted = false; // 👈 59 | }; 60 | }, []); 61 | 62 | return{text}
; 63 | } 64 | ````` 65 | 66 | **But** it requires you to add quite a lot of stuff into your component, having to deal with that `isMounted` variable all over the place ... 67 | 68 | There are other interesting solutions, like making your [Promises cancellable](https://dev.to/viclafouch/cancel-properly-http-requests-in-react-hooks-and-avoid-memory-leaks-pd7). 69 | 70 | ## You told me there would be an elegant solution ! 71 | 72 | I wasn't lying! The solution I came up with is a very simple [hook](https://www.npmjs.com/package/use-state-if-mounted). It works just like React's useState, but it basically checks if the component is mounted before updating the state ! 73 | 74 | Here is an example of the refactored code : 75 | 76 | ```javascript 77 | function OtherExample() { 78 | const [text, setText] = useStateIfMounted("waiting..."); // 👈 79 | 80 | React.useEffect(() => { 81 | simulateSlowNetworkRequest().then(() => { 82 | setText("done!"); // no more error 83 | }); 84 | }, [setText]); 85 | 86 | return{text}
; 87 | } 88 | ``` 89 | 90 | Here is the [CodeSandBox](https://codesandbox.io/s/use-local-variable-to-avoid-setstate-on-unmouted-component-6k08n?file=/src/index.js:459-695) if you wanna play around ! 91 | 92 | ## TLDR 93 | Use [useStateIfMounted](https://www.npmjs.com/package/use-state-if-mounted) hook, that will only update the state if your component is mounted ! 🚀 94 | 95 | 96 | I hope this might be helpful, feel free to reach me out in any case ! 🤗 -------------------------------------------------------------------------------- /src/templates/blog-post.js: -------------------------------------------------------------------------------- 1 | /* eslint-disable react/no-danger */ 2 | import React from 'react'; 3 | import { Link, graphql } from 'gatsby'; 4 | 5 | import PropTypes from 'prop-types'; 6 | import Bio from '../components/bio/bio'; 7 | import Layout from '../components/layout/layout'; 8 | import SEO from '../components/seo/seo'; 9 | import { rhythm, scale } from '../utils/typography'; 10 | 11 | const BlogPostTemplate = ({ data, pageContext, location }) => { 12 | const post = data.markdownRemark; 13 | const siteTitle = data.site.siteMetadata.title; 14 | const { previous, next } = pageContext; 15 | 16 | return ( 17 |30 | {post.frontmatter.title} 31 |
32 |39 | {post.frontmatter.date} 40 |
41 |48 | 51 |
6 |
7 | 
8 |
9 |