@akemona-org/strapi-admin 3.7.0

package/admin/src/containers/NewNotification/actions.js

@@ -0,0 +1,9 @@
+/* eslint-disable import/prefer-default-export */
+import { SHOW_NEW_NOTIFICATION } from './constants';
+
+export function showNotification(config) {
+  return {
+    type: SHOW_NEW_NOTIFICATION,
+    config,
+  };
+}

package/admin/src/containers/NewNotification/constants.js

@@ -0,0 +1,2 @@
+export const SHOW_NEW_NOTIFICATION = 'SHOW_NEW_NOTIFICATION';
+export const HIDE_NEW_NOTIFICATION = 'HIDE_NEW_NOTIFICATION';

package/admin/src/containers/NewNotification/index.js

@@ -0,0 +1,35 @@
+/**
+ *
+ * NotificationsContainer
+ *
+ */
+
+import React, { memo } from 'react';
+import { useSelector } from 'react-redux';
+import { CSSTransition } from 'react-transition-group';
+
+import Notification from './Notification';
+import NotificationsWrapper from './Wrapper';
+
+const NotificationsContainer = () => {
+  const notifications = useSelector(state => state.get('newNotification').notifications);
+
+  return (
+    <NotificationsWrapper>
+      {notifications.map(notification => (
+        <CSSTransition
+          key={notification.id}
+          classNames="notification"
+          timeout={{
+            enter: 500,
+            exit: 300,
+          }}
+        >
+          <Notification notification={notification} />
+        </CSSTransition>
+      ))}
+    </NotificationsWrapper>
+  );
+};
+
+export default memo(NotificationsContainer);

package/admin/src/containers/NewNotification/reducer.js

@@ -0,0 +1,49 @@
+import produce from 'immer';
+import { get } from 'lodash';
+import { SHOW_NEW_NOTIFICATION, HIDE_NEW_NOTIFICATION } from './constants';
+
+const initialState = {
+  notifId: 0,
+  notifications: [],
+};
+
+const notificationReducer = (state = initialState, action) =>
+  // eslint-disable-next-line consistent-return
+  produce(state, draftState => {
+    switch (action.type) {
+      case SHOW_NEW_NOTIFICATION: {
+        draftState.notifications.push({
+          // No action.config spread to limit the notification API and avoid customization
+          id: state.notifId,
+          type: get(action, ['config', 'type'], 'success'),
+          message: get(action, ['config', 'message'], {
+            id: 'notification.success.saved',
+            defaultMessage: 'Saved',
+          }),
+          title: get(action, ['config', 'title'], null),
+          link: get(action, ['config', 'link'], null),
+          timeout: get(action, ['config', 'timeout'], 2500),
+          blockTransition: get(action, ['config', 'blockTransition'], false),
+          uid: get(action, ['config', 'uid'], null),
+          onClose: get(action, ['config', 'onClose'], null),
+          centered: get(action, ['config', 'centered'], false),
+        });
+        draftState.notifId = state.notifId + 1;
+        break;
+      }
+      case HIDE_NEW_NOTIFICATION: {
+        const indexToRemove = state.notifications.findIndex(notif => notif.id === action.id);
+
+        if (indexToRemove !== -1) {
+          draftState.notifications.splice(indexToRemove, 1);
+        }
+        break;
+      }
+
+      default: {
+        return draftState;
+      }
+    }
+  });
+
+export default notificationReducer;

package/admin/src/containers/NotFoundPage/index.js

@@ -0,0 +1,24 @@
+/**
+ * NotFoundPage
+ *
+ * This is the page we show when the user visits a url that doesn't have a route
+ *
+ * NOTE: while this component should technically be a stateless functional
+ * component (SFC), hot reloading does not currently support SFCs. If hot
+ * reloading is not a necessity for you then you can refactor it and remove
+ * the linting exception.
+ */
+
+import React from 'react';
+import PropTypes from 'prop-types';
+import { NotFound } from 'strapi-helper-plugin';
+
+const NotFoundPage = props => <NotFound {...props} />;
+
+NotFoundPage.propTypes = {
+  history: PropTypes.shape({
+    goBack: PropTypes.func.isRequired,
+  }).isRequired,
+};
+
+export default NotFoundPage;

