Remove History API (#7)

* Change tutorial wordings

* Temp remove history

* Change state for present button

* Used parsed frames from function

.vscode/settings.json

@@ -13,6 +13,7 @@
         "**/artifacts": true,
         "**/dist": true,
         "**/storybook-static": true,
+        "**/coverage": true,
         "**/logs": true,
         "**/out": true,
         "**/obj": true,
@@ -24,6 +25,7 @@
         "**/*.user": true,
         "**/*.xproj": true,
         "**/*.gitattributes": true,
+        "**/*.storybook": true,
         ".vs:": true,
         ".vscode:": true
     }

package.json

@@ -1,6 +1,6 @@
 {
   "name": "codeslide.net",
-  "version": "0.3.7",
+  "version": "0.4.0",
   "private": true,
   "dependencies": {
     "@ant-design/icons": "^4.8.1",

src/App.tsx

@@ -7,11 +7,9 @@
 */
 
 import { ConfigProvider, Layout, Tour, TourProps } from 'antd';
-import * as React from 'react';
-import { useRouteMatch } from 'react-router';
 import { ClipboardContainer } from '@app/core';
 import { EditorView, ShapeView, PagesView, HeaderView, AnimationView, ToolView } from '@app/wireframes/components';
-import { getSelection, loadDiagramFromServer, newDiagram, setIsTourOpen, useStore } from '@app/wireframes/model';
+import { getSelection, newDiagram, setIsTourInit, setIsTourOpen, useStore } from '@app/wireframes/model';
 import { vogues } from './const';
 import { CustomDragLayer } from './wireframes/components/CustomDragLayer';
 import { OverlayContainer } from './wireframes/contexts/OverlayContext';
@@ -20,24 +18,17 @@ import { useAppDispatch } from './store';
 
 export const App = () => {
     const dispatch = useAppDispatch();
-    const route = useRouteMatch<{ token?: string }>();
-    const routeToken = route.params.token || null;
-    const routeTokenSnapshot = React.useRef(routeToken);
     const selectedSet = useStore(getSelection);
     const sidebarWidth = useStore(s => s.ui.sidebarSize);
     const footerHeight = useStore(s => s.ui.footerSize);
     const applicationMode = useStore(s => s.ui.selectedMode);
     const isTourOpen = useStore(s => s.ui.isTourOpen);
+    const isTourInit = useStore(s => s.ui.isTourInit);
     const tourRefs = Array(7).fill(0).map(() => useRef(null));
 
     useEffect(() => {
-        const token = routeTokenSnapshot.current;
-
-        if (token && token.length > 0) {
-            dispatch(loadDiagramFromServer({ tokenToRead: token, navigate: false }));
-        } else {
-            dispatch(newDiagram(false));
-        }
+        dispatch(newDiagram(false));
+        dispatch(setIsTourInit(false));
     }, [dispatch]);
 
     const margin = {
@@ -50,42 +41,51 @@ export const App = () => {
 
     const walkthroughTour: TourProps['steps'] = [
         {
-            title: 'Step 1: Starting Your Project',
-            description: 'Start a fresh project, open an existing one, or save your work to your local machine. The documentation for coding syntax is also here.',
+            title: 'Get started with a presentation',
+            description: 'Start a fresh presentation, open an existing one, or save your presentation to your local machine. You can also click here to see the documentation for coding syntax.',
             target: () => tourRefs[0].current,
         },
         {
-            title: 'Step 2: Designing Your Presentation',
-            description: 'Use the canvas to layout and customize your presentation\'s structure.',
+            title: 'Design Your Presentation',
+            description: 'Use the canvas to layout and customize your presentation\'s structure. Canvas is where you can add shapes, text, and images.',
             target: () => tourRefs[1].current,
         },
         {
-            title: 'Step 3: Adding Shapes',
+            title: 'Add Shapes',
             description: 'Add visual elements to your canvas by clicking on any shape.',
             target: () => tourRefs[2].current,
         },
         {
-            title: 'Step 4: Modifying Appearance',
-            description: 'Edit your objects\'s appearance, including color, font size, stroke, and more, to match your vision.',
+            title: 'Modify Appearance',
+            description: 'Edit your objects\'s appearance such as color, font size, and stroke.',
             target: () => tourRefs[3].current,
         },
         {
-            title: 'Step 5: Writing Code',
+            title: 'Write Code',
             description: 'Switch to coding mode to set object\'s occurrences. If you\'re stuck on syntax, the documentation is under the button at the top left corner.',
             target: () => tourRefs[4].current,
         },
         {
-            title: 'Step 6: Managing Pages',
+            title: 'Manage Pages',
             description: 'Add new pages and continue unfolding your presentation.',
             target: () => tourRefs[5].current,
         },
         {
-            title: 'Step 7: Launching Your Presentation',
-            description: 'Start your presentation. If you need to make changes, you can always come back and edit.',
+            title: 'Launch Your Presentation',
+            description: 'Start your presentation. If you need to make changes, you can always come back and edit. Enjoy!',
             target: () => tourRefs[6].current,
         },
     ];
 
+    const firstTour: TourProps['steps'] = [
+        {
+            title: 'Welcome to CodeSlide',
+            description: 'CodeSlide is a tool for creating presentations with code. You can create slides with shapes, text, and images, and animate them with code. Let\'s get started!',
+            target: null,
+        },
+        ...walkthroughTour
+    ];
+
     return (
         <ConfigProvider
             theme={{
@@ -152,7 +152,7 @@ export const App = () => {
                     <Tour
                         open={isTourOpen}
                         onClose={() => dispatch(setIsTourOpen(false))}
-                        steps={walkthroughTour}
+                        steps={isTourInit ? firstTour : walkthroughTour}
                     />
                     <CustomDragLayer />
                 </ClipboardContainer>

src/const/texts.ts

@@ -105,7 +105,7 @@ export const texts = {
         ungroupTooltip: 'Ungroup Items',
         unsaved: 'unsaved',
         visual: 'Visual',
-        walkthrough: 'Walkthrough',
+        walkthrough: 'Tutorial',
         width: 'Width',
         zoomIn: 'Zoom In',
         zoomOut: 'Zoom Out',

src/index.tsx

@@ -12,18 +12,15 @@ import { DndProvider } from 'react-dnd';
 import { HTML5Backend } from 'react-dnd-html5-backend';
 import * as ReactDOM from 'react-dom';
 import { Provider } from 'react-redux';
-import { Route, Router } from 'react-router';
 import { App } from './App';
 import { registerServiceWorker } from './registerServiceWorker';
 import './index.scss';
-import { history, store } from './store';
+import { store } from './store';
 
 const Root = (
     <DndProvider backend={HTML5Backend}>
         <Provider store={store}>
-            <Router history={history}>
-                <Route path='/:token?' component={App} />
-            </Router>
+            <App />
         </Provider>
     </DndProvider>
 );

src/store.ts

@@ -7,7 +7,6 @@
 */
 
 import { configureStore } from '@reduxjs/toolkit';
-import { createBrowserHistory } from 'history';
 import { TypedUseSelectorHook, useDispatch, useSelector } from 'react-redux';
 import { assets, buildAlignment, buildAppearance, buildDiagrams, buildGrouping, buildItems, buildOrdering, createClassReducer, loading, loadingMiddleware, mergeAction, rootLoading, selectDiagram, selectItems, toastMiddleware, ui, undoable } from './wireframes/model/actions';
 import { EditorState } from './wireframes/model/editor-state';
@@ -37,20 +36,21 @@ const undoableReducer = undoable(
         ],
     });
 
-export const history = createBrowserHistory();
-
 export const store = configureStore({
     reducer: {
         // Contains the store for the left sidebar.
         assets: assets(createInitialAssetsState()),
+
         // Actual editor content.
         editor: rootLoading(undoableReducer, editorReducer),
+
         // Loading state, e.g. when something has been loaded.
         loading: loading(createInitialLoadingState()),
+
         // General UI behavior.
         ui: ui(createInitialUIState()),
     },
-    middleware: (getDefaultMiddleware) => getDefaultMiddleware({ serializableCheck: false }).concat(toastMiddleware(), loadingMiddleware(history)),
+    middleware: (getDefaultMiddleware) => getDefaultMiddleware({ serializableCheck: false }).concat(toastMiddleware(), loadingMiddleware()),
 });
 
 export type RootState = ReturnType<typeof store.getState>;

src/wireframes/components/RecentView.tsx

@@ -8,21 +8,13 @@
 
 import { Empty } from 'antd';
 import * as React from 'react';
-import { useEventCallback } from '@app/core';
 import { texts } from '@app/const';
-import { loadDiagramFromServer, RecentDiagram, useStore } from '@app/wireframes/model';
-import { useAppDispatch } from '@app/store';
-import { RecentItem } from './menu';
+import { useStore } from '@app/wireframes/model';
 import './styles/RecentView.scss';
 
 export const RecentView = () => {
-    const dispatch = useAppDispatch();
     const recent = useStore(x => x.loading.recentDiagrams);
 
-    const doLoad = useEventCallback((item: RecentDiagram) => {
-        dispatch(loadDiagramFromServer({ tokenToRead: item.tokenToRead, tokenToWrite: item.tokenToWrite, navigate: true }));
-    });
-
     const orderedRecent = React.useMemo(() => {
         const result = Object.entries(recent).map(([tokenToRead, value]) => {
             return { ...value, tokenToRead };
@@ -36,10 +28,6 @@ export const RecentView = () => {
     return (
         <>
             <div className='recent-list'>
-                {orderedRecent.map((item) =>
-                    <RecentItem item={item} onLoad={doLoad} />,
-                )}
-
                 {orderedRecent.length === 0 &&
                     <Empty image={Empty.PRESENTED_IMAGE_SIMPLE} description={texts.common.noRecentDocument} />
                 }

src/wireframes/components/actions/use-server.ts

@@ -42,12 +42,12 @@ export function useServer() {
         return { item: item, id: id };
     }
 
-    const getSlides = () => {
+    const getSlides = (allFrames: Map<string, string[][]>) => {        
         let frame3D: string[][][] = new Array(diagrams.length);
-        
+
         // Get frames
         diagrams.map((diagram, i) => {
-            const frames = diagram.frames ?? [];
+            const frames = allFrames.get(diagram.id) ?? [];
             frame3D[i] = [];
 
             frames.map((frame, j) => {
@@ -85,29 +85,34 @@ export function useServer() {
     }
 
     const fetchParser = async () => {
+        let frames: Map<string, string[][]> = new Map();
+
         for (let diagram of diagrams) {
             const script = diagram.script;
             if (!script) continue;
 
-            const frames = await parseFrames(script);
-            dispatch(changeFrames(diagram.id, frames));
+            const frame = await parseFrames(script);
+            frames.set(diagram.id, frame);
+            dispatch(changeFrames(diagram.id, frame));
         }
+
+        return frames;
     }
 
-    const fetchCompiler = async () => {
-        const { fileName, title, size, backgroundColor, config, frame } = getSlides();
+    const fetchCompiler = async (frames: Map<string, string[][]>) => {
+        const { fileName, title, size, backgroundColor, config, frame } = getSlides(frames);
 
         const linkPresentation = await compileSlides(fileName, title, size, backgroundColor, config, frame);
 
         return linkPresentation;
     }
 
-    const fetchApi = () => {
+    const fetchApi = async () => {
         // Fetch frames from parser
-        fetchParser();
-    
+        const frames = await fetchParser();
+
         // Fetch presentation from compiler
-        const links = fetchCompiler();
+        const links = await fetchCompiler(frames);
         return links;
     }
 
@@ -120,14 +125,16 @@ export function useServer() {
             window.open(linkPdf, '_blank');
         } catch (err) {
             messageApi.error(`${err}`);
-        } finally {
-            messageApi.open({
-                key: messageKey,
-                type: 'success',
-                content: `Preparing completed. Your presentation will be opened in a new tab.`,
-                duration: 1,
-            });
-        }
+            return;
+        } 
+
+        messageApi.open({
+            key: messageKey,
+            type: 'success',
+            content: `Preparing completed. Your presentation will be opened in a new tab.`,
+            duration: 1,
+        });
+        return;
     }
 
     const fetchSlide = async (messageApi: MessageInstance, messageKey: string) => {
@@ -138,14 +145,16 @@ export function useServer() {
             window.open(linkSlide, '_blank');
         } catch (err) {
             messageApi.error(`${err}`);
-        } finally {
-            messageApi.open({
-                key: messageKey,
-                type: 'success',
-                content: `Preparing completed. Your presentation will be opened in a new tab.`,
-                duration: 1,
-            });
+            return;
         }
+
+        messageApi.open({
+            key: messageKey,
+            type: 'success',
+            content: `Preparing completed. Your presentation will be opened in a new tab.`,
+            duration: 1,
+        });
+        return;
     }
 
     return { slide: fetchSlide, pdf: fetchPdf };

src/wireframes/components/headers/PresentHeader.tsx

@@ -25,11 +25,9 @@ export const PresentHeader = React.memo(() => {
                 icon={<FundProjectionScreenOutlined />} 
                 onClick={() => {
                     setLoading(true);
-                    try {
-                        forServer.slide(messageApi, messageKey);
-                    } finally {
-                        setLoading(false)
-                    }
+                    forServer
+                        .slide(messageApi, messageKey)
+                        .finally(() => setLoading(false));
                 }} 
                 className="header-cta-right" 
                 type="text" shape='round' 

src/wireframes/model/actions/api.ts

@@ -27,18 +27,6 @@ const strToList = (str: string) => {
     return result;
 }
 
-export async function fetchDiagram(readToken: string) {
-    const response = await fetch(`${SERVER_URL}/store/${readToken}`);
-
-    if (!response.ok) {
-        throw Error('Failed to load diagram');
-    }
-
-    const stored = await response.json();
-
-    return stored;
-}
-
 export const parseFrames = async (script: string) => {
     const response = await fetch(`${SERVER_URL}/parser`, {
         method: 'POST',