Refactor sharing and analytics into components #1152
Conversation
Cuts down the size of the requested CSS from ~40KB to ~9KB
jeremiak
force-pushed
the
jk-sharing-components
branch
from
9f2cf87 to
9f33485
Compare
Closes #1137
Also disable linting reporting for this component for now since it just
uses code snippets
jeremiak
force-pushed
the
jk-sharing-components
branch
from
1c3c2eb to
221f914
Compare
jeremiak
changed the title
| /* eslint-disable */ | ||
| import React from 'react' | ||
|
|
||
| class Analytics extends React.Component { |
There was a problem hiding this comment.
i'm not convinced this is better than what we have; to me, the componentizing (of this) adds misdirection that feels a little confusing/clunky
There was a problem hiding this comment.
Does this apply to both new components or just the analytics one? Here are some reasons why I like this approach:
- These things change the DOM so it makes sense to have them be components
- We get syntax highlighting since its actual javascript instead of strings of javascript code. This might not matter as much right now, but I know there is upcoming DAP integration work where having syntax highlighting will be useful.
There was a problem hiding this comment.
alright, i'm convinced :)
| import { getPlaceInfo } from '../util/place' | ||
| import usa from '../util/usa' | ||
|
|
||
| const SharingTags = ({ agency, crime, place, since, until }) => { |
There was a problem hiding this comment.
does this play nice with the other components that are present in some of our parent components (i.e., the ones that set the page titles)?
There was a problem hiding this comment.
I believe so. It looks like helmet is a sort of global object and so this plays nicely and doesn't change the current title tags. They are actually separated in the head object passed into html.js so that I had to add head.meta there.
To add onto the points above about why I like this approach, for the sharing component in particular, it gives us the ability to wrap it with react-redux's connect and therefore pull out any information we need across the entire site without needing to keep track of what we're passing in
|
🚢 |
This PR doesn't change any functionality but removes some of the code we were using as utils (analytics and sharing) and turns them into react components since they are things that will be added to the DOM.