@imposium-hub/components 2.9.0-12 → 2.9.0-14

package/src/Util.ts

@@ -53,7 +53,13 @@ export const checkStoryId = (storyId: string, orgId: string, access: any): any =
 
 export const getLastModifiedStoryInOrg = (orgId: string, access: any): string => {
     const activeOrg: any = getActiveOrg(orgId, access);
+
+    if (activeOrg.stories.length === 0) {
+        return null;
+    }
+
     const sortByLastModified = activeOrg.stories.sort((a, b) => b.date_modified - a.date_modified);
+
     if (sortByLastModified[0]) {
         return sortByLastModified[0].id;
     } else {
@@ -87,6 +93,9 @@ export const parameterizeServiceUrl = (
             case 6:
             case 8:
                 return `${url}/${activeOrg}/${activeStory}`;
+            case 11:
+            case 12:
+                return `${url}`;
             default:
                 return `${url}/${activeOrg}`;
         }

package/src/components/app-wrapper/AppWrapper.tsx

@@ -8,8 +8,6 @@ import { replaceRoute } from '../../utils/routing';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import { faExclamationTriangle } from '@fortawesome/pro-light-svg-icons';
 import { initPendo } from '../../utils/pendo';
-import { EditGuideModal } from '../edit-guide-modal/EditGuideModal';
-import { ReplaceFilesModal } from '../replace-files-modal/ReplaceFilesModal';
 
 export interface IAppWrapperProps {
     appLabel: string;
@@ -287,8 +285,6 @@ export const AppWrapper: React.FC<IAppWrapperProps> = (props) => {
             />
             {innerContent}
             <ConfirmModal />
-            <EditGuideModal />
-            <ReplaceFilesModal />
         </div>
     );
 };

package/src/components/header/Header.tsx

@@ -211,6 +211,7 @@ class ImposiumHeader extends React.PureComponent<IHeaderProps, IHeaderState> {
                                 api.cacheActiveStory(activeServiceId, orgId, storyId);
                             } else {
                                 pushRoute(`/${orgId}`);
+                                api.cacheActiveStory(activeServiceId, orgId);
                             }
                         })
                         .catch((e) => {

package/src/index.ts

@@ -161,8 +161,7 @@ import StoryTableNameFilter from './components/assets/StoryTableNameFilter';
 import { AppWrapper } from './components/app-wrapper/AppWrapper';
 import { pushRoute, replaceRoute } from './utils/routing';
 import { ProjectDropdown } from './components/header/ProjectDropdown';
-import { EditGuideModal, IEditGuideModalProps } from './components/edit-guide-modal/EditGuideModal';
-import { openConfirmModal, openReplaceFilesModal } from './utils/modal';
+import { openConfirmModal } from './utils/modal';
 import { ConfirmModal, IConfirmModalProps } from './components/confirm-modal/ConfirmModal';
 
 export {
@@ -260,7 +259,6 @@ export {
     updateAssetData,
     doAssetTableHydration,
     uploadAssets,
-    openReplaceFilesModal,
     replaceAsset,
     selectAsset,
     deselectAsset,
@@ -323,7 +321,5 @@ export {
     CopyPropIdButton,
     ConfirmModal,
     IConfirmModalProps,
-    EditGuideModal,
-    IEditGuideModalProps,
     openConfirmModal
 };

package/src/redux/actions/publish.ts

@@ -45,7 +45,7 @@ export const getStoryPublishStatus = (api: IImposiumAPI, storyId: string): any =
                 })
                 .catch((e) => {
                     // 404 = no published version = using working copy
-                    if (e?.response?.status !== 404) {
+                    if (e?.response?.status !== 404 && e.error !== 'missing_refresh_token') {
                         console.error(e);
                         reject(copy.header.publishPollError);
                     }

package/src/services/API.ts

@@ -146,7 +146,7 @@ export interface IImposiumAPI {
     getAssetMap(storyId: string);
     clearStoryCache(storyId: string);
     debugId(id: string);
-    cacheActiveStory(serviceId: any, orgId: string, storyId: string);
+    cacheActiveStory(serviceId: any, orgId: string, storyId?: string);
     getCachedStoryForOrg(serviceId: string, orgId: string);
     getAccessData(includeTotalRenders?: boolean, orgId?: string);
     deleteExperience(experienceId: string, eraseMedia?: boolean);
@@ -1655,16 +1655,21 @@ export default class API {
         });
     };
 
-    public cacheActiveStory = (serviceId, orgId, storyId): Promise<any | Error> => {
+    public cacheActiveStory = (serviceId, orgId, storyId?): Promise<any | Error> => {
         const route = `/service/${serviceId}/${orgId}/active`;
 
+        const data: any = {
+            organization_id: orgId
+        };
+
+        if (storyId) {
+            data['story_id'] = storyId;
+        }
+
         return this.doRequest({
             method: 'POST',
             url: route,
-            data: {
-                story_id: storyId,
-                organization_id: orgId
-            }
+            data
         });
     };
 

package/src/utils/modal.ts

@@ -1,7 +1,5 @@
 import { IConfirmModalProps } from '../components/confirm-modal/ConfirmModal';
-import { IReplaceFilesModalProps } from '../components/replace-files-modal/ReplaceFilesModal';
 
-export const replaceFilesModalEvent = 'openreplacefilesmodal';
 export const confirmModalEvent = 'openconfirmmodal';
 
 export const openConfirmModal = (detail: IConfirmModalProps) => {
@@ -11,11 +9,3 @@ export const openConfirmModal = (detail: IConfirmModalProps) => {
 
     window.dispatchEvent(event);
 };
-
-export const openReplaceFilesModal = (detail: IReplaceFilesModalProps) => {
-    const event = new CustomEvent(replaceFilesModalEvent, {
-        detail
-    });
-
-    window.dispatchEvent(event);
-};

package/src/components/edit-guide-modal/EditGuideModal.tsx

@@ -1,110 +0,0 @@
-import React, { useCallback, useEffect, useState } from 'react';
-import ReactDOM from 'react-dom';
-import Modal from '../modal/Modal';
-import Button from '../button/Button';
-import Section from '../section/Section';
-import NumberField from '../number-field/NumberField';
-
-export interface IEditGuideModalProps {
-    guide: number;
-    onClose: () => any;
-    onContinue: (e) => any;
-    isHorizontal: boolean;
-}
-
-export const EditGuideModal = () => {
-    const [props, setProps] = useState<IEditGuideModalProps>(null);
-    const [isOpen, setIsOpen] = useState<boolean>(false);
-    const [guide, setGuide] = useState<number>(null);
-
-    const onOpen = (event) => {
-        setProps({
-            ...event.detail
-        });
-        setIsOpen(true);
-    };
-
-    const onClose = () => setIsOpen(false);
-
-    useEffect(() => {
-        window.addEventListener('openeditguidemodal', onOpen);
-        return () => {
-            window.removeEventListener('openeditguidemodal', onOpen);
-        };
-    }, []);
-
-    useEffect(() => {
-        if (props?.guide) {
-            setGuide(props.guide);
-        }
-    }, [props?.guide]);
-
-    const onKeyDown = (e) => {
-        if (e.key === 'Enter') {
-            e.preventDefault();
-            onContinue(guide);
-        }
-    };
-
-    useEffect(() => {
-        if (isOpen) {
-            window.addEventListener('keypress', onKeyDown);
-        } else {
-            window.removeEventListener('keypress', onKeyDown);
-        }
-        return () => {
-            window.removeEventListener('keypress', onKeyDown);
-        };
-    }, [isOpen, onKeyDown]);
-
-    const onContinue = useCallback(
-        (e) => {
-            if (e) {
-                props.onContinue(e);
-                onClose();
-            }
-        },
-        [isOpen]
-    );
-
-    const modal = isOpen && (
-        <Modal
-            onRequestClose={onClose}
-            style={{
-                width: '200px',
-                height: '110px',
-                top: '25%',
-                left: '55%'
-            }}
-            isOpen={true}>
-            <Section
-                title={`Edit ${props.isHorizontal ? 'Horizontal Guide' : 'Vertical Guide'}`}
-                style={{ padding: '10px' }}>
-                <NumberField
-                    label={'Guide Position'}
-                    labelPosition='top'
-                    onChange={(e) => setGuide(Number(e))}
-                    focusOnMount={true}
-                    value={guide}
-                />
-                <Button
-                    onClick={onClose}
-                    style='bold'
-                    color='secondary'>
-                    Cancel
-                </Button>
-                <Button
-                    onClick={() => onContinue(guide)}
-                    style='bold'
-                    color='primary'>
-                    Ok
-                </Button>
-            </Section>
-        </Modal>
-    );
-
-    const PortalContextComponent = () =>
-        ReactDOM.createPortal(modal, document.querySelector('#react-root'));
-
-    return <PortalContextComponent />;
-};

package/src/components/replace-files-modal/ReplaceFilesModal.tsx

@@ -1,217 +0,0 @@
-import React, { useCallback, useEffect, useRef, useState } from 'react';
-import ReactDOM from 'react-dom';
-import Modal from '../modal/Modal';
-import Button from '../button/Button';
-import CheckboxField from '../checkbox-field/CheckboxField';
-import Section from '../section/Section';
-import { assets as copy } from '../../constants/copy';
-import { replaceFilesModalEvent } from '../../utils/modal';
-
-export interface IReplaceFilesModalProps {
-    onUpload: (f) => any;
-    onInstantUpload: (f) => any;
-    onApplyToAll: (e) => any;
-    onClose: () => void;
-    applyToAll: boolean;
-    existedAssets: any[];
-    existedAssetIds: any[];
-}
-
-export const ReplaceFilesModal = () => {
-    const [props, setProps] = useState<IReplaceFilesModalProps>(null);
-    const [isOpen, setIsOpen] = useState<boolean>(false);
-    const [applyToAll, setApplyToAll] = useState<boolean>();
-    const [height, setHeight] = useState(200);
-    const [index, setIndex] = useState<number>(0);
-
-    const replaceFileModalRef = useRef(null);
-
-    useEffect(() => {
-        if (replaceFileModalRef.current) {
-            const {
-                current: { clientHeight }
-            } = replaceFileModalRef;
-            setHeight(clientHeight + 40);
-        }
-    });
-
-    const onOpen = (event) => {
-        setProps({
-            ...event.detail
-        });
-        setIsOpen(true);
-    };
-
-    const onClose = () => {
-        props.onClose();
-        setIsOpen(false);
-    };
-
-    const onReplaceHandler = (curApplyToAll, curIndex, file, assetId) => {
-        const newIndex = curIndex + 1;
-
-        if (curApplyToAll && curIndex === 0) {
-            const updatedAssets = props.existedAssets.map((asset, i) => {
-                const updatefile = asset;
-                updatefile['assetId'] = props.existedAssetIds[i];
-                return updatefile;
-            });
-
-            props.onInstantUpload(updatedAssets);
-            setIndex(0);
-            setIsOpen(false);
-        } else if (curApplyToAll) {
-            const updatedAssets = [];
-
-            for (let i = 0; i < props.existedAssets.length; i++) {
-                const updateFile =
-                    curIndex === 0
-                        ? props.existedAssets[i]
-                        : [
-                              ...props.existedAssets.slice(0, curIndex - 1),
-                              ...props.existedAssets.slice(curIndex)
-                          ][i];
-
-                if (updateFile) {
-                    updateFile['assetId'] =
-                        curIndex === 0
-                            ? props.existedAssetIds[i]
-                            : [
-                                  ...props.existedAssetIds.slice(0, curIndex - 1),
-                                  ...props.existedAssetIds.slice(curIndex)
-                              ][i];
-                    updatedAssets.push(updateFile);
-                    props.onInstantUpload(updatedAssets);
-                    setIndex(0);
-                    onClose();
-                }
-            }
-        } else {
-            if (newIndex === props.existedAssets.length) {
-                setIndex(0);
-                onClose();
-            } else {
-                setIndex(newIndex);
-            }
-
-            const updateFile = file;
-            updateFile['assetId'] = assetId;
-            props.onUpload([updateFile]);
-        }
-    };
-
-    const onAsNewHandler = (curApplyToAll, curIndex, file) => {
-        const newIndex = curIndex + 1;
-
-        if (curApplyToAll) {
-            props.onUpload(
-                curIndex === 0 ? props.existedAssets : props.existedAssets.slice(curIndex)
-            );
-
-            setIndex(0);
-            onClose();
-        } else {
-            if (newIndex === props.existedAssets.length) {
-                setIndex(0);
-                onClose();
-            } else {
-                setIndex(newIndex);
-            }
-
-            props.onUpload([file]);
-        }
-    };
-
-    const onApplyToAllHandler = (e) => {
-        setApplyToAll(e);
-        props.onApplyToAll(e);
-    };
-
-    const onReplace = useCallback(
-        (curApplyToAll, curIndex, file, assetId) =>
-            onReplaceHandler(curApplyToAll, curIndex, file, assetId),
-        [isOpen]
-    );
-
-    const onApplyToAll = useCallback((e) => onApplyToAllHandler(e), [isOpen]);
-
-    const onAsNew = useCallback(
-        (curApplyToAll, curIndex, file) => onAsNewHandler(curApplyToAll, curIndex, file),
-        [isOpen]
-    );
-
-    useEffect(() => {
-        window.addEventListener(replaceFilesModalEvent, onOpen);
-        return () => {
-            window.removeEventListener(replaceFilesModalEvent, onOpen);
-        };
-    }, []);
-
-    const modal = () => {
-        if (isOpen) {
-            const file = props.existedAssets[index];
-            const assetId = props.existedAssetIds[index];
-            const name = file.name.slice(0, file.name.lastIndexOf('.'));
-            return (
-                <Modal
-                    onRequestClose={onClose}
-                    wrapperStyle={{
-                        left: '0px',
-                        width: '100%'
-                    }}
-                    style={{
-                        width: '400px',
-                        height: `${height}px`,
-                        top: 'calc(50% - 150px)',
-                        left: 'calc((100% - 400px) / 2)'
-                    }}
-                    isOpen={true}>
-                    <Section>
-                        <div
-                            className='replace-files-modal'
-                            ref={replaceFileModalRef}>
-                            <p>{copy.uploads.title.replace('[name]', name)}</p>
-                            <div className='replace-files-buttons'>
-                                <div className='checkbox'>
-                                    <CheckboxField
-                                        label={copy.uploads.applyAll}
-                                        value={applyToAll}
-                                        onChange={onApplyToAll}
-                                    />
-                                </div>
-                                <div className='buttons'>
-                                    <Button
-                                        onClick={() => onAsNew(applyToAll, index, file)}
-                                        size='large'
-                                        style='bold'
-                                        color='primary'>
-                                        {copy.uploads.keepBoth}
-                                    </Button>
-                                    <Button
-                                        onClick={() => onReplace(applyToAll, index, file, assetId)}
-                                        size='large'
-                                        style='bold'
-                                        color='primary'>
-                                        {copy.uploads.replace}
-                                    </Button>
-                                    <Button
-                                        onClick={onClose}
-                                        size='large'
-                                        style='bold'
-                                        color='default'>
-                                        {copy.uploads.cancelButton}
-                                    </Button>
-                                </div>
-                            </div>
-                        </div>
-                    </Section>
-                </Modal>
-            );
-        }
-    };
-
-    const PortalContextComponent = () =>
-        ReactDOM.createPortal(modal(), document.querySelector('#react-root'));
-
-    return <PortalContextComponent />;
-};