cleanup component and state code

readme.md

@@ -31,7 +31,7 @@ npm install && npm start
 
 You can configure the globe visuals (e.g. globe texture, glow color, zoom behaviors) by editing the [`config.js`](./src/config.js) file. For more resources on how to configure these options, please refer to the `react-globe` [docs][react-globe-docs].
 
-If you would like to render the Google Trends of another keyword, simply change the `data.keyword` field of the config file. To apply changes to the data, run the `npm run build:data` command.
+If you would like to render the Google Trends of another keyword, simply change the `keyword` field of the config file. To apply changes to the data, run the `npm run build:data` command.
 
 You should now be able to test your changes locally with the `npm start` command. If they look good, you can commit the changes to your Github repo, and Netlify will redeploy the instance with these updates automatically!
 

src/components/about.js

@@ -0,0 +1,49 @@
+import React from 'react';
+
+import Button from './button';
+import Fade from './fade';
+import Link from './link';
+
+function About({ onHide, show }) {
+  return (
+    <Fade className="about" show={show}>
+      <div className="about-content">
+        <h2>About</h2>
+        <p>
+          <Link link="GITHUB_REPO">Google Globe Trends</Link> is a{' '}
+          <Link link="JAMSTACK">JAMstack</Link> application built without any
+          server components. Data is fetched during build time using the{' '}
+          <Link link="GOOGLE_TRENDS_API">google-trends-api</Link> library. Globe
+          visualizations are rendered using the{' '}
+          <Link link="REACT_GLOBE_GITHUB">react-globe</Link> component.
+        </p>
+        <p>
+          This project is inspired by the wonderful{' '}
+          <Link link="METOO">#metoorising</Link> project. With most of
+          interactive features supported by{' '}
+          <Link link="REACT_GLOBE_GITHUB">react-globe</Link>, the project aims
+          to simplify building beautiful globe visualizations with Google Trends
+          datasets.
+        </p>
+        <p>
+          To deploy your own Google Globe Trends instances, click on the
+          <b>Deploy to Netlify</b> button below. You can edit and commit the{' '}
+          <Link link="CONFIG">config.js</Link> file to customize data and globe
+          options. Please visit the <Link link="GITHUB_REPO">Github</Link>{' '}
+          project page for more instructions on customizing instances.
+        </p>
+        <p>
+          <Link link="NETLIFY_DEPLOY">
+            <img
+              src="https://www.netlify.com/img/deploy/button.svg"
+              alt="Deploy to Netlify"
+            />
+          </Link>
+        </p>
+        <Button label="Back" onClick={onHide} />
+      </div>
+    </Fade>
+  );
+}
+
+export default About;

src/components/App.js → src/components/app.js

@@ -1,9 +1,9 @@
 import React from 'react';
 
-import Details from './Details';
-import Globe from './Globe';
-import Intro from './Intro';
-import Overlay from './Overlay';
+import Details from './details';
+import Globe from './globe';
+import Intro from './intro';
+import Overlay from './overlay';
 
 function App() {
   return (

src/components/description.js

@@ -0,0 +1,15 @@
+import React from 'react';
+
+import { useStateValue } from '../state';
+import Link from './link';
+
+export default function Description() {
+  const [{ config }] = useStateValue();
+
+  return (
+    <>
+      Visualizing <b>{`"${config.keyword.join(', ')}"`}</b> Google Trends with{' '}
+      <Link link="REACT_GLOBE_GITHUB">react-globe</Link>
+    </>
+  );
+}

src/components/Details.js → src/components/details.js

@@ -1,27 +1,36 @@
 import React from 'react';
 
-import { getRandomMarker } from '../state/selectors';
-import { useStateValue } from '../state/StateProvider';
-import Fade from './Fade';
-import Button from './Button';
+import { useStateValue } from '../state';
+import Button from './button';
+import Fade from './fade';
 
-function getSearchURL(city, country, keyword) {
+function getSearchUrl(city, country, keyword) {
   const formattedQuery = `${encodeURIComponent(city)}, ${encodeURIComponent(
     country,
   )} ${encodeURIComponent(keyword.join('|'))}`.replace(/(%20| )/g, '+');
   return `https://www.google.com/search?q=${formattedQuery}`;
 }
 
+export function getRandomMarker({ focusedMarker, markers }) {
+  const filteredMarkers = markers.filter((marker) => {
+    return marker.id !== focusedMarker?.id;
+  });
+  return filteredMarkers[Math.floor(Math.random() * filteredMarkers.length)];
+}
+
 function Details() {
-  const [state, dispatch] = useStateValue();
-  const { keyword, start, focusedMarker } = state;
-  const randomMarker = getRandomMarker(state);
+  const [
+    { config, start, focusedMarker, markers, relatedTopics },
+    dispatch,
+  ] = useStateValue();
+  const randomMarker = getRandomMarker({ focusedMarker, markers });
 
   let content;
   if (focusedMarker) {
     const { city, countryCode, countryName, value } = focusedMarker;
-    const url = getSearchURL(city, countryName, keyword);
-    const relatedTopics = state.relatedTopics[countryCode] || [];
+    const url = getSearchUrl(city, countryName, config.keyword);
+    const topics = relatedTopics[countryCode] || [];
+
     content = (
       <>
         <div className="header">
@@ -40,7 +49,7 @@ function Details() {
           </h2>
           <div className="details-content">
             RELATED TOPICS
-            {relatedTopics.map(({ topic, link }) => {
+            {topics.map(({ topic, link }) => {
               return (
                 <a
                   key={topic}
@@ -61,7 +70,7 @@ function Details() {
   }
 
   return (
-    <Fade className="details" shown={start}>
+    <Fade className="details" show={start}>
       {content}
     </Fade>
   );

src/components/fade.js

@@ -0,0 +1,34 @@
+import React, { useEffect, useState } from 'react';
+
+export default function Fade({ children, className, durationMs, show }) {
+  const [shouldRender, setShouldRender] = useState(show);
+
+  useEffect(() => {
+    if (show) {
+      setShouldRender(true);
+    }
+  }, [show]);
+
+  const onAnimationEnd = () => {
+    if (!show) {
+      setShouldRender(false);
+    }
+  };
+
+  if (!shouldRender) {
+    return null;
+  }
+
+  const animation = `${
+    show ? 'fade-in' : 'fade-out'
+  } ${durationMs}ms ease-in-out`;
+
+  return (
+    <div
+      className={className}
+      style={{ animation }}
+      onAnimationEnd={onAnimationEnd}>
+      {children}
+    </div>
+  );
+}