package/admin/src/containers/NotificationProvider/actions.js

@@ -0,0 +1,37 @@
+/*
+ *
+ * NotificationProvider actions
+ *
+ */
+
+/* eslint-disable import/no-cycle */
+import { dispatch } from '../../app';
+
+import { SHOW_NOTIFICATION, HIDE_NOTIFICATION } from './constants';
+
+let nextNotificationId = 0;
+
+export function showNotification(message, status) {
+  nextNotificationId++; // eslint-disable-line no-plusplus
+
+  // Start timeout to hide the notification
+  (id => {
+    setTimeout(() => {
+      dispatch(hideNotification(id));
+    }, 2500);
+  })(nextNotificationId);
+
+  return {
+    type: SHOW_NOTIFICATION,
+    message,
+    status,
+    id: nextNotificationId,
+  };
+}
+
+export function hideNotification(id) {
+  return {
+    type: HIDE_NOTIFICATION,
+    id,
+  };
+}

package/admin/src/containers/NotificationProvider/constants.js

@@ -0,0 +1,8 @@
+/*
+ *
+ * NotificationProvider constants
+ *
+ */
+
+export const SHOW_NOTIFICATION = 'app/NotificationProvider/SHOW_NOTIFICATION';
+export const HIDE_NOTIFICATION = 'app/NotificationProvider/HIDE_NOTIFICATION';

package/admin/src/containers/NotificationProvider/index.js

@@ -0,0 +1,45 @@
+/*
+ *
+ * NotificationProvider
+ *
+ */
+
+/* eslint-disable */
+import React from 'react';
+import PropTypes from 'prop-types';
+import { connect } from 'react-redux';
+import { createStructuredSelector } from 'reselect';
+import { NotificationsContainer } from '../../components/Notifications';
+import { selectNotifications } from './selectors';
+import { hideNotification } from './actions';
+
+export class NotificationProvider extends React.Component {
+  render() {
+    return (
+      <NotificationsContainer
+        onHideNotification={this.props.onHideNotification}
+        notifications={this.props.notifications}
+      />
+    );
+  }
+}
+
+NotificationProvider.propTypes = {
+  notifications: PropTypes.object.isRequired,
+  onHideNotification: PropTypes.func.isRequired,
+};
+
+const mapStateToProps = createStructuredSelector({
+  notifications: selectNotifications(),
+});
+
+function mapDispatchToProps(dispatch) {
+  return {
+    onHideNotification: id => {
+      dispatch(hideNotification(id));
+    },
+    dispatch,
+  };
+}
+
+export default connect(mapStateToProps, mapDispatchToProps)(NotificationProvider);

package/admin/src/containers/NotificationProvider/reducer.js

@@ -0,0 +1,48 @@
+/*
+ *
+ * NotificationProvider reducer
+ *
+ */
+
+import { fromJS } from 'immutable';
+import { SHOW_NOTIFICATION, HIDE_NOTIFICATION } from './constants';
+
+const initialState = fromJS({
+  notifications: [],
+});
+
+function notificationProviderReducer(state = initialState, action) {
+  // Init variable
+  let index;
+
+  switch (action.type) {
+    case SHOW_NOTIFICATION:
+      return state.set(
+        'notifications',
+        state.get('notifications').push({
+          message: action.message || 'app.utils.defaultMessage',
+          status: action.status || 'success',
+          id: action.id,
+        })
+      );
+    case HIDE_NOTIFICATION:
+      // Check that the index exists
+      state.get('notifications').forEach((notification, i) => {
+        if (notification.id === action.id) {
+          index = i;
+        }
+      });
+
+      if (typeof index !== 'undefined') {
+        // Remove the notification
+        return state.set('notifications', state.get('notifications').splice(index, 1));
+      }
+
+      // Notification not found, return the current state
+      return state;
+    default:
+      return state;
+  }
+}
+
+export default notificationProviderReducer;

