implement the stage component from deliberation-empirica (instead of building up the page element at a time)

[JamesPHoughton]

Currently we import the element react component from deliberation-empirica, and build up the page display with conditions manually. This means that we have to reimplement the display logic. It would be more robust to use the display logic that is already part of deliberation-empirica, so that if this changes, we automatically are up to date. Also means duplicating less code.

[JamesPHoughton]

From the render panel, this code:

 <div>
        {elements !== undefined &&
          elements.map(
            (element: any, index: any) =>
              ((element.displayTime <= time && element.hideTime >= time) ||
                !element.displayTime) && (
                <div key={index}>
                  {index != 0 && <div className="divider"></div>}
                  <RenderDelibElement element={element} />
                </div>
              )
          )}
      </div>

is analogous to this code from deliberation-empirica/client/src/Stage.jsx

const renderNoDiscussionPage = () => (
    <div className="mt-2 mb-2 mx-auto max-w-xl pb-2">
      {elements.map(renderElement)}
    </div>
  );

Rather than having both, we should just import stage.jsx and use it.

This means that we'd get rid of lines 29-41 in renderpanel, and replace them with a call to the stage component imported from deliberation-empirica. This would get rid of RenderDelibElement altogether.

[JamesPHoughton]

• getting build errors, document component in a .next file was being run on the server side instead of the server side.