- implement cloud functions for printing

- implement AMOLED mode
- implement reset layout

src/components/builder/right/sections/Layout.js

@@ -1,11 +1,14 @@
-import React from 'react';
+import React, { useState } from 'react';
 import { DragDropContext, Draggable, Droppable } from 'react-beautiful-dnd';
 import { useDispatch, useSelector } from '../../../../contexts/ResumeContext';
 import { move, reorder } from '../../../../utils';
+import Button from '../../../shared/Button';
 import Heading from '../../../shared/Heading';
 import styles from './Layout.module.css';
 
 const Layout = () => {
+  const [resetLayoutText, setResetLayoutText] = useState('Reset Layout');
+
   const blocks = useSelector('metadata.layout');
   const dispatch = useDispatch();
 
@@ -44,6 +47,16 @@ const Layout = () => {
     }
   };
 
+  const handleResetLayout = () => {
+    if (resetLayoutText === 'Reset Layout') {
+      setResetLayoutText('Are you sure?');
+      return;
+    }
+
+    dispatch({ type: 'reset_layout' });
+    setResetLayoutText('Reset Layout');
+  };
+
   return (
     <section>
       <Heading>Layout</Heading>
@@ -89,6 +102,10 @@ const Layout = () => {
           ))}
         </DragDropContext>
       </div>
+
+      <div className="flex">
+        <Button onClick={handleResetLayout}>{resetLayoutText}</Button>
+      </div>
     </section>
   );
 };

src/components/shared/Avatar.js

@@ -1,20 +1,49 @@
 import cx from 'classnames';
 import { toUrl } from 'gatsby-source-gravatar';
-import React, { memo, useContext, useMemo } from 'react';
+import React, { memo, useContext, useMemo, useState } from 'react';
+import { Menu, MenuItem } from '@material-ui/core';
 import UserContext from '../../contexts/UserContext';
 import styles from './Avatar.module.css';
+import { handleKeyUp } from '../../utils';
 
 const Avatar = ({ className }) => {
-  const { user } = useContext(UserContext);
+  const { user, logout } = useContext(UserContext);
+  const [anchorEl, setAnchorEl] = useState(null);
+
+  const handleClick = (event) => setAnchorEl(event.currentTarget);
+  const handleClose = () => setAnchorEl(null);
+
+  const handleLogout = () => {
+    logout();
+    handleClose();
+  };
 
   const photoURL = useMemo(() => toUrl(user.email, 'size=128'), [user.email]);
 
   return (
-    <img
-      src={photoURL}
-      alt={user.displayName}
-      className={cx(styles.container, className)}
-    />
+    <div>
+      <div
+        tabIndex="0"
+        role="button"
+        className="flex focus:outline-none"
+        onClick={handleClick}
+        onKeyUp={(e) => handleKeyUp(e, handleClick)}
+      >
+        <img
+          src={photoURL}
+          alt={user.displayName}
+          className={cx(styles.container, className)}
+        />
+      </div>
+      <Menu
+        keepMounted
+        anchorEl={anchorEl}
+        onClose={handleClose}
+        open={Boolean(anchorEl)}
+      >
+        <MenuItem onClick={handleLogout}>Logout</MenuItem>
+      </Menu>
+    </div>
   );
 };
 

src/contexts/ResumeContext.js