package/admin/src/containers/NotificationProvider/selectors.js

@@ -0,0 +1,27 @@
+import { createSelector } from 'reselect';
+
+/**
+ * Direct selector to the notificationProvider state domain
+ */
+const selectNotificationProviderDomain = () => state => state.get('notification');
+
+/**
+ * Other specific selectors
+ */
+
+/**
+ * Default selector used by NotificationProvider
+ */
+
+const selectNotificationProvider = () =>
+  createSelector(selectNotificationProviderDomain(), notificationProviderState =>
+    notificationProviderState.toJS()
+  );
+
+const selectNotifications = () =>
+  createSelector(selectNotificationProviderDomain(), notificationProviderState =>
+    notificationProviderState.get('notifications')
+  );
+
+export default selectNotificationProvider;
+export { selectNotificationProviderDomain, selectNotifications };

package/admin/src/containers/Onboarding/Li.js

@@ -0,0 +1,150 @@
+import styled from 'styled-components';
+
+const Li = styled.li`
+  display: block;
+  padding: 8px 20px;
+  cursor: pointer;
+  margin-top: 0;
+
+  &:hover {
+    background-color: #f7f8f8;
+    .title {
+      color: #0e7de7;
+    }
+  }
+  .txtWrapper,
+  .thumbWrapper {
+    display: inline-block;
+    vertical-align: middle;
+  }
+  .thumbWrapper {
+    position: relative;
+    width: 55px;
+    height: 38px;
+    background-color: #d8d8d8;
+    border-radius: 2px;
+    overflow: hidden;
+    .overlay {
+      position: absolute;
+      top: 0;
+      left: 0;
+      z-index: 1;
+      width: 100%;
+      height: 100%;
+      background-color: rgba(#0e7de7, 0.8);
+    }
+    img {
+      position: relative;
+      z-index: 0;
+      width: 100%;
+      height: 100%;
+    }
+    .play {
+      position: absolute;
+      top: calc(50% - 10px);
+      left: calc(50% - 10px);
+      width: 20px;
+      height: 20px;
+      background-color: #0e7de7;
+      border: 1px solid white;
+      text-align: center;
+      line-height: 20px;
+      border-radius: 50%;
+      z-index: 2;
+      &::before {
+        content: '\f04b';
+        display: inline-block;
+        vertical-align: top;
+        height: 100%;
+        font-family: 'FontAwesome';
+        color: white;
+        font-size: 10px;
+        margin-left: 3px;
+        line-height: 18px;
+      }
+    }
+  }
+  &.finished {
+    .title {
+      color: #919bae;
+    }
+    .thumbWrapper {
+      .overlay {
+        background-color: transparent;
+      }
+      img {
+        opacity: 0.6;
+      }
+      .play {
+        background-color: #5a9e06;
+        border-color: #5a9e06;
+        &::before {
+          content: '\f00c';
+          margin-left: 0;
+          font-size: 11px;
+          line-height: 20px;
+        }
+      }
+    }
+  }
+
+  .txtWrapper {
+    padding: 0 15px;
+    p {
+      font-size: 14px;
+      line-height: 26px;
+      font-family: Lato;
+      font-weight: 600;
+    }
+    .time {
+      color: #919bae;
+      font-family: Lato;
+      font-weight: bold;
+      font-size: 11px;
+      line-height: 11px;
+    }
+  }
+
+  .hiddenPlayerWrapper {
+    display: none;
+  }
+
+  .videoModal {
+    margin-right: auto !important;
+    margin-left: auto !important;
+    .videoModalHeader {
+      padding-bottom: 0;
+      border-bottom: 0;
+      > h5 {
+        font-family: Lato;
+        font-weight: bold !important;
+        font-size: 1.8rem !important;
+        line-height: 3.1rem;
+        color: #333740;
+      }
+      > button {
+        display: flex;
+        position: absolute;
+        right: 0;
+        top: 0;
+        margin-top: 0;
+        margin-right: 0;
+        padding: 10px;
+        cursor: pointer;
+        span {
+          line-height: 0.6em;
+        }
+      }
+    }
+    .videoPlayer {
+      > button {
+        top: 50%;
+        margin-top: -0.75em;
+        left: 50%;
+        margin-left: -1.5em;
+      }
+    }
+  }
+`;
+
+export default Li;

