Notebook_Frontend

package.json

@@ -31,6 +31,9 @@
     "@blueprintjs/datetime2": "^2.3.3",
     "@blueprintjs/icons": "^5.9.0",
     "@blueprintjs/select": "^5.1.3",
+    "@dnd-kit/core": "^6.3.1",
+    "@dnd-kit/sortable": "^10.0.0",
+    "@dnd-kit/utilities": "^3.2.2",
     "@mantine/hooks": "^7.11.2",
     "@octokit/rest": "^20.0.0",
     "@reduxjs/toolkit": "^1.9.7",

src/commons/sagas/StoriesSaga.ts

@@ -2,6 +2,9 @@ import { Context } from 'js-slang';
 import { call, put, select } from 'redux-saga/effects';
 import StoriesActions from 'src/features/stories/StoriesActions';
 import {
+  defaultContent,
+  // updateHeader,
+  defaultHeader,
   deleteStory,
   deleteUserUserGroups,
   getAdminPanelStoriesUsers,
@@ -21,7 +24,7 @@ import { combineSagaHandlers } from '../redux/utils';
 import { resetSideContent } from '../sideContent/SideContentActions';
 import { actions } from '../utils/ActionsHelper';
 import { showSuccessMessage, showWarningMessage } from '../utils/notifications/NotificationsHelper';
-import { defaultStoryContent } from '../utils/StoriesHelper';
+// import { defaultHeader, defaultContent } from '../utils/StoriesHelper';
 import { selectTokens } from './BackendSaga';
 import { evalCodeSaga } from './WorkspaceSaga/helpers/evalCode';
 
@@ -47,7 +50,8 @@ const StoriesSaga = combineSagaHandlers(sagaActions, {
     } else {
       const defaultStory: StoryData = {
         title: '',
-        content: defaultStoryContent,
+        header: defaultHeader,
+        content: defaultContent,
         pinOrder: null
       };
       yield put(actions.setCurrentStory(defaultStory));
@@ -68,6 +72,7 @@ const StoriesSaga = combineSagaHandlers(sagaActions, {
       tokens,
       userId,
       story.title,
+      story.header,
       story.content,
       story.pinOrder
     );
@@ -82,11 +87,14 @@ const StoriesSaga = combineSagaHandlers(sagaActions, {
   saveStory: function* (action) {
     const tokens: Tokens = yield selectTokens();
     const { story, id } = action.payload;
+    console.log('In saveStory');
+    console.log(story.header);
     const updatedStory: StoryView | null = yield call(
       updateStory,
       tokens,
       id,
       story.title,
+      story.header,
       story.content,
       story.pinOrder
     );
@@ -107,6 +115,11 @@ const StoriesSaga = combineSagaHandlers(sagaActions, {
     yield put(actions.getStoriesList());
   },
 
+  // updateHeader: function* (action) {
+  //   const newHeader = action.payload;
+  //   yield call(updateHeader, newHeader);
+  // },
+
   getStoriesUser: function* () {
     const tokens: Tokens = yield selectTokens();
     const me: {

src/commons/sideContent/SideContent.tsx

@@ -70,7 +70,7 @@ const SideContent = ({ renderActiveTabPanelOnly, editorWidth, ...props }: SideCo
   <SideContentProvider {...props}>
     {({ tabs: allTabs, alerts: tabAlerts, changeTabsCallback, selectedTab, height }) => (
       <div className="side-content">
-        <Card>
+        <Card style={{ margin: '0px' }}>
           <div className="side-content-tabs">
             <Tabs
               id="side-content-tabs"

src/commons/utils/StoriesHelper.ts

@@ -156,6 +156,8 @@ type HandlerType = {
   ) => ReturnType<HandlerOption[key]>;
 };
 
+let currentIndex: number;
+let view: boolean;
 const handleCustomComponents: HandlerType = {
   code: (state, node) => {
     const rawLang = node.lang ?? '';
@@ -167,15 +169,23 @@ const handleCustomComponents: HandlerType = {
     // const lang = rawLang.substring(1, rawLang.length - 1);
     const props: SourceBlockProps = {
       content: node.value,
-      commands: node.meta ?? ''
+      commands: node.meta ?? '',
+      index: currentIndex,
+      isViewOnly: view
     };
     // Disable typecheck as "source-block" is not a standard HTML tag
     const element = h('source-block', props) as any;
     return element;
   }
 };
 
-export const renderStoryMarkdown = (markdown: string): React.ReactNode => {
+export const renderStoryMarkdown = (
+  markdown: string,
+  index: number,
+  isViewOnly: boolean
+): React.ReactNode => {
+  currentIndex = index;
+  view = isViewOnly;
   const mdast = fromMarkdown(markdown);
   const hast = toHast(mdast, { handlers: handleCustomComponents }) ?? h();
   return (

src/features/stories/DragContext.ts

@@ -0,0 +1,18 @@
+import { createContext, useContext } from 'react';
+
+type DragContextProps = {
+  index: number | null;
+  setIndex: (index: number) => void;
+};
+
+export const DragContext = createContext<DragContextProps | null>(null);
+
+export const useDragItem = () => {
+  const dragItem = useContext(DragContext);
+
+  if (dragItem == null) {
+    throw Error('Drag Context cannot be null when in use');
+  }
+
+  return dragItem;
+};

src/features/stories/StoriesActions.ts

@@ -28,6 +28,7 @@ const StoriesActions = createActions('stories', {
   createStory: (story: StoryParams) => story,
   saveStory: (story: StoryParams, id: number) => ({ story, id }),
   deleteStory: (id: number) => id,
+  updateHeader: (newHeader: string) => newHeader,
 
   // Auth-related actions
   getStoriesUser: () => ({}),

src/features/stories/StoriesTypes.ts

@@ -3,14 +3,23 @@ import { DebuggerContext } from 'src/commons/workspace/WorkspaceTypes';
 
 import { InterpreterOutput, StoriesRole } from '../../commons/application/ApplicationTypes';
 
+export type StoryCell = {
+  // id: number;
+  index: number;
+  isCode: boolean;
+  env: string;
+  content: string;
+};
+
 export type StoryMetadata = {
   authorId: number;
   authorName: string;
 };
 
 export type StoryData = {
   title: string;
-  content: string;
+  header: string;
+  content: StoryCell[];
   pinOrder: number | null;
 };
 

src/features/stories/storiesComponents/BackendAccess.ts

@@ -6,12 +6,88 @@ import {
   showWarningMessage
 } from 'src/commons/utils/notifications/NotificationsHelper';
 import { request } from 'src/commons/utils/RequestHelper';
+import { defaultStoryContent } from 'src/commons/utils/StoriesHelper';
 import { RemoveLast } from 'src/commons/utils/TypeHelper';
 import { store } from 'src/pages/createStore';
 
 import { Tokens } from '../../../commons/application/types/SessionTypes';
 import { NameUsernameRole } from '../../../pages/academy/adminPanel/subcomponents/AddStoriesUserPanel';
 import { AdminPanelStoriesUser, StoryListView, StoryView } from '../StoriesTypes';
+import { StoryCell } from '../StoriesTypes';
+
+// config:
+//   chapter: 4
+//   variant: default
+
+export const defaultHeader: string = `---
+env:
+  iterFib:
+    chapter: 2
+    variant: default
+  recuFib:
+    chapter: 4
+    variant: default
+  rune:
+    chapter: 4
+    variant: default`;
+
+export const defaultContent: StoryCell[] = [
+  {
+    // id: 0,
+    index: 0,
+    isCode: true,
+    env: 'iterFib',
+    content: `function print(message) {
+  display(message);
+}
+draw_data(list(1, 2, 3, 4));
+display("hello world1");
+`
+  },
+  {
+    // id: 1,
+    index: 1,
+    isCode: false,
+    env: '',
+    content: `# Hello world!
+## hello world!!
+hello world!!!
+hello world!!!
+\`\`\`\`
+\`\`\`{source}
+print("hello world")
+\`\`\`
+\`\`\`\`
+`
+  },
+  {
+    // id: 2,
+    index: 2,
+    isCode: true,
+    env: 'recuFib',
+    content: `print("source academy stories");
+`
+  },
+  {
+    // id: 3,
+    index: 3,
+    isCode: true,
+    env: 'iterFib',
+    content: `print("hello world");
+`
+  },
+  {
+    // id: 4,
+    index: 4,
+    isCode: true,
+    env: 'iterFib',
+    content: `print("why this cell?");
+`
+  }
+];
+
+let tempHeader = defaultHeader;
+let tempContent = defaultContent;
 
 // Helpers
 
@@ -83,7 +159,8 @@ export const getStories = async (tokens: Tokens): Promise<StoryListView[] | null
     return null;
   }
   const stories = await resp.json();
-  return stories;
+  // return stories;
+  return stories.map((story: any) => ({ ...story, header: tempContent, content: tempContent }));
 };
 
 export const getStory = async (tokens: Tokens, storyId: number): Promise<StoryView | null> => {
@@ -95,19 +172,26 @@ export const getStory = async (tokens: Tokens, storyId: number): Promise<StoryVi
   if (!resp) {
     return null;
   }
-  const story = await resp.json();
+  let story = await resp.json();
+  // return story;
+
+  // changes
+  story = { ...story, header: tempHeader, content: tempContent };
+  console.log('get Story');
+  console.log(tempContent, tempHeader);
   return story;
 };
 
 export const postStory = async (
   tokens: Tokens,
   authorId: number,
   title: string,
-  content: string,
+  header: string,
+  content: StoryCell[],
   pinOrder: number | null
 ): Promise<StoryView | null> => {
   const resp = await requestStoryBackend(`/groups/${getStoriesGroupId()}/stories`, 'POST', {
-    body: { authorId, title, content, pinOrder },
+    body: { authorId, title, defaultStoryContent, pinOrder },
     ...tokens
   });
   if (!resp) {
@@ -123,11 +207,12 @@ export const updateStory = async (
   tokens: Tokens,
   id: number,
   title: string,
-  content: string,
+  header: string,
+  content: StoryCell[],
   pinOrder: number | null
 ): Promise<StoryView | null> => {
   const resp = await requestStoryBackend(`/groups/${getStoriesGroupId()}/stories/${id}`, 'PUT', {
-    body: { title, content, pinOrder },
+    body: { title, defaultStoryContent, pinOrder },
     ...tokens
   });
   if (!resp) {
@@ -136,7 +221,15 @@ export const updateStory = async (
   }
   showSuccessMessage('Story saved');
   const updatedStory = await resp.json();
-  return updatedStory;
+  // return updatedStory;
+
+  // change
+  console.log('in updateStory');
+  tempContent = content;
+  tempHeader = header;
+  console.log(content, header);
+  const story = { ...updatedStory, content: content, header: header };
+  return story;
 };
 
 // Returns the deleted story, or null if errors occur