feat: question creation module #125

joyce-shi · 2023-02-13T01:24:44Z

Notion ticket link

Add text component to Question Editor

Implementation description

Installed react-dnd library
Added drag and drop for text element in question creation module

Steps to test

Run locally

Screen.Recording.2023-02-20.at.6.23.18.PM.mov

What should reviewers focus on?

Test feature compared to Figma design

Some Notes:

While dragging, the image preview is the sidebar item, not the text input component. According to design this is the desired behaviour!
Currently, the error message behaviour has not been implemented, since I am awaiting design on some related decisions

joyce-shi · 2023-02-20T23:04:38Z

frontend/src/components/question-creation/QuestionSidebar.tsx

 import {
  ArrowBackOutlineIcon,
-  ColumnIcon,


As per design, since we are no longer supporting the Column feature!

joyce-shi · 2023-02-20T23:08:58Z

frontend/src/components/pages/admin/QuestionPage.tsx

+      ...prevQuestionElements,
+      newQuestionElement,
+    ]);
+  };


I think in the next PR, I'm going to refactor this to use useContext to avoid prop drilling + for a cleaner implementation. Just wanted to get this PR merged since the ticket has been open for waaaaaay too long!

joyce-shi · 2023-02-20T23:09:11Z

frontend/src/components/pages/admin/UsersPage.tsx

@@ -194,7 +194,6 @@ const UsersPage = (): React.ReactElement => {
    }
  };

-  type Role = "teacher" | "admin";
  return (
    <>
      <Box>


i think this should disappear once you pull from staging

joyce-shi · 2023-02-20T23:09:32Z

frontend/src/components/question-creation/HoverMessage.tsx

+
+const HoverMessage = (): React.ReactElement => <Text>You are hovering.</Text>;
+
+export default HoverMessage;


This is temporary, I'm waiting for a design decision on what the Hover state should look like here!

joyce-shi · 2023-02-20T23:10:13Z

frontend/src/components/question-creation/QuestionEditor.tsx

+      return <Text key={index}>this is a multi select element.</Text>;
+    default:
+      return null;
+  }


I'll update this to use the appropriate components as they are created!

joyce-shi · 2023-02-20T23:12:59Z

frontend/src/components/question-creation/QuestionSidebarItem.tsx

+  const opacity = isDragging ? 0.4 : 1;
+  return (
+    <Box ref={drag} style={{ opacity }}>
+      <WrapItem cursor="grab">


Currently, the cursor changes appropriately when hovering over the QuestionSidebarItem. However, I can't get the cursor to change while dragging. According to the linked thread, this is how the HTML API for drag and drop works and the fix is to implement a custom API. Given this, leaving the cursor as is.

joyce-shi · 2023-02-20T23:13:43Z

frontend/src/components/user-management/AdminTab.tsx

-  VStack,
-  HStack,
-} from "@chakra-ui/react";
+import { Text, VStack, HStack } from "@chakra-ui/react";

 import { AdminUser, TeacherUser } from "../../types/UserTypes";



joyce-shi · 2023-02-20T23:13:47Z

frontend/src/components/user-management/AdminUserTable.tsx

@@ -1,5 +1,4 @@
 import React from "react";
-import { AdminUser } from "../../types/UserTypes";
 import { TableRow, Table } from "../common/Table";
 import RemoveUserPopover from "./RemoveUserPopover";
 import { AdminTableProps } from "./AdminTab";


joyce-shi · 2023-02-20T23:17:36Z

frontend/src/components/question-creation/question-elements/TextElement.tsx

+  );
+};
+
+export default TextElement;


Currently, the TextElement is not draggable or deletable... I'll address that in a future PR since this ones getting pretty big.

frontend/src/components/question-creation/QuestionElement.tsx

frontend/src/components/question-creation/question-elements/TextElement.tsx

frontend/src/components/question-creation/QuestionSidebar.tsx

carissa-tang

two small comments, but looks good otherwise!

we probably will need to restructure how errors are handled (probably in QuestionPage and passed into QuestionEditor for setting/unsetting and QuestionSidebar for onSubmit) but can be in a follow up PR

frontend/src/components/question-creation/question-elements/TextElement.tsx

frontend/src/components/question-creation/QuestionElement.tsx

joyce-shi · 2023-02-24T03:10:45Z

two small comments, but looks good otherwise!

we probably will need to restructure how errors are handled (probably in QuestionPage and passed into QuestionEditor for setting/unsetting and QuestionSidebar for onSubmit) but can be in a follow up PR

yup makes sense! I created a ticket to handle passing the data from the entire QuestionEditor to the Create Assessment page, so I think all the error stuff can be finalized then? Lmk if I'm understanding correctly!

carissa-tang · 2023-02-24T03:20:25Z

assing the data from the entire QuestionEditor to the Create Assessment page, so I think all the error stuff can be finalized then? Lmk if I'm understanding correctly!

i guess in QuestionPage, we would

initialize error variables and pass to QuestionEditor
have handleSave function that validates errors and is passed to QuestionSidebar for callback

and then on success, we would need to pass the data back to Create Assessment

github-actions · 2023-02-24T03:56:32Z

Visit the preview URL for this PR (updated for commit 14b7350):

https://jump-math-staging--pr125-joyce-dnd-setup-ipyui92f.web.app

_{(expires Fri, 03 Mar 2023 03:56:24 GMT)}

_{🔥 via Firebase Hosting GitHub Action 🌎}

_{Sign: c42d8d0d853b05885664a2dd73f8245f4333ae51}

joyce-shi commented Feb 20, 2023

View reviewed changes

joyce-shi marked this pull request as ready for review February 20, 2023 23:14

joyce-shi requested review from carissa-tang and a team February 20, 2023 23:14

joyce-shi commented Feb 20, 2023

View reviewed changes

joyce-shi commented Feb 21, 2023

View reviewed changes

frontend/src/components/question-creation/QuestionElement.tsx Outdated Show resolved Hide resolved

carissa-tang reviewed Feb 21, 2023

View reviewed changes

frontend/src/components/question-creation/QuestionElement.tsx Outdated Show resolved Hide resolved

joyce-shi requested a review from carissa-tang February 21, 2023 02:24

carissa-tang reviewed Feb 21, 2023

View reviewed changes

frontend/src/components/question-creation/question-elements/TextElement.tsx Outdated Show resolved Hide resolved

carissa-tang reviewed Feb 21, 2023

View reviewed changes

frontend/src/components/question-creation/QuestionSidebar.tsx Outdated Show resolved Hide resolved

joyce-shi requested a review from carissa-tang February 24, 2023 02:23

carissa-tang approved these changes Feb 24, 2023

View reviewed changes

frontend/src/components/question-creation/question-elements/TextElement.tsx Show resolved Hide resolved

frontend/src/components/question-creation/QuestionElement.tsx Show resolved Hide resolved

joyce-shi added 14 commits February 23, 2023 22:26

install dnd package & add context provider

b7f8e54

remove column component

a995a74

make question element draggable

b2c3d2c

add valid drop area

91110ba

preliminary text input component w/o styling

14b2e7a

page formatting

0463781

cleanup

674da13

render question elements

e69b0a5

add question state

11f9544

add on drop behaviour

b2c08ee

removing navbar

d73e364

making left panel fixed and right panel scrollable

ee0b052

style text element component

5c8ce04

cursor behaviour

9fd4312

joyce-shi and others added 9 commits February 23, 2023 22:45

move types

e002f77

Rename QuestionPage.tsx to CreateQuestionPage.tsx

e79d77f

Rename CreateQuestionPage.tsx to QuestionPage.tsx

a0c6698

moving page

192844e

refactor

af85bf7

increasing icon size

a245642

fix multiline text issue

6e09381

fix window resizing issue

272cef7

error handling

14b7350

joyce-shi force-pushed the joyce/dnd-setup branch from 0a090f7 to 14b7350 Compare February 24, 2023 03:53

joyce-shi merged commit 04b65a1 into staging Feb 24, 2023

joyce-shi deleted the joyce/dnd-setup branch March 31, 2023 02:38

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

feat: question creation module #125

feat: question creation module #125

joyce-shi commented Feb 13, 2023 •

edited

joyce-shi Feb 20, 2023 •

edited

joyce-shi Feb 20, 2023

joyce-shi Feb 20, 2023

carissa-tang Feb 21, 2023

joyce-shi Feb 20, 2023

joyce-shi Feb 20, 2023

joyce-shi Feb 20, 2023

joyce-shi Feb 20, 2023

joyce-shi Feb 20, 2023

joyce-shi Feb 20, 2023

carissa-tang left a comment

joyce-shi commented Feb 24, 2023

carissa-tang commented Feb 24, 2023

github-actions bot commented Feb 24, 2023


		const HoverMessage = (): React.ReactElement => <Text>You are hovering.</Text>;

		export default HoverMessage;

feat: question creation module #125

feat: question creation module #125

Conversation

joyce-shi commented Feb 13, 2023 • edited

Notion ticket link

Implementation description

Steps to test

What should reviewers focus on?

joyce-shi Feb 20, 2023 • edited

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

carissa-tang left a comment

Choose a reason for hiding this comment

joyce-shi commented Feb 24, 2023

carissa-tang commented Feb 24, 2023

github-actions bot commented Feb 24, 2023

joyce-shi commented Feb 13, 2023 •

edited

joyce-shi Feb 20, 2023 •

edited