package/admin/src/containers/Onboarding/StaticLinks/StyledLink.js

@@ -0,0 +1,23 @@
+import styled from 'styled-components';
+
+const StyledLink = styled.a`
+  display: flex;
+  width: 100%;
+  height: 27px;
+  padding: 0 20px;
+  color: #919bae;
+  span,
+  svg {
+    margin: auto 0;
+  }
+  svg {
+    margin-right: 10px;
+  }
+  &:hover {
+    background-color: #f7f8f8;
+    text-decoration: none;
+    color: #919bae;
+  }
+`;
+
+export default StyledLink;

package/admin/src/containers/Onboarding/StaticLinks/index.js

@@ -0,0 +1,45 @@
+/**
+ *
+ * StaticLinks
+ *
+ */
+
+import React from 'react';
+import { useIntl } from 'react-intl';
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
+import StyledLink from './StyledLink';
+
+function StaticLinks() {
+  const { formatMessage } = useIntl();
+  const staticLinks = [
+    {
+      icon: 'book',
+      label: formatMessage({ id: 'app.components.LeftMenuFooter.documentation' }),
+      destination: 'https://strapi.akemona.com/documentation',
+    },
+    {
+      icon: 'file',
+      label: formatMessage({ id: 'app.static.links.cheatsheet' }),
+      destination: 'https://strapi-showcase.s3-us-west-2.amazonaws.com/CheatSheet.pdf',
+    }
+  ];
+
+  return (
+    <ul className="list">
+      {staticLinks.map(link => {
+        const { icon, label, destination } = link;
+
+        return (
+          <li key={label}>
+            <StyledLink href={destination} target="_blank" rel="noopener noreferrer">
+              <FontAwesomeIcon icon={icon} />
+              <span>{label}</span>
+            </StyledLink>
+          </li>
+        );
+      })}
+    </ul>
+  );
+}
+
+export default StaticLinks;

package/admin/src/containers/Onboarding/Video.js

@@ -0,0 +1,180 @@
+/**
+ *
+ * OnboardingList
+ *
+ */
+
+import React from 'react';
+import PropTypes from 'prop-types';
+import cn from 'classnames';
+import { isNaN } from 'lodash';
+
+import { Modal, ModalHeader, ModalBody } from 'reactstrap';
+import { Player } from 'video-react';
+import 'video-react/dist/video-react.css';
+import Li from './Li';
+
+/* eslint-disable */
+
+class OnboardingVideo extends React.Component {
+  componentDidMount() {
+    if (this.hiddenPlayer.current) {
+      this.hiddenPlayer.current.subscribeToStateChange(this.handleChangeState);
+    }
+  }
+
+  hiddenPlayer = React.createRef();
+
+  player = React.createRef();
+
+  handleChangeState = (state, prevState) => {
+    const { duration } = state;
+    const { id } = this.props;
+
+    if (duration !== prevState.duration && !isNaN(duration)) {
+      this.props.setVideoDuration(id, duration);
+    }
+  };
+
+  handleChangeIsPlayingState = (state, prevState) => {
+    const { isActive } = state;
+    const { id } = this.props;
+
+    if (isActive !== prevState.isActive && isActive) {
+      this.props.didPlayVideo(id, this.props.video.startTime);
+    }
+  };
+
+  handleCurrentTimeChange = curr => {
+    this.props.getVideoCurrentTime(this.props.id, curr, this.props.video.duration);
+  };
+
+  handleModalOpen = () => {
+    this.player.current.subscribeToStateChange(this.handleChangeIsPlayingState);
+
+    this.player.current.play();
+
+    if (this.props.video.startTime === 0) {
+      const { player } = this.player.current.getState();
+      player.isActive = true;
+
+      this.props.didPlayVideo(this.props.id, this.props.video.startTime);
+    } else {
+      this.player.current.pause();
+    }
+  };
+
+  handleVideoPause = () => {
+    const { player } = this.player.current.getState();
+    const currTime = player.currentTime;
+
+    this.handleCurrentTimeChange(currTime);
+    this.props.didStopVideo(this.props.id, currTime);
+  };
+
+  handleModalClose = () => {
+    const { player } = this.player.current.getState();
+    const paused = player.paused;
+
+    if (!paused) {
+      this.handleVideoPause();
+    }
+  };
+
+  getVideoTime = (duration, sign) => {
+    const operator = Math.floor(eval(duration + sign + 60));
+
+    if (operator < 10) {
+      return `0${operator}`;
+    }
+    return operator;
+  };
+
+  render() {
+    const { video } = this.props;
+    const time = isNaN(video.duration)
+      ? '\xA0'
+      : `${Math.floor(video.duration / 60)}:${this.getVideoTime(video.duration, '%')}`;
+
+    return (
+      <Li
+        key={this.props.id}
+        onClick={this.props.onClick}
+        id={this.props.id}
+        className={cn(video.end && 'finished')}
+      >
+        <div className="thumbWrapper">
+          <img src={video.preview} alt="preview" />
+          <div className="overlay" />
+          <div className="play" />
+        </div>
+        <div className="txtWrapper">
+          <p className="title">{video.title}</p>
+          <p className="time">{time}</p>
+        </div>
+
+        <Modal
+          isOpen={video.isOpen}
+          toggle={this.props.onClick} // eslint-disable-line react/jsx-handler-names
+          className="videoModal"
+          onOpened={this.handleModalOpen}
+          onClosed={this.handleModalClose}
+        >
+          <ModalHeader
+            toggle={this.props.onClick} // eslint-disable-line react/jsx-handler-names
+            className="videoModalHeader"
+          >
+            {video.title}
+          </ModalHeader>
+          <ModalBody className="modalBodyHelper">
+            <div>
+              <Player
+                ref={this.player}
+                className="videoPlayer"
+                src={video.video}
+                startTime={video.startTime}
+                preload="auto"
+                onPause={this.handleVideoPause}
+                onplay={this.videoStart}
+                subscribeToStateChange={this.subscribeToStateChange}
+              />
+            </div>
+          </ModalBody>
+        </Modal>
+
+        {!this.props.video.duration && (
+          <div className="hiddenPlayerWrapper">
+            <Player
+              ref={this.hiddenPlayer}
+              src={video.video}
+              preload="auto"
+              subscribeToStateChange={this.subscribeToStateChange}
+            />
+          </div>
+        )}
+      </Li>
+    );
+  }
+}
+
+OnboardingVideo.defaultProps = {
+  didPlayVideo: () => {},
+  didStopVideo: () => {},
+  getVideoCurrentTime: () => {},
+  id: 0,
+  onClick: () => {},
+  setVideoDuration: () => {},
+  video: {},
+};
+
+OnboardingVideo.propTypes = {
+  didPlayVideo: PropTypes.func,
+  didStopVideo: PropTypes.func,
+  getVideoCurrentTime: PropTypes.func,
+  id: PropTypes.number,
+  onClick: PropTypes.func,
+  setVideoDuration: PropTypes.func,
+  video: PropTypes.object,
+};
+
+export default OnboardingVideo;