@@ -1,14 +1,14 @@
 import arrayMove from 'array-move';
 import {
   clone,
+  concat,
   findIndex,
+  flatten,
   get,
   isUndefined,
-  setWith,
-  flatten,
-  concat,
-  times,
   merge,
+  setWith,
+  times,
 } from 'lodash';
 import React, {
   createContext,
@@ -17,9 +17,10 @@ import React, {
   useContext,
   useReducer,
 } from 'react';
-import DatabaseContext from './DatabaseContext';
-import initialState from '../data/initialState';
 import demoState from '../data/demoState.json';
+import initialState from '../data/initialState';
+import DatabaseContext from './DatabaseContext';
+import leftSections from '../data/leftSections';
 
 const ResumeContext = createContext({});
 
@@ -108,6 +109,25 @@ const ResumeProvider = ({ children }) => {
           debouncedUpdateResume(newState);
           return newState;
 
+        case 'set_fixed_sections':
+          items = get(state, 'metadata.layout');
+
+          items = items.map((x) => {
+            return x.filter((y) => {
+              return !payload.includes(y);
+            });
+          });
+
+          newState = setWith(clone(state), 'metadata.layout', items, clone);
+          debouncedUpdateResume(newState);
+          return newState;
+
+        case 'reset_layout':
+          items = [leftSections.filter((x) => !x.fixed).map((x) => x.id)];
+          newState = setWith(clone(state), 'metadata.layout', items, clone);
+          debouncedUpdateResume(newState);
+          return newState;
+
         case 'on_input':
           newState = setWith(clone(state), payload.path, payload.value, clone);
           debouncedUpdateResume(newState);

src/modals/sections/ExportModal.js

@@ -1,5 +1,6 @@
 import { clone } from 'lodash';
 import React, { memo, useContext, useEffect, useState } from 'react';
+import { FaPrint } from 'react-icons/fa';
 import Button from '../../components/shared/Button';
 import ModalContext from '../../contexts/ModalContext';
 import { useSelector } from '../../contexts/ResumeContext';
@@ -8,6 +9,8 @@ import BaseModal from '../BaseModal';
 const ExportModal = () => {
   const state = useSelector();
   const [open, setOpen] = useState(false);
+  const [isLoadingSingle, setLoadingSingle] = useState(false);
+  const functionsUrl = 'http://localhost:5001/rx-resume/us-central1';
 
   const { emitter, events } = useContext(ModalContext);
 
@@ -23,6 +26,21 @@ const ExportModal = () => {
     }
   };
 
+  const handleSinglePageDownload = async () => {
+    setLoadingSingle(true);
+    fetch(`${functionsUrl}/printSinglePageResume?id=${state.id}`, {
+      method: 'POST',
+    })
+      .then((response) => response.blob())
+      .then((data) => {
+        if (typeof window !== `undefined`) {
+          const url = window.URL.createObjectURL(data, { oneTimeOnly: true });
+          window && window.open(url);
+          setLoadingSingle(false);
+        }
+      });
+  };
+
   const handleExportToJson = () => {
     const backupObj = clone(state);
     delete backupObj.id;
@@ -56,8 +74,8 @@ const ExportModal = () => {
           printed immediately.
         </p>
 
-        <Button className="mt-5" onClick={handleOpenPrintDialog}>
-          Open Print Dialog
+        <Button icon={FaPrint} className="mt-5" onClick={handleOpenPrintDialog}>
+          Print Resume
         </Button>
       </div>
 
@@ -73,9 +91,14 @@ const ExportModal = () => {
           as well with just one click.
         </p>
 
-        <div className="mt-5">
+        <div className="mt-5 mb-4">
           <div className="flex">
-            <Button>Single Page Resume</Button>
+            <Button
+              isLoading={isLoadingSingle}
+              onClick={handleSinglePageDownload}
+            >
+              Single Page Resume
+            </Button>
             <Button className="ml-8">Multi Page Resume</Button>
           </div>
         </div>

src/pages/index.js

@@ -46,6 +46,15 @@ const Home = () => {
             just not in a position to pay hundreds of dollars to create a resume
             to bootstrap their career.
           </Feature>
+
+          <Feature title="Your data is your data, none of my data.">
+            You must be thinking, if you&apos;re not paying for the product,
+            then you are the product. Or, at least your data is?{' '}
+            <strong>Well, this is the exception</strong>. Your data is your own,
+            as stated in the ridiculously simple <a href="">Privacy Policy</a>,
+            I don&apos;t do anything with the data, it just exists on a database
+            for the convinient features provided by Reactive Resume.
+          </Feature>
         </div>
 
         <footer className="my-24">

src/templates/Onyx.js

@@ -31,6 +31,10 @@ const Onyx = ({ data }) => {
   const dispatch = useDispatch();
 
   useEffect(() => {
+    dispatch({
+      type: 'set_fixed_sections',
+      payload: ['profile', 'social'],
+    });
     dispatch({ type: 'set_block_count', payload: 3 });
   }, []);
 

src/templates/Pikachu.js

@@ -0,0 +1,340 @@
+import React, { useContext } from 'react';
+import ReactMarkdown from 'react-markdown';
+
+const Pikachu = () => {
+  const context = useContext(AppContext);
+  const { state } = context;
+  const { data, theme } = state;
+
+  const Photo = () =>
+    data.profile.photo !== '' && (
+      <div className="self-center col-span-4">
+        <img
+          className="w-48 h-48 rounded-full mx-auto object-cover"
+          src={data.profile.photo}
+          alt=""
+        />
+      </div>
+    );
+
+  const Header = () => (
+    <div
+      className="h-48 rounded flex flex-col justify-center"
+      style={{
+        backgroundColor: theme.colors.accent,
+        color: theme.colors.background,
+      }}
+    >
+      <div className="flex flex-col justify-center mx-8 my-6">
+        <h1 className="text-3xl font-bold leading-tight">
+          {data.profile.firstName} {data.profile.lastName}
+        </h1>
+        <div className="text-sm font-medium tracking-wide">
+          {data.profile.subtitle}
+        </div>
+
+        <hr className="my-4 opacity-50" />
+
+        <ReactMarkdown className="text-sm" source={data.objective.body} />
+      </div>
+    </div>
+  );
+
+  const ContactItem = ({ icon, value, link = '#' }) =>
+    value && (
+      <div className="flex items-center my-3">
+        <span
+          className="material-icons text-lg mr-2"
+          style={{ color: theme.colors.accent }}
+        >
+          {icon}
+        </span>
+        <a href={link}>
+          <span className="font-medium break-all">{value}</span>
+        </a>
+      </div>
+    );
+
+  const Heading = ({ title }) => (
+    <div
+      className="mb-2 border-b-2 pb-1 font-bold uppercase tracking-wide text-sm"
+      style={{ color: theme.colors.accent, borderColor: theme.colors.accent }}
+    >
+      {title}
+    </div>
+  );
+
+  const SkillItem = (x) => (
+    <span
+      key={x.id}
+      className="leading-none rounded-lg text-sm font-medium bg-gray-300 py-3 my-1 px-4"
+    >
+      {x.skill}
+    </span>
+  );
+
+  const Skills = () =>
+    data.skills &&
+    data.skills.enable && (
+      <div>
+        <Heading title={data.skills.heading} />
+        <div className="flex flex-col mb-6">
+          {data.skills.items.map(SkillItem)}
+        </div>
+      </div>
+    );
+
+  const HobbyItem = (x) => (
+    <span
+      key={x.id}
+      className="leading-none rounded-lg text-sm font-medium bg-gray-300 py-3 my-1 px-4"
+    >
+      {x.hobby}
+    </span>
+  );
+
+  const Hobbies = () =>
+    data.hobbies &&
+    data.hobbies.enable && (
+      <div>
+        <Heading title={data.hobbies.heading} />
+        <div className="flex flex-col mb-6">
+          {data.hobbies.items.map(HobbyItem)}
+        </div>
+      </div>
+    );
+
+  const ReferenceItem = (x) => (
+    <div key={x.id} className="flex flex-col">
+      <h6 className="text-sm font-medium">{x.name}</h6>
+      <span className="text-xs">{x.position}</span>
+      <span className="text-xs">{x.phone}</span>
+      <span className="text-xs">{x.email}</span>
+      <ReactMarkdown className="mt-2 text-sm" source={x.description} />
+    </div>
+  );
+
+  const References = () =>
+    data.references &&
+    data.references.enable && (
+      <div>
+        <Heading title={data.references.heading} />
+        <div className="grid grid-cols-2 gap-2 mb-6">
+          {data.references.items.filter((x) => x.enable).map(ReferenceItem)}
+        </div>
+      </div>
+    );
+
+  const LanguageItem = (x) => (
+    <div key={x.id} className="grid grid-cols-2 items-center py-2">
+      <h6 className="text-sm font-medium">{x.key}</h6>
+      <div className="flex">
+        {x.level && <div className="font-bold text-sm mr-2">{x.level}</div>}
+        {x.rating !== 0 && (
+          <div className="flex">
+            {Array.from(Array(x.rating)).map((_, i) => (
+              <i
+                key={i}
+                className="material-icons text-lg"
+                style={{ color: theme.colors.accent }}
+              >
+                star
+              </i>
+            ))}
+          </div>
+        )}
+      </div>
+    </div>
+  );
+
+  const Languages = () =>
+    data.languages &&
+    data.languages.enable && (
+      <div>
+        <Heading title={data.languages.heading} />
+        <div className="mb-6">
+          {data.languages.items.filter((x) => x.enable).map(LanguageItem)}
+        </div>
+      </div>
+    );
+
+  const ExtraItem = (x) => (
+    <div key={x.id} className="text-sm my-1">
+      <h6 className="text-xs font-bold">{x.key}</h6>
+      <h6 className="">{x.value}</h6>
+    </div>
+  );
+
+  const Extras = () =>
+    data.extras &&
+    data.extras.enable && (
+      <div>
+        <Heading title={data.extras.heading} />
+        <div className="grid grid-cols-2">
+          {data.extras.items.filter((x) => x.enable).map(ExtraItem)}
+        </div>
+      </div>
+    );
+
+  const WorkItem = (x) => (
+    <div key={x.id} className="mb-3">
+      <div className="flex justify-between items-center">
+        <div>
+          <h6 className="font-semibold">{x.title}</h6>
+          <p className="text-xs">{x.role}</p>
+        </div>
+        <span className="text-xs font-medium">
+          ({x.start} - {x.end})
+        </span>
+      </div>
+      <ReactMarkdown className="mt-2 text-sm" source={x.description} />
+    </div>
+  );
+
+  const Work = () =>
+    data.work &&
+    data.work.enable && (
+      <div>
+        <Heading title={data.work.heading} />
+        <div className="flex flex-col mb-4">
+          {data.work.items.filter((x) => x.enable).map(WorkItem)}
+        </div>
+      </div>
+    );
+
+  const EducationItem = (x) => (
+    <div key={x.id} className="mb-2">
+      <div className="flex justify-between items-center">
+        <div>
+          <h6 className="font-semibold">{x.name}</h6>
+          <p className="text-xs">{x.major}</p>
+        </div>
+        <div className="flex flex-col text-right items-end">
+          <span
+            className="text-sm font-bold"
+            style={{ color: theme.colors.accent }}
+          >
+            {x.grade}
+          </span>
+          <span className="text-xs font-medium">
+            ({x.start} - {x.end})
+          </span>
+        </div>
+      </div>
+      <ReactMarkdown className="mt-2 text-sm" source={x.description} />
+    </div>
+  );
+
+  const Education = () =>
+    data.education &&
+    data.education.enable && (
+      <div>
+        <Heading title={data.education.heading} />
+        <div className="flex flex-col mb-4">
+          {data.education.items.filter((x) => x.enable).map(EducationItem)}
+        </div>
+      </div>
+    );
+
+  const AwardItem = (x) => (
+    <div key={x.id} className="mb-2">
+      <h6 className="font-semibold">{x.title}</h6>
+      <p className="text-xs">{x.subtitle}</p>
+      <ReactMarkdown className="mt-2 text-sm" source={x.description} />
+    </div>
+  );
+
+  const Awards = () =>
+    data.awards &&
+    data.awards.enable && (
+      <div>
+        <Heading title={data.awards.heading} />
+        <div className="flex flex-col mb-2">
+          {data.awards.items.filter((x) => x.enable).map(AwardItem)}
+        </div>
+      </div>
+    );
+
+  const CertificationItem = (x) => (
+    <div key={x.id} className="mb-3">
+      <h6 className="font-semibold">{x.title}</h6>
+      <p className="text-xs">{x.subtitle}</p>
+      <ReactMarkdown className="mt-2 text-sm" source={x.description} />
+    </div>
+  );
+
+  const Certifications = () =>
+    data.certifications &&
+    data.certifications.enable && (
+      <div>
+        <Heading title={data.certifications.heading} />
+        <div className="flex flex-col mb-2">
+          {data.certifications.items
+            .filter((x) => x.enable)
+            .map(CertificationItem)}
+        </div>
+      </div>
+    );
+
+  return (
+    <div
+      className="p-10"
+      style={{
+        fontFamily: theme.font.family,
+        backgroundColor: theme.colors.background,
+        color: theme.colors.primary,
+      }}
+    >
+      <div className="grid grid-cols-12 col-gap-6 row-gap-8">
+        <Photo />
+
+        <div
+          className={`${
+            data.profile.photo !== '' ? 'col-span-8' : 'col-span-12'
+          }`}
+        >
+          <Header />
+        </div>
+
+        <div className="col-span-4 overflow-hidden">
+          <div className="text-sm mb-6">
+            <ContactItem
+              icon="phone"
+              value={data.profile.phone}
+              link={`tel:${data.profile.phone}`}
+            />
+            <ContactItem
+              icon="language"
+              value={data.profile.website}
+              link={`http://${data.profile.website}`}
+            />
+            <ContactItem
+              icon="email"
+              value={data.profile.email}
+              link={`mailto:${data.profile.email}`}
+            />
+            <ContactItem
+              icon="location_on"
+              value={data.profile.address.line3}
+            />
+          </div>
+
+          <Skills />
+          <Hobbies />
+          <Languages />
+          <Certifications />
+        </div>
+
+        <div className="col-span-8">
+          <Work />
+          <Education />
+          <Awards />
+          <References />
+          <Extras />
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default Pikachu;