WIP(9): Component folder structure

components/ChallengeMaterial/ChallengeMaterial.tsx

@@ -26,9 +26,9 @@ import MdInput from '../MdInput'
 import { updateCache } from '../../helpers/updateCache'
 import { GlobalContext } from '../../helpers/globalContext'
 import { SubmissionComments } from '../SubmissionComments'
-import { SelectIteration } from '../SelectIteration'
+import SelectIteration from '../SelectIteration'
 import Error, { StatusCode } from '../Error'
-import { ReviewStatus } from '../ReviewStatus'
+import ReviewStatus from '../ReviewStatus'
 import useBreakpoint from '../../helpers/useBreakpoint'
 import MDXcomponents from '../../helpers/mdxComponents'
 dayjs.extend(relativeTime)

components/ReviewCard/ReviewCard.tsx

@@ -22,9 +22,9 @@ import Markdown from 'markdown-to-jsx'
 import MdInput from '../MdInput'
 import DiffView from '../DiffView'
 import { updateCache } from '../../helpers/updateCache'
-import { SelectIteration } from '../SelectIteration'
+import SelectIteration from '../SelectIteration'
 import Error, { StatusCode } from '../Error'
-import { ReviewStatus } from '../ReviewStatus'
+import ReviewStatus from '../ReviewStatus'
 import styles from './reviewCard.module.scss'
 dayjs.extend(relativeTime)
 

components/ReviewStatus.test.js → components/ReviewStatus/ReviewStatus.test.js

@@ -1,8 +1,8 @@
 import React from 'react'
 import { render, screen } from '@testing-library/react'
 import '@testing-library/jest-dom'
-import { ReviewStatus } from './ReviewStatus'
-import { SubmissionStatus } from '../graphql'
+import ReviewStatus from './ReviewStatus'
+import { SubmissionStatus } from '../../graphql'
 
 describe('ReviewComment component', () => {
   const data = {

components/ReviewStatus.tsx → components/ReviewStatus/ReviewStatus.tsx

@@ -1,13 +1,13 @@
 import React from 'react'
 import dayjs from 'dayjs'
 import LocalizedFormat from 'dayjs/plugin/localizedFormat'
-import { SubmissionStatus } from '../graphql/index'
-import styles from '../scss/reviewerComment.module.scss'
-import ReviewerProfile from './ReviewerProfile'
+import { SubmissionStatus } from '../../graphql/index'
+import styles from './reviewStatus.module.scss'
+import ReviewerProfile from '../ReviewerProfile'
 import Markdown from 'markdown-to-jsx'
 dayjs.extend(LocalizedFormat)
 
-export const ReviewStatus: React.FC<{
+const ReviewStatus: React.FC<{
   username?: string
   name?: string
   comment?: string | null
@@ -60,3 +60,5 @@ export const ReviewStatus: React.FC<{
     </div>
   )
 }
+
+export default ReviewStatus

components/ReviewStatus/index.tsx

@@ -0,0 +1 @@
+export { default } from './ReviewStatus'

components/ScrollTopArrow.tsx → components/ScrollTopArrow/ScrollTopArrow.tsx

@@ -1,5 +1,5 @@
 import React, { useState, useEffect } from 'react'
-import styles from '../scss/scrollTopArrow.module.scss'
+import styles from './scrollTopArrow.module.scss'
 import throttle from 'lodash/throttle'
 import Image from 'next/image'
 

components/ScrollTopArrow/index.tsx

@@ -0,0 +1 @@
+export { default } from './ScrollTopArrow'

components/SelectIteration.test.js → components/SelectIteration/SelectIteration.test.js

@@ -1,5 +1,5 @@
 import React from 'react'
-import { SelectIteration } from './SelectIteration'
+import SelectIteration from './SelectIteration'
 import { render, screen } from '@testing-library/react'
 import '@testing-library/jest-dom'
 import userEvent from '@testing-library/user-event'

components/SelectIteration.tsx → components/SelectIteration/SelectIteration.tsx

@@ -1,11 +1,11 @@
 import React from 'react'
-import styles from '../scss/selectIteration.module.scss'
+import styles from './selectIteration.module.scss'
 import { ApolloError } from '@apollo/client'
 import {
   Submission,
   GetPreviousSubmissionsQuery,
   SubmissionStatus
-} from '../graphql'
+} from '../../graphql'
 import { Badge, Button } from 'react-bootstrap'
 
 type IterationLink = {
@@ -101,7 +101,7 @@ const SelectDisplay: React.FC<Omit<SelectIteration, 'error'>> = ({
   return <></>
 }
 
-export const SelectIteration: React.FC<SelectIteration> = ({
+const SelectIteration: React.FC<SelectIteration> = ({
   loading,
   error,
   data,
@@ -132,3 +132,5 @@ export const SelectIteration: React.FC<SelectIteration> = ({
     </div>
   )
 }
+
+export default SelectIteration

components/SelectIteration/index.tsx

@@ -0,0 +1 @@
+export { default } from './SelectIteration'

stories/components/ReviewStatus.stories.tsx

@@ -1,5 +1,5 @@
 import React from 'react'
-import { ReviewStatus } from '../../components/ReviewStatus'
+import ReviewStatus from '../../components/ReviewStatus'
 import { SubmissionStatus } from '../../graphql'
 
 export default {

stories/components/SelectIteration.stories.tsx

@@ -1,6 +1,6 @@
 import { ApolloError } from '@apollo/client'
 import React from 'react'
-import { SelectIteration } from '../../components/SelectIteration'
+import SelectIteration from '../../components/SelectIteration'
 import { GetPreviousSubmissionsQuery } from '../../graphql'
 
 export default {