Merge pull request #245 from open-source-labs/rose/fixes

Final ReacType v19
open-source-labs · Jan 11, 2024 · 193d965 · 193d965
2 parents e9dc796 + 7ee442d
commit 193d965
Show file tree

Hide file tree

Showing 5 changed files with 12 additions and 15 deletions.
diff --git a/__tests__/DragAndDrop.test.tsx b/__tests__/DragAndDrop.test.tsx
@@ -55,6 +55,7 @@ describe('Drag and Drop Side Panel', () => {
     expect(screen.getByText('Root Components')).toBeInTheDocument();
     expect(screen.getByText('Reusable Components')).toBeInTheDocument();
   });
+
   test('test drag and drop', () => {
     render(
       TestContext(

diff --git a/__tests__/signIn.test.tsx b/__tests__/signIn.test.tsx
@@ -25,9 +25,9 @@ describe('sign in page', () => {
     render(<TestSignIn />);
     expect(screen.getByTestId('password-input')).toBeInTheDocument();
   });
-  test('should render 4 login buttons and dark mode button', () => {
+  test('should render 4 login buttons', () => {
     render(<TestSignIn />);
-    expect(screen.getAllByRole('button')).toHaveLength(5);
+    expect(screen.getAllByRole('button')).toHaveLength(4);
   });
   test('should invalidate empty username field', () => {
     render(<TestSignIn />);

diff --git a/app/src/components/left/HTMLPanel.tsx b/app/src/components/left/HTMLPanel.tsx
@@ -34,18 +34,11 @@ const HTMLPanel = (props): JSX.Element => {
   const [alertOpen, setAlertOpen] = React.useState<boolean>(false);
   const state = useSelector((store: RootState) => store.appState);
   const roomCode = useSelector((store: RootState) => store.roomSlice.roomCode);
+  const currentID = useSelector(
+    (store: RootState) => store.appState.customElementId
+  );
 
   const dispatch = useDispatch();
-  let startingID = 0;
-  state.HTMLTypes.forEach((element) => {
-    if (element.id >= startingID) startingID = element.id;
-  });
-  startingID += 1;
-
-  const [currentID, setCurrentID] = useState(startingID);
-
-  const buttonClasses =
-    'MuiButtonBase-root MuiButton-root MuiButton-text makeStyles-button-12 MuiButton-textPrimary';
 
   const handleTagChange = (e: React.ChangeEvent<HTMLInputElement>) => {
     resetError();
@@ -114,7 +107,7 @@ const HTMLPanel = (props): JSX.Element => {
       emitEvent('addElementAction', roomCode, newElement);
     }
 
-    setCurrentID(currentID + 1);
+    // setCurrentID(currentID + 1);
     setTag('');
     setName('');
   };
@@ -324,7 +317,7 @@ const useStyles = makeStyles({
     width: '100%'
   },
   addComponentWrapper: {
-    width: '100%',
+    width: '100%'
   },
   input: {
     borderRadius: '5px',

diff --git a/app/src/interfaces/Interfaces.ts b/app/src/interfaces/Interfaces.ts
@@ -21,6 +21,7 @@ export interface State {
   stylesheet: string;
   codePreview: boolean;
   screenshotTrigger: boolean;
+  customElementId: number;
 }
 
 export interface ChildElement {

diff --git a/app/src/redux/reducers/slice/appStateSlice.ts b/app/src/redux/reducers/slice/appStateSlice.ts
@@ -44,7 +44,8 @@ export const initialState: State = {
   tailwind: false,
   stylesheet: '',
   codePreview: false,
-  screenshotTrigger: false
+  screenshotTrigger: false,
+  customElementId: 10001
 };
 
 let separator = initialState.HTMLTypes[1];
@@ -905,6 +906,7 @@ const appStateSlice = createSlice({
       const HTMLTypes = [...state.HTMLTypes];
       HTMLTypes.push(action.payload);
       state.HTMLTypes = HTMLTypes;
+      state.customElementId += 1;
     },
     //Undo & Redo functions are not working properly. Redo & Undo target the last component rather than last added HTML Element.
     undo: (state, action) => {