feat: export entries

src/components/screens/User/User.js

@@ -1,24 +1,28 @@
 import React from "react"
 import styled from "@emotion/styled"
+import { withTheme } from "emotion-theming"
 import { compose } from "recompose"
+import { format } from "date-fns"
 import { withFirebase } from "../../firebase"
 import { withAuthentication } from "../../session"
+import { BeatLoader } from "react-spinners"
 
 import { SIZES } from "../../../styles/constants"
 
 import SignOut from "../../SignOut"
+import { Button } from "../../elements"
 
 const ProfileGrid = styled.div`
   display: grid;
   grid-template-rows: 1fr;
-  grid-gap: 20px;
+  grid-gap: 10px;
+  margin-top: 20px;
 `
 const ProfileSection = styled.div`
   display: flex;
   width: 100%;
   align-items: center;
   justify-content: space-between;
-  padding: 10px 0;
 `
 const ProfileSectionHeader = styled.h2`
   font-size: ${SIZES.normal};
@@ -31,30 +35,59 @@ const ProfileSectionText = styled.span`
 
 class User extends React.Component {
   state = {
-    name: "",
+    files: [],
+    exporting: false,
   }
 
-  updateInput = e => {
-    this.setState({
-      [e.target.name]: e.target.value,
+  getEntries = async _ => {
+    const { firebase, authUser } = this.props
+    const entriesRef = await firebase.db
+      .collection("entries")
+      .where("userId", "==", authUser.uid)
+      .get()
+    const entries = entriesRef.docs.map(doc => doc.data())
+    const editedEntries = entries.map(entry => {
+      return { ...entry, userId: undefined }
     })
+    return editedEntries
   }
 
-  addUser = e => {
-    e.preventDefault()
-    const { firebase } = this.props
-
-    firebase.db
-      .collection("users")
-      .doc()
-      .add({
-        name: this.state.name,
+  clearFiles = () => {
+    if (this.state.files.length) {
+      this.state.files.forEach(({ data }) => {
+        window.URL.revokeObjectURL(data)
       })
-    this.setState({ name: "" })
+    }
+  }
+
+  prepareExport = async () => {
+    try {
+      this.clearFiles()
+
+      this.setState({ exporting: true, files: [] })
+
+      const data = await this.getEntries()
+      const blob = new Blob([JSON.stringify(data)], {
+        type: "text/json;charset=utf-8",
+      })
+
+      const file = {
+        name: `journal-export-${format(new Date(), "MMDDYYYY")}.json`,
+        data: window.URL.createObjectURL(blob),
+      }
+      this.setState({ files: [file], exporting: false })
+    } catch (e) {
+      window.alert(
+        "Your export ran into an issue, sorry :( if you continue to have problmes you can reach out to kylerobertgill@gmail.com"
+      )
+      console.error(e)
+      this.setState({ files: [], exporting: 0 })
+    }
   }
 
   render() {
-    const { authUser } = this.props
+    const { authUser, theme } = this.props
+    const { exporting, files } = this.state
     return (
       <ProfileGrid>
         <ProfileSection>
@@ -63,7 +96,47 @@ class User extends React.Component {
           </ProfileSectionHeader>
           <SignOut />
         </ProfileSection>
-        {/* <ProfileSection>Export Entries</ProfileSection> */}
+        <ProfileSection>
+          <ProfileSectionHeader>
+            Export Journal Entries{" "}
+            <div>
+              <ProfileSectionText style={{ fontWeight: 400 }}>
+                download all journal entries into a JSON file
+              </ProfileSectionText>
+            </div>
+          </ProfileSectionHeader>
+          {files.length ? (
+            <a
+              download={files[0].name}
+              href={files[0].data}
+              style={{ textDecoration: "none" }}
+            >
+              <Button
+                colors={theme.colors}
+                onClick={() => {
+                  setTimeout(() => {
+                    this.clearFiles()
+                    this.setState({ exporting: 0, files: [] })
+                  }, 1500)
+                }}
+              >
+                Download
+              </Button>
+            </a>
+          ) : (
+            <Button colors={theme.colors} onClick={() => this.prepareExport()}>
+              {exporting ? (
+                <BeatLoader
+                  color={theme.colors.secondary}
+                  size={10}
+                  margin="4px"
+                />
+              ) : (
+                "Export"
+              )}
+            </Button>
+          )}
+        </ProfileSection>
       </ProfileGrid>
     )
   }
@@ -71,5 +144,6 @@ class User extends React.Component {
 
 export default compose(
   withFirebase,
-  withAuthentication
+  withAuthentication,
+  withTheme
 )(User)