move interviewer assets to public folder

.eslintrc.cjs

@@ -30,6 +30,7 @@ const config = {
   ],
   ignorePatterns: ['node_modules', '*.stories.*', '*.test.*'],
   rules: {
+    "@typescript-eslint/consistent-type-definitions": ['error', 'type'],
     'no-process-env': 'error',
     'no-console': 'error',
     '@typescript-eslint/consistent-type-imports': [

app/(interview)/interview/_components/InterviewShell.tsx

@@ -7,7 +7,7 @@ import { store } from '~/lib/interviewer/store';
 
 const InterviewShell = () => {
   return (
-    <motion.div className="grid grid-cols-2">
+    <motion.div className="grid h-[100vh] grid-cols-2">
       <Provider store={store}>
         <ProtocolScreen stageIndex={0} />
       </Provider>

lib/interviewer/components/StagesMenu/StagePreview.js

@@ -1,14 +1,10 @@
 import React from 'react';
-import { connect } from 'react-redux';
 import { withHandlers, compose } from 'recompose';
 import PropTypes from 'prop-types';
 import cx from 'classnames';
 import { motion } from 'framer-motion';
 import { getCSSVariableAsNumber } from '@codaco/ui/src/utils/CSSVariables';
-import timelineImages from '../../images/timeline';
-import { get } from '../../utils/lodash-replacements';
-
-const getTimelineImage = (type) => get(timelineImages, type, timelineImages.Default);
+import Image from 'next/image';
 
 const StagePreview = ({
   item: {
@@ -55,11 +51,7 @@ const StagePreview = ({
         key={id}
       />
       <div className="stage-preview__image">
-        <img
-          src={getTimelineImage(type)}
-          alt="NameGenerator Interface"
-          title="NameGenerator Interface"
-        />
+        <Image src={`/interviewer/images/timeline/stage--${type}.png`} alt="NameGenerator Interface" title="NameGenerator Interface" width={128} height={92} />
       </div>
       <div className="stage-preview__label">
         {index + 1}
@@ -84,17 +76,12 @@ const stagePreviewHandlers = withHandlers({
   },
 });
 
-const mapStateToProps = (state) => ({
-  currentStageIndex: currentStageIndex(state.router.location.pathname),
-});
-
 StagePreview.propTypes = {
   item: PropTypes.object.isRequired,
   active: PropTypes.bool.isRequired,
   handleOpenStage: PropTypes.func.isRequired,
 };
 
 export default compose(
-  connect(mapStateToProps),
   stagePreviewHandlers,
 )(StagePreview);

lib/interviewer/components/StagesMenu/StagesMenu.js

@@ -1,5 +1,4 @@
 import React, { useState, useRef, useLayoutEffect } from 'react';
-import PropTypes from 'prop-types';
 import { Search } from '@codaco/ui';
 import { connect } from 'react-redux';
 import { motion, AnimatePresence } from 'framer-motion';
@@ -8,15 +7,17 @@ import { Scroller } from '@codaco/ui';
 import { getCSSVariableAsNumber, getCSSVariableAsString } from '@codaco/ui/src/utils/CSSVariables';
 import { getProtocolStages } from '../../selectors/protocol';
 import StagePreview from './StagePreview';
+import { useInterview } from '~/providers/InterviewProvider';
 
 const StagesMenu = (props) => {
   const {
-    currentStageIndex,
     stages,
     setExpanded,
     onStageSelect,
   } = props;
 
+  const { currentStageIndex } = useInterview();
+
   const [filter, setFilter] = useState('');
 
   const scrollerRef = useRef(null);
@@ -211,21 +212,13 @@ const StagesMenu = (props) => {
 
 function mapStateToProps(state) {
   const currentStages = getProtocolStages(state);
-
   const withIndex = currentStages.map((stage, index) => ({ ...stage, index }));
 
   return {
     stages: withIndex,
-    currentStageIndex: getCurrentStageIndex(state.router.location.pathname),
   };
 }
 
-StagesMenu.propTypes = {
-  stages: PropTypes.array.isRequired,
-  currentStageIndex: PropTypes.number.isRequired,
-  setExpanded: PropTypes.func.isRequired,
-};
-
 export default compose(
   connect(mapStateToProps, null),
 )(StagesMenu);

lib/interviewer/ducks/middleware/sound.js

@@ -1,15 +1,15 @@
 import { playSound } from '../../utils/playSound';
 import { actionTypes as networkActionTypes } from '../modules/network';
-import createNodeSound from '../../interaction-sounds/create-node.wav';
-import removeNodeSound from '../../interaction-sounds/discard.wav';
-import toggleOnSound from '../../interaction-sounds/toggle-on.wav';
-import toggleOffSound from '../../interaction-sounds/toggle-off.wav';
-import openAppSound from '../../interaction-sounds/open-app.wav';
-import addEdgeSound from '../../interaction-sounds/create-edge.wav';
-import errorSound from '../../interaction-sounds/error.wav';
-import edgeLinkingSound from '../../interaction-sounds/node-linking-mode.wav';
-import finishSessionSound from '../../interaction-sounds/finish-interview.wav';
-import dropSound from '../../interaction-sounds/drop-node.wav';
+import createNodeSound from '~/public/interviewer/interaction-sounds/create-node.wav';
+import removeNodeSound from '~/public/interviewer/interaction-sounds/discard.wav';
+import toggleOnSound from '~/public/interviewer/interaction-sounds/toggle-on.wav';
+import toggleOffSound from '~/public/interviewer/interaction-sounds/toggle-off.wav';
+import openAppSound from '~/public/interviewer/interaction-sounds/open-app.wav';
+import addEdgeSound from '~/public/interviewer/interaction-sounds/create-edge.wav';
+import errorSound from '~/public/interviewer/interaction-sounds/error.wav';
+import edgeLinkingSound from '~/public/interviewer/interaction-sounds/node-linking-mode.wav';
+import finishSessionSound from '~/public/interviewer/interaction-sounds/finish-interview.wav';
+import dropSound from '~/public/interviewer/interaction-sounds/drop-node.wav';
 import { getNetworkEdges } from '../../selectors/network';
 
 const sounds = {

lib/interviewer/styles/components/_node-bin.scss

@@ -2,7 +2,7 @@
   @include transition-properties((opacity transform), var(--animation-easing), var(--animation-duration-fast));
 
   background: transparent;
-  background-image: url('../../images/node-bin.svg');
+  background-image: url('/interviewer/images/node-bin.svg');
   background-repeat: no-repeat;
   background-size: contain;
   width: 5rem;

lib/interviewer/styles/containers/_searchable-list.scss

@@ -111,7 +111,7 @@ $sort-height: 3.2rem;
   color: var(--text);
   border-radius: units.unit(3);
   text-align: center;
-  background-image: url('../../images/roster-list-bg-cards.svg');
+  background-image: url('/interviewer/images/roster-list-bg-cards.svg');
   background-repeat: no-repeat;
   background-position: bottom;
   background-size: 62%;
@@ -125,7 +125,7 @@ $sort-height: 3.2rem;
 
   &::after {
     content: '';
-    background-image: url('../../images/roster-list-character.svg');
+    background-image: url('/interviewer/images/roster-list-character.svg');
     position: absolute;
     bottom: -8.7rem;
     left: 0;

providers/InterviewProvider.tsx

@@ -15,22 +15,23 @@ import { parseAsInteger, useQueryState } from 'next-usequerystate';
 const InterviewContext = createContext({
   network: {} as NcNetwork,
   networkHandlers: {
-    addNode: (_node: NcNode) => {},
-    addEdge: (_edge: NcEdge) => {},
-    updateNode: (_node: NcNode) => {},
-    updateEdge: (_edge: NcEdge) => {},
-    deleteNode: (_nodeId: string) => {},
-    deleteEdge: (_edgeId: string) => {},
+    addNode: (_node: NcNode) => null,
+    addEdge: (_edge: NcEdge) => null,
+    updateNode: (_node: NcNode) => null,
+    updateEdge: (_edge: NcEdge) => null,
+    deleteNode: (_nodeId: string) => null,
+    deleteEdge: (_edgeId: string) => null,
   },
   navigationHandlers: {
-    nextPage: () => {},
-    previousPage: () => {},
+    nextPage: () => null,
+    previousPage: () => null,
     hasNextPage: false,
     hasPreviousPage: false,
   },
   protocol: {} as Protocol,
   interviewId: '',
   stageConfig: {} as Stage,
+  currentStageIndex: 0,
 });
 
 function InterviewProvider({
@@ -58,7 +59,8 @@ function InterviewProvider({
 
   const stages = protocol.stages;
   const protocolStageCount = stages.length;
-  const stageConfig = stages[currentStage - 1] as Stage;
+  const currentStageIndex = currentStage - 1;
+  const stageConfig = stages[currentStageIndex]!;
 
   const navigationHandlers = {
     nextPage: () => {
@@ -99,6 +101,7 @@ function InterviewProvider({
         protocol,
         interviewId,
         stageConfig,
+        currentStageIndex,
       }}
     >
       {children}
@@ -113,12 +116,14 @@ const useInterview = () => {
     networkHandlers,
     navigationHandlers,
     stageConfig,
+    currentStageIndex,
   } = useContext(InterviewContext);
 
   return {
     network,
     protocol,
     stageConfig,
+    currentStageIndex,
     ...networkHandlers,
     ...navigationHandlers,
   };