{
+ const dispatch = useDispatch();
+ const template = useSelector('metadata.template');
+
+ const handleClick = (value) => {
+ dispatch({
+ type: 'on_input',
+ payload: {
+ path: 'metadata.template',
+ value,
+ },
+ });
+ };
+
+ return (
+
+ Templates
+
+
+ {templates.map((x) => (
+
handleKeyUp(e, () => handleClick(x.id))}
+ onClick={() => handleClick(x.id)}
+ className={cx(styles.template, {
+ [styles.selected]: template === x.id,
+ })}
+ >
+
+
{x.name}
+
+ ))}
+
+ );
+};
+
+export default memo(Templates);
diff --git a/src/components/builder/right/sections/Templates.module.css b/src/components/builder/right/sections/Templates.module.css
new file mode 100644
index 00000000..e1cd3f7c
--- /dev/null
+++ b/src/components/builder/right/sections/Templates.module.css
@@ -0,0 +1,26 @@
+.template {
+ @apply w-full rounded flex flex-col items-center;
+}
+
+.template:focus {
+ @apply outline-none;
+}
+
+.template img {
+ height: 240px;
+ @apply w-full object-cover border-2 border-transparent rounded;
+ @apply transition-opacity duration-200 ease-in-out;
+}
+
+.template.selected img {
+ @apply border-2 border-primary;
+}
+
+.template:hover img {
+ @apply cursor-pointer opacity-75;
+ @apply transition-opacity duration-200 ease-in-out;
+}
+
+.template span {
+ @apply mt-1 text-center text-sm font-semibold;
+}
\ No newline at end of file
diff --git a/src/components/shared/Input.js b/src/components/shared/Input.js
index fd25cc3f..8b89e449 100644
--- a/src/components/shared/Input.js
+++ b/src/components/shared/Input.js
@@ -1,5 +1,5 @@
import cx from 'classnames';
-import { get, isFunction } from 'lodash';
+import { isFunction } from 'lodash';
import React, { memo, useEffect, useState } from 'react';
import { FaAngleDown } from 'react-icons/fa';
import { MdClose } from 'react-icons/md';
@@ -26,14 +26,14 @@ const Input = ({
type = 'text',
}) => {
const [uuid, setUuid] = useState(null);
- const stateValue = useSelector((state) => get(state, path));
+ const stateValue = useSelector(path, '');
const dispatch = useDispatch();
useEffect(() => {
setUuid(uuidv4());
}, []);
- value = isFunction(onChange) ? value : stateValue;
+ value = path ? stateValue : value;
onChange = isFunction(onChange)
? onChange
: (e) => {
diff --git a/src/components/shared/Input.module.css b/src/components/shared/Input.module.css
index 548efec1..6848fc79 100644
--- a/src/components/shared/Input.module.css
+++ b/src/components/shared/Input.module.css
@@ -14,10 +14,16 @@
@apply text-primary opacity-50;
}
+.container label input:hover,
+.container label textarea:hover,
+.container label select:hover {
+ @apply outline-none border-secondary-dark;
+}
+
.container label input:focus,
.container label textarea:focus,
.container label select:focus {
- @apply outline-none border-gray-500;
+ @apply outline-none border-primary;
}
.container label > p {
diff --git a/src/components/shared/PhotoUpload.module.css b/src/components/shared/PhotoUpload.module.css
index 40d90b5e..7845c5ac 100644
--- a/src/components/shared/PhotoUpload.module.css
+++ b/src/components/shared/PhotoUpload.module.css
@@ -3,4 +3,14 @@
height: 60px;
flex: 0 0 60px;
@apply flex items-center justify-center cursor-pointer bg-secondary text-secondary-dark rounded-full;
+ @apply transition-opacity duration-200 ease-in-out;
+}
+
+.circle:focus {
+ @apply outline-none;
+}
+
+.circle:hover {
+ @apply opacity-75;
+ @apply transition-opacity duration-200 ease-in-out;
}
diff --git a/src/components/shared/SectionIcon.js b/src/components/shared/SectionIcon.js
index b51eb0fc..6c717d3c 100644
--- a/src/components/shared/SectionIcon.js
+++ b/src/components/shared/SectionIcon.js
@@ -19,9 +19,9 @@ const SectionIcon = ({ section, containerId, tooltipPlacement }) => {
duration={500}
containerId={containerId}
activeClass="text-primary"
- className="py-2 cursor-pointer focus:outline-none focus:text-primary hover:text-primary"
+ className="py-2 cursor-pointer focus:outline-none focus:text-primary hover:text-primary animate__animated animate__fadeIn"
>
-
+
);
diff --git a/src/contexts/MetadataContext.js b/src/contexts/MetadataContext.js
deleted file mode 100644
index 1d838b29..00000000
--- a/src/contexts/MetadataContext.js
+++ /dev/null
@@ -1,70 +0,0 @@
-import { clone, setWith } from 'lodash';
-import React, {
- createContext,
- memo,
- useCallback,
- useContext,
- useReducer,
-} from 'react';
-import leftSections from '../data/leftSections';
-import DatabaseContext from './DatabaseContext';
-import { useSelector as useResumeSelector } from './ResumeContext';
-
-const initialState = {
- template: 'Onyx',
- font: 'Montserrat',
- layout: [leftSections.map(({ id, name }) => ({ id, name }))],
- colors: {
- textColor: '#444444',
- primaryColor: '#5875DB',
- backgroundColor: '#FFFFFF',
- },
-};
-
-const MetadataContext = createContext({});
-
-const MetadataProvider = ({ children }) => {
- const id = useResumeSelector((state) => state.id);
- const { debouncedUpdateMetadata } = useContext(DatabaseContext);
-
- const memoizedReducer = useCallback(
- (state, { type, payload }) => {
- let newState;
-
- switch (type) {
- case 'set_layout':
- newState = setWith(clone(state), 'layout', payload, clone);
- debouncedUpdateMetadata(id, newState);
- return newState;
-
- default:
- throw new Error();
- }
- },
- [id, debouncedUpdateMetadata],
- );
-
- const [state, dispatch] = useReducer(memoizedReducer, initialState);
-
- const selectValue = (callback) => callback(state);
-
- return (
-
- {children}
-
- );
-};
-
-const useSelector = (callback) => {
- const { selectValue } = useContext(MetadataContext);
- return selectValue(callback);
-};
-
-const useDispatch = () => {
- const { dispatch } = useContext(MetadataContext);
- return dispatch;
-};
-
-const memoizedProvider = memo(MetadataProvider);
-
-export { memoizedProvider as MetadataProvider, useSelector, useDispatch };
diff --git a/src/contexts/ResumeContext.js b/src/contexts/ResumeContext.js
index fd4e4be4..208d24a9 100644
--- a/src/contexts/ResumeContext.js
+++ b/src/contexts/ResumeContext.js
@@ -1,5 +1,5 @@
import arrayMove from 'array-move';
-import { clone, findIndex, get, setWith } from 'lodash';
+import { clone, findIndex, get, isUndefined, setWith } from 'lodash';
import React, {
createContext,
memo,
@@ -7,9 +7,22 @@ import React, {
useContext,
useReducer,
} from 'react';
+import leftSections from '../data/leftSections';
import DatabaseContext from './DatabaseContext';
-const initialState = {};
+const initialState = {
+ name: '',
+ metadata: {
+ template: 'onyx',
+ font: 'Montserrat',
+ layout: [leftSections.map(({ id, name }) => ({ id, name }))],
+ colors: {
+ text: '#444444',
+ primary: '#5875DB',
+ background: '#FFFFFF',
+ },
+ },
+};
const ResumeContext = createContext({});
@@ -89,18 +102,22 @@ const ResumeProvider = ({ children }) => {
const [state, dispatch] = useReducer(memoizedReducer, initialState);
- const selectValue = (callback) => callback(state);
-
return (
-
+
{children}
);
};
-const useSelector = (callback) => {
- const { selectValue } = useContext(ResumeContext);
- return selectValue(callback);
+const useSelector = (path, fallback) => {
+ const { state } = useContext(ResumeContext);
+ let value = get(state, path);
+
+ if (isUndefined(value)) {
+ value = isUndefined(fallback) ? state : fallback;
+ }
+
+ return value;
};
const useDispatch = () => {
diff --git a/src/contexts/StorageContext.js b/src/contexts/StorageContext.js
index 628f985e..454c92fc 100644
--- a/src/contexts/StorageContext.js
+++ b/src/contexts/StorageContext.js
@@ -16,7 +16,7 @@ const StorageProvider = ({ children }) => {
const { user } = useContext(UserContext);
- const id = useSelector((state) => state.id);
+ const id = useSelector('id');
const dispatch = useDispatch();
const uploadPhotograph = async (file) => {
diff --git a/src/data/rightSections.js b/src/data/rightSections.js
index fc266834..aa5ccd53 100644
--- a/src/data/rightSections.js
+++ b/src/data/rightSections.js
@@ -1,6 +1,11 @@
-import { MdDashboard } from 'react-icons/md';
+import { MdDashboard, MdStyle } from 'react-icons/md';
export default [
+ {
+ id: 'templates',
+ name: 'Templates',
+ icon: MdStyle,
+ },
{
id: 'layout',
name: 'Layout',
diff --git a/src/data/templates.js b/src/data/templates.js
new file mode 100644
index 00000000..a70bbb75
--- /dev/null
+++ b/src/data/templates.js
@@ -0,0 +1,14 @@
+const templates = [
+ {
+ id: 'onyx',
+ name: 'Onyx',
+ preview: 'https://source.unsplash.com/random/300x500',
+ },
+ {
+ id: 'pikachu',
+ name: 'Pikachu',
+ preview: 'https://source.unsplash.com/random/301x501',
+ },
+];
+
+export default templates;
diff --git a/src/modals/ResumeModal.js b/src/modals/ResumeModal.js
index 1ab083cf..7b6ffef8 100644
--- a/src/modals/ResumeModal.js
+++ b/src/modals/ResumeModal.js
@@ -6,9 +6,20 @@ import ModalEvents from '../constants/ModalEvents';
import DatabaseContext from '../contexts/DatabaseContext';
import { getFieldProps } from '../utils';
import DataModal from './DataModal';
+import leftSections from '../data/leftSections';
const initialValues = {
name: '',
+ metadata: {
+ template: 'onyx',
+ font: 'Montserrat',
+ layout: [leftSections.map(({ id, name }) => ({ id, name }))],
+ colors: {
+ text: '#444444',
+ primary: '#5875DB',
+ background: '#FFFFFF',
+ },
+ },
};
const schema = Yup.object().shape({
diff --git a/src/pages/app/dashboard.js b/src/pages/app/dashboard.js
index 0883b279..6ec5c941 100644
--- a/src/pages/app/dashboard.js
+++ b/src/pages/app/dashboard.js
@@ -1,5 +1,5 @@
import firebase from 'gatsby-plugin-firebase';
-import React, { memo, useEffect, useState } from 'react';
+import React, { useEffect, useState } from 'react';
import { Helmet } from 'react-helmet';
import CreateResume from '../../components/dashboard/CreateResume';
import ResumePreview from '../../components/dashboard/ResumePreview';
@@ -27,6 +27,15 @@ const Dashboard = ({ user }) => {
setLoading(false);
});
+ firebase
+ .database()
+ .ref(ref)
+ .on('child_removed', (snapshot) => {
+ if (snapshot.val()) {
+ setResumes(resumes.filter((x) => x.id === snapshot.val().id));
+ }
+ });
+
return () => {
firebase.database().ref(ref).off();
};
@@ -58,4 +67,4 @@ const Dashboard = ({ user }) => {
);
};
-export default memo(Dashboard);
+export default Dashboard;
diff --git a/src/templates/Onyx.js b/src/templates/Onyx.js
index e29f90c2..bfabd829 100644
--- a/src/templates/Onyx.js
+++ b/src/templates/Onyx.js
@@ -2,13 +2,16 @@ import React, { memo } from 'react';
import { FaGlobeAmericas, FaPhone } from 'react-icons/fa';
import { MdEmail } from 'react-icons/md';
-const Onyx = ({ data, layout, colors }) => {
+const Onyx = ({ data }) => {
+ const { profile, metadata } = data;
+ const { colors, layout } = metadata;
+
return (
![]()
{
alt="Photograph"
/>
-
- {data.profile.firstName} {data.profile.lastName}
+
+ {profile.firstName} {profile.lastName}
Customer Sales Representative
@@ -33,17 +33,17 @@ const Onyx = ({ data, layout, colors }) => {
-
+
+1 661-808-4188
-
+
nancyontheweb.com
-
+
nancyjack43@gmail.com
diff --git a/tailwind.config.js b/tailwind.config.js
index bf656fa0..08c50214 100644
--- a/tailwind.config.js
+++ b/tailwind.config.js
@@ -5,6 +5,9 @@ module.exports = {
center: true,
},
extend: {
+ cursor: {
+ 'context-menu': 'context-menu',
+ },
colors: {
primary: 'var(--color-primary)',
'primary-dark': 'var(--color-primary-dark)',