message: Added store to anchor component
diff: -import React, { useState } from 'react';
  +import React, { useContext, useState } from 'react';
  import { DragDropContext, Draggable, Droppable, DropResult } from 'react-beautiful-dnd';
  +import { OrderItem, TreeContext } from '../../store/treeStore/treeStore';
  import './AnchorMenu.css';
  const AnchorMenu = (): JSX.Element => {
  @@ -19,6 +20,8 @@ const AnchorMenu = (): JSX.Element => {
  },
  ];
  + const { state, dispatch } = useContext(TreeContext);
  +
  const [list, setList] = useState(initList);
  const handleChange = (result: DropResult) => {
  @@ -55,19 +58,14 @@ const AnchorMenu = (): JSX.Element => {
  ...draggableStyle,
  });
  - return (
  - <div className="anchor-menu">
  - <p className="align-header">Oversikt</p>
  -
  - <DragDropContext onDragEnd={handleChange}>
  - <Droppable droppableId="droppable">
  - {(provided, snapshot) => (
  - <div
  - {...provided.droppableProps}
  - ref={provided.innerRef}
  - style={getListStyle(snapshot.isDraggingOver)}
  - >
  - {list.map((item, index) => {
  + const renderTree = (
  + items: Array<OrderItem>,
  + parentArray: Array<string> = [],
  + parentQuestionNumber = '',
  + ): Array<JSX.Element> => {
  + return items.map((x, index) => {
  + const questionNumber =
  + parentQuestionNumber === '' ? `${index + 1}` : `${parentQuestionNumber}.${index + 1}`;
  return (
  <Draggable key={index} draggableId={index.toString()} index={index}>
  {(provided, snapshot) => (
  @@ -77,12 +75,33 @@ const AnchorMenu = (): JSX.Element => {
  {...provided.dragHandleProps}
  style={getItemStyle(snapshot.isDragging, provided.draggableProps.style)}
  >
  - {item.text}
  + {state.qItems[x.linkId].text}
  </div>
  )}
  </Draggable>
  );
  - })}
  + return (
  + <div key={x.linkId}>
  + <p>{questionNumber}</p>
  + {renderTree(x.items, [...parentArray, x.linkId], questionNumber)}
  + </div>
  + );
  + });
  + };
  +
  + return (
  + <div className="anchor-menu">
  + <p className="align-header">Oversikt</p>
  +
  + <DragDropContext onDragEnd={handleChange}>
  + <Droppable droppableId="droppable">
  + {(provided, snapshot) => (
  + <div
  + {...provided.droppableProps}
  + ref={provided.innerRef}
  + style={getListStyle(snapshot.isDraggingOver)}
  + >
  + {renderTree(state.qOrder)}
  {provided.placeholder}
  </div>
  )}
  