Merge branch 'develop' into refactor/user.controller

client/constants.js

@@ -137,9 +137,6 @@ export const SET_SORT_PARAMS = 'SET_SORT_PARAMS';
 export const SET_SEARCH_TERM = 'SET_SEARCH_TERM';
 export const CLOSE_SKETCHLIST_MODAL = 'CLOSE_SKETCHLIST_MODAL';
 
-export const START_LOADING = 'START_LOADING';
-export const STOP_LOADING = 'STOP_LOADING';
-
 export const START_SAVING_PROJECT = 'START_SAVING_PROJECT';
 export const END_SAVING_PROJECT = 'END_SAVING_PROJECT';
 

client/modules/App/components/ThemeProvider.jsx

@@ -1,23 +1,18 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import { connect } from 'react-redux';
+import { useSelector } from 'react-redux';
 import { ThemeProvider } from 'styled-components';
+import theme from '../../../theme';
 
-import theme, { Theme } from '../../../theme';
-
-const Provider = ({ children, currentTheme }) => (
-  <ThemeProvider theme={{ ...theme[currentTheme] }}>{children}</ThemeProvider>
-);
+const Provider = ({ children }) => {
+  const currentTheme = useSelector((state) => state.preferences.theme);
+  return (
+    <ThemeProvider theme={{ ...theme[currentTheme] }}>{children}</ThemeProvider>
+  );
+};
 
 Provider.propTypes = {
-  children: PropTypes.node.isRequired,
-  currentTheme: PropTypes.oneOf(Object.keys(Theme)).isRequired
+  children: PropTypes.node.isRequired
 };
 
-function mapStateToProps(state) {
-  return {
-    currentTheme: state.preferences.theme
-  };
-}
-
-export default connect(mapStateToProps)(Provider);
+export default Provider;

client/modules/IDE/actions/assets.js

@@ -1,6 +1,6 @@
 import apiClient from '../../../utils/apiClient';
 import * as ActionTypes from '../../../constants';
-import { startLoader, stopLoader } from './loader';
+import { startLoader, stopLoader } from '../reducers/loading';
 import { assetsActions } from '../reducers/assets';
 
 const { setAssets, deleteAsset } = assetsActions;

client/modules/IDE/actions/collections.js

@@ -1,7 +1,7 @@
 import browserHistory from '../../../browserHistory';
 import apiClient from '../../../utils/apiClient';
 import * as ActionTypes from '../../../constants';
-import { startLoader, stopLoader } from './loader';
+import { startLoader, stopLoader } from '../reducers/loading';
 import { setToastText, showToast } from './toast';
 
 const TOAST_DISPLAY_TIME_MS = 1500;
@@ -80,7 +80,7 @@ export function addToCollection(collectionId, projectId) {
 
         const collectionName = response.data.name;
 
-        dispatch(setToastText(`Added to "${collectionName}`));
+        dispatch(setToastText(`Added to "${collectionName}"`));
         dispatch(showToast(TOAST_DISPLAY_TIME_MS));
 
         return response.data;
@@ -110,7 +110,7 @@ export function removeFromCollection(collectionId, projectId) {
 
         const collectionName = response.data.name;
 
-        dispatch(setToastText(`Removed from "${collectionName}`));
+        dispatch(setToastText(`Removed from "${collectionName}"`));
         dispatch(showToast(TOAST_DISPLAY_TIME_MS));
 
         return response.data;

client/modules/IDE/actions/projects.js

@@ -1,6 +1,6 @@
 import apiClient from '../../../utils/apiClient';
 import * as ActionTypes from '../../../constants';
-import { startLoader, stopLoader } from './loader';
+import { startLoader, stopLoader } from '../reducers/loading';
 
 // eslint-disable-next-line
 export function getProjects(username) {

client/modules/IDE/actions/projects.unit.test.js

@@ -5,6 +5,7 @@ import { rest } from 'msw';
 
 import * as ProjectActions from './projects';
 import * as ActionTypes from '../../../constants';
+import { startLoader, stopLoader } from '../reducers/loading';
 import {
   initialTestState,
   mockProjects
@@ -33,9 +34,9 @@ describe('projects action creator tests', () => {
     store = mockStore(initialTestState);
 
     const expectedActions = [
-      { type: ActionTypes.START_LOADING },
+      { type: startLoader.type },
       { type: ActionTypes.SET_PROJECTS, projects: mockProjects },
-      { type: ActionTypes.STOP_LOADING }
+      { type: stopLoader.type }
     ];
 
     return store

client/modules/IDE/components/Preferences/Preferences.unit.test.jsx

@@ -1,5 +1,6 @@
 import React from 'react';
 import { act, fireEvent, reduxRender, screen } from '../../../../test-utils';
+import { initialState } from '../../reducers/preferences';
 import Preferences from './index';
 import * as PreferencesActions from '../../actions/preferences';
 
@@ -15,7 +16,10 @@ describe('<Preferences />', () => {
   const subject = (initialPreferences = {}) =>
     reduxRender(<Preferences />, {
       initialState: {
-        preferences: initialPreferences
+        preferences: {
+          ...initialState,
+          ...initialPreferences
+        }
       }
     });
 

client/modules/IDE/reducers/loading.js

@@ -1,14 +1,13 @@
-import * as ActionTypes from '../../../constants';
+import { createSlice } from '@reduxjs/toolkit';
 
-const loading = (state = false, action) => {
-  switch (action.type) {
-    case ActionTypes.START_LOADING:
-      return true;
-    case ActionTypes.STOP_LOADING:
-      return false;
-    default:
-      return state;
+const loadingSlice = createSlice({
+  name: 'loading',
+  initialState: false,
+  reducers: {
+    startLoader: () => true,
+    stopLoader: () => false
   }
-};
+});
 
-export default loading;
+export const { startLoader, stopLoader } = loadingSlice.actions;
+export default loadingSlice.reducer;

client/modules/IDE/reducers/preferences.js

@@ -1,6 +1,6 @@
 import * as ActionTypes from '../../../constants';
 
-const initialState = {
+export const initialState = {
   fontSize: 18,
   autosave: true,
   linewrap: true,

client/styles/components/_editor.scss

@@ -91,7 +91,7 @@ pre.CodeMirror-line {
   position: fixed;
   top: 0;
   left: 50%;
-  margin-left: math.div(552 * 0.5, $base-font-size);
+  margin-left: #{math.div(-552 * 0.5, $base-font-size)}rem;
 
   @media (max-width: 770px) {
     left: 0;
@@ -100,7 +100,7 @@ pre.CodeMirror-line {
     margin-left: 0;
   }
 
-  z-index: 1;
+  z-index: 10;
 
   width: 580px;
   font-family: Montserrat, sans-serif;
@@ -139,8 +139,11 @@ pre.CodeMirror-line {
 }
 
 .CodeMirror-find-controls {
+  width: 100%;
   display: flex;
   align-items: center;
+  justify-content: space-between;
+  height: #{math.div(35, $base-font-size)}rem;
 }
 .CodeMirror-search-inputs {
   width: 30%;
@@ -152,9 +155,11 @@ pre.CodeMirror-line {
   align-items: center;
 }
 .CodeMirror-search-controls {
+  width: 60%;
   display: flex;
-  align-items: center;
-  justify-content: end;
+  flex-wrap: wrap-reverse;
+  justify-content: flex-start;
+  align-items: flex-end;
 }
 .CodeMirror-replace-controls {
   display: flex;

client/testData/testReduxStore.js

@@ -1,4 +1,5 @@
 import { initialState as initialFilesState } from '../modules/IDE/reducers/files';
+import { initialState as initialPrefState } from '../modules/IDE/reducers/preferences';
 
 const mockProjects = [
   {
@@ -46,20 +47,7 @@ const initialTestState = {
     parentId: undefined
   },
   files: initialFilesState(),
-  preferences: {
-    fontSize: 18,
-    autosave: true,
-    linewrap: true,
-    lineNumbers: true,
-    lintWarning: false,
-    textOutput: false,
-    gridOutput: false,
-    theme: 'light',
-    autorefresh: false,
-    language: 'en-US',
-    autocloseBracketsQuotes: true,
-    autocompleteHinter: false
-  },
+  preferences: initialPrefState,
   user: {
     email: '[email protected]',
     username: 'happydog',

package.json

@@ -1,6 +1,6 @@
 {
   "name": "p5.js-web-editor",
-  "version": "2.11.0",
+  "version": "2.12.1",
   "description": "The web editor for p5.js.",
   "scripts": {
     "clean": "rimraf dist",

server/config/passport.js

@@ -123,12 +123,12 @@ passport.use(
       User.findOne({ github: profile.id }, (findByGithubErr, existingUser) => {
         if (existingUser) {
           if (req.user && req.user.email !== existingUser.email) {
-            done(
-              new Error('GitHub account is already linked to another account.')
-            );
+            done(null, false, {
+              msg: 'GitHub account is already linked to another account.'
+            });
             return;
           } else if (existingUser.banned) {
-            done(new Error(accountSuspensionMessage));
+            done(null, false, { msg: accountSuspensionMessage });
             return;
           }
           done(null, existingUser);
@@ -159,7 +159,7 @@ passport.use(
                 [existingEmailUser] = existingEmailUsers;
               }
               if (existingEmailUser.banned) {
-                done(new Error(accountSuspensionMessage));
+                done(null, false, { msg: accountSuspensionMessage });
                 return;
               }
               existingEmailUser.email = existingEmailUser.email || primaryEmail;
@@ -218,14 +218,12 @@ passport.use(
         (findByGoogleErr, existingUser) => {
           if (existingUser) {
             if (req.user && req.user.email !== existingUser.email) {
-              done(
-                new Error(
-                  'Google account is already linked to another account.'
-                )
-              );
+              done(null, false, {
+                msg: 'Google account is already linked to another account.'
+              });
               return;
             } else if (existingUser.banned) {
-              done(new Error(accountSuspensionMessage));
+              done(null, false, { msg: accountSuspensionMessage });
               return;
             }
             done(null, existingUser);
@@ -256,7 +254,7 @@ passport.use(
                     // then, append a random friendly word?
                     if (existingEmailUser) {
                       if (existingEmailUser.banned) {
-                        done(new Error(accountSuspensionMessage));
+                        done(null, false, { msg: accountSuspensionMessage });
                         return;
                       }
                       existingEmailUser.email =

server/domain-objects/createDefaultFiles.js

@@ -9,8 +9,8 @@ function draw() {
 export const defaultHTML = `<!DOCTYPE html>
 <html lang="en">
   <head>
-    <script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.9.0/p5.js"></script>
-    <script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.9.0/addons/p5.sound.min.js"></script>
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.9.1/p5.js"></script>
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.9.1/addons/p5.sound.min.js"></script>
     <link rel="stylesheet" type="text/css" href="style.css">
     <meta charset="utf-8" />