Beta.14 (#244)

* update beta version * decode emojis for category sorting * no autocomplete for username on join page * bugfix for wrong emoji decoding * move booky illustration * package fixes * activate export page * use intl numberformat for footer stats * More user settings (#235) * update initial state * add close edit mode setting * add categories layout and error handling * more settings * add minimal bookmark mode * save dragging in redux and hide icons while dragging * add title fallback when editing bookmark * run renovate only on weekends * Update en.json (POEditor.com) * Update de.json (POEditor.com) * Update en.json (POEditor.com) * Update de.json (POEditor.com) * Update en.json (POEditor.com) * Update de.json (POEditor.com) * update order * add notes option and dark mode as radio buttons * remove first * add images for dark mode * Update en.json (POEditor.com) * Update de.json (POEditor.com) * change order * change order * hover edit mode for categories * hide icons only in hover edit mode * show customize in header * disable notes * add mobile media query to disable hover effects on mobile * skeleton for header icon
nthiebes · Sep 22, 2020 · 4932b1f · 4932b1f
1 parent 4521609
commit 4932b1f
Show file tree

Hide file tree

Showing 42 changed files with 589 additions and 142 deletions.
diff --git a/_source/_assets/illustrations/booky.png → _source/_assets/booky.png b/_source/_assets/illustrations/booky.png → _source/_assets/booky.png
diff --git a/_source/_assets/illustrations/dark-mode.svg b/_source/_assets/illustrations/dark-mode.svg
diff --git a/_source/_assets/illustrations/light-mode.svg b/_source/_assets/illustrations/light-mode.svg
diff --git a/_source/_state/bookmarks/actions.js b/_source/_state/bookmarks/actions.js
@@ -1,5 +1,6 @@
 import fetcher from '../../_utils/fetcher';
 import { encodeEmoji, decodeEmoji } from '../../_utils/string';
+import { removeEmpty } from '../../_utils/object';
 
 export const setBookmarks = ({bookmarks, id, error}) => ({
   type: 'SET_BOOKMARKS',
@@ -73,12 +74,12 @@ export const editBookmark = ({ categoryId, name, url, onError, onSuccess, id, po
   fetcher({
     url: `/bookmarks/${id}`,
     method: 'PATCH',
-    params: {
-      name: encodeEmoji(name),
+    params: removeEmpty({
+      name: name ? encodeEmoji(name) : '',
       url,
       categoryId,
       position
-    },
+    }),
     onSuccess: ({ favicon }) => {
       if (shouldUpdate) {
         dispatch({

diff --git a/_source/_state/categories-sorting/actions.js b/_source/_state/categories-sorting/actions.js
@@ -1,4 +1,5 @@
 import fetcher from '../../_utils/fetcher';
+import { decodeEmoji } from '../../_utils/string';
 import { editCategory } from '../categories/actions';
 
 export const updateCategoriesSorting = (data) => ({
@@ -17,7 +18,10 @@ export const getCategories = (dashboardId) => ((dispatch) => {
     url: `/dashboards/${dashboardId}/categories`,
     onSuccess: (data) => {
       dispatch(updateCategoriesSorting({
-        items: data,
+        items: data.map((category) => ({
+          ...category,
+          name: decodeEmoji(category.name)
+        })),
         pending: false
       }));
     },

diff --git a/_source/_state/categories/actions.js b/_source/_state/categories/actions.js
@@ -1,5 +1,6 @@
 import fetcher from '../../_utils/fetcher';
 import { encodeEmoji, decodeEmoji } from '../../_utils/string';
+import { removeEmpty } from '../../_utils/object';
 import { updateDashboardsData } from '../dashboards/actions';
 import { getBookmarks, setBookmarks } from '../bookmarks/actions';
 
@@ -61,13 +62,13 @@ export const editCategory = ({ id, color, name, hidden, position, dashboardId, o
   fetcher({
     url: `/categories/${id}`,
     method: 'PATCH',
-    params: {
+    params: removeEmpty({
       color,
-      name: encodeEmoji(name),
+      name: name ? encodeEmoji(name) : '',
       dashboardId,
       hidden,
       position
-    },
+    }),
     onSuccess: () => {
       dispatch({
         type: 'EDIT_CATEGORY',

diff --git a/_source/_state/dashboards/actions.js b/_source/_state/dashboards/actions.js
@@ -1,5 +1,6 @@
 import fetcher, { abortFetch } from '../../_utils/fetcher';
 import { encodeEmoji, decodeEmoji } from '../../_utils/string';
+import { removeEmpty } from '../../_utils/object';
 
 import { setCategories, getCategories } from '../categories/actions';
 import { updateSettings } from '../user/actions';
@@ -90,10 +91,10 @@ export const editDashboard = ({ name, position, id, onSuccess, onError, shouldUp
   fetcher({
     url: `/dashboards/${id}`,
     method: 'PATCH',
-    params: {
-      name: encodeEmoji(name),
+    params: removeEmpty({
+      name: name ? encodeEmoji(name) : '',
       position
-    },
+    }),
     onSuccess: () => {
       if (shouldUpdate) {
         dispatch({

diff --git a/_source/_state/dragging/actions.js b/_source/_state/dragging/actions.js
@@ -0,0 +1,8 @@
+export const startDragging = (data) => ({
+  type: 'START_DRAGGING',
+  data
+});
+
+export const stopDragging = () => ({
+  type: 'STOP_DRAGGING'
+});
diff --git a/_source/_state/dragging/reducer.js b/_source/_state/dragging/reducer.js
@@ -0,0 +1,26 @@
+import initialState from '../../initialState';
+
+const dragging = (state = {}, action) => {
+  const { type, data } = action;
+
+  switch (type) {
+    case 'START_DRAGGING': {
+      return {
+        ...state,
+        ...data,
+        isDragging: true
+      };
+    }
+
+    case 'STOP_DRAGGING': {
+      return {
+        ...initialState.dragging
+      };
+    }
+
+    default:
+      return state;
+  }
+};
+
+export default dragging;
diff --git a/_source/_state/user/actions.js b/_source/_state/user/actions.js
@@ -9,6 +9,13 @@ export const resetUserState = () => ({
   type: RESET_USER_STATE
 });
 
+export const updateUserData = (userData) => ((dispatch) => {
+  dispatch({
+    type: UPDATE_USER,
+    userData
+  });
+});
+
 export const updateUser = ({userData, onError, onSuccess}) => ((dispatch) => {
   dispatch({
     type: UPDATE_USER,
@@ -30,7 +37,7 @@ export const updateUser = ({userData, onError, onSuccess}) => ((dispatch) => {
   });
 });
 
-export const updateSettings = (userSettings) => ((dispatch) => {
+export const updateSettings = (userSettings, {onSuccess, onError} = {}) => ((dispatch) => {
   dispatch({
     type: UPDATE_SETTINGS,
     userSettings
@@ -41,10 +48,10 @@ export const updateSettings = (userSettings) => ((dispatch) => {
     method: 'PATCH',
     params: userSettings,
     onSuccess: () => {
-      // console.log(data);
+      onSuccess && onSuccess();
     },
-    onError: () => {
-      // console.log(error);
+    onError: (error) => {
+      onError && onError(error);
     }
   });
 });

diff --git a/_source/atoms/icon/Icon.js b/_source/atoms/icon/Icon.js
@@ -80,7 +80,7 @@ export default class Icon extends Component {
 
     return (
       useSkeleton ? (
-        <Skeleton className={ classNames('icon--skeleton', className) } />
+        <Skeleton ignoreDarkMode={ ignoreDarkMode } className={ classNames('icon--skeleton', className) } />
       ) : (
         <CustomTag
           className={ classNames(

diff --git a/_source/atoms/radio/Radio.js b/_source/atoms/radio/Radio.js
@@ -19,7 +19,8 @@ export default class Radio extends Component {
     checked: PropTypes.bool,
     inputClassName: PropTypes.string,
     labelClassName: PropTypes.string,
-    first: PropTypes.bool
+    first: PropTypes.bool,
+    illustration: PropTypes.string
   }
 
   handleInputChange = (event) => {
@@ -32,10 +33,22 @@ export default class Radio extends Component {
   }
 
   render() {
-    const { children, className, id, name, value, checked, inputClassName, labelClassName, first } = this.props;
+    const { children, className, id, name, value, checked, inputClassName, labelClassName, first, illustration } = this.props;
 
     return (
-      <div className={ classNames('radio', first && 'radio--first', className) }>
+      <div className={ classNames('radio', first && 'radio--first', illustration && 'radio--image', className) }>
+        { illustration && (
+          <label htmlFor={ id } className="radio__image-label">
+            <img
+              width={ 200 }
+              alt=""
+              className="radio__image"
+              src={ `../../_assets/illustrations/${illustration}.svg` }
+              aria-hidden="true"
+              loading="lazy"
+            />
+          </label>
+        ) }
         <input
           type="radio"
           id={ id }

diff --git a/_source/atoms/radio/Radio.scss b/_source/atoms/radio/Radio.scss
@@ -3,12 +3,17 @@
   align-items: center;
   margin-top: 1rem;
   padding-bottom: 0.5rem;
+  white-space: nowrap;
 }
 
 .radio--first {
   margin-top: 0;
 }
 
+.radio--image {
+  display: block;
+}
+
 .radio__input {
   &:focus {
     outline: 2px dashed $color--primary;
@@ -19,6 +24,18 @@
   user-select: none;
   margin: 0;
   padding: 0 0 0 0.5rem;
-  display: flex;
+  display: inline-flex;
   align-items: center;
+  white-space: normal;
+  margin-right: 1rem;
+}
+
+.radio__image-label {
+  display: block;
+  margin-bottom: 0.5rem;
+}
+
+.radio__image {
+  width: 100%;
+  max-width: 200px;
 }
diff --git a/_source/atoms/skeleton/Skeleton.js b/_source/atoms/skeleton/Skeleton.js
@@ -4,11 +4,11 @@ import classNames from 'classnames';
 
 export default class Skeleton extends Component {
   render() {
-    const { className, darkMode } = this.props;
+    const { className, darkMode, ignoreDarkMode } = this.props;
 
     return (
       // eslint-disable-next-line react/jsx-no-literals
-      <span className={ classNames('skeleton', darkMode && 'skeleton--darkMode', className) }>
+      <span className={ classNames('skeleton', darkMode && !ignoreDarkMode && 'skeleton--darkMode', className) }>
         &zwnj;
       </span>
     );
@@ -17,5 +17,6 @@ export default class Skeleton extends Component {
 
 Skeleton.propTypes = {
   className: PropTypes.string,
-  darkMode: PropTypes.bool
+  darkMode: PropTypes.bool,
+  ignoreDarkMode: PropTypes.bool
 };