diff --git a/src/components/screens/User/User.js b/src/components/screens/User/User.js index 1d5e512..7295515 100644 --- a/src/components/screens/User/User.js +++ b/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 ( @@ -63,7 +96,47 @@ class User extends React.Component { - {/* Export Entries */} + + + Export Journal Entries{" "} +
+ + download all journal entries into a JSON file + +
+
+ {files.length ? ( + + + + ) : ( + + )} +
) } @@ -71,5 +144,6 @@ class User extends React.Component { export default compose( withFirebase, - withAuthentication + withAuthentication, + withTheme )(User)