WIP(4): Component folder structure

components/CommentBox.test.js → components/CommentBox/CommentBox.test.js

@@ -1,22 +1,21 @@
-import '../__mocks__/useIsMac.mock'
-import '../__mocks__/useBreakpoint.mock'
+import '../../__mocks__/useIsMac.mock'
+import '../../__mocks__/useBreakpoint.mock'
 import React from 'react'
-import { fireEvent, render, screen, waitFor } from '@testing-library/react'
-import userEvent from '@testing-library/user-event'
-import AddComment from '../graphql/queries/addComment'
+import { fireEvent, render, screen } from '@testing-library/react'
+import AddComment from '../../graphql/queries/addComment'
 import '@testing-library/jest-dom'
 import CommentBox from './CommentBox'
 import { MockedProvider } from '@apollo/client/testing'
 import { InMemoryCache } from '@apollo/client'
-import GET_SUBMISSIONS from '../graphql/queries/getSubmissions'
-import GET_APP from '../graphql/queries/getApp'
-import dummySessionData from '../__dummy__/sessionData'
-import dummyLessonData from '../__dummy__/lessonData'
-import dummyAlertData from '../__dummy__/alertData'
-import { SubmissionStatus } from '../graphql'
-import { ContextProvider } from '../helpers/globalContext'
-import GET_PREVIOUS_SUBMISSIONS from '../graphql/queries/getPreviousSubmissions'
-import getPreviousSubmissionsData from '../__dummy__/getPreviousSubmissionsData'
+import GET_SUBMISSIONS from '../../graphql/queries/getSubmissions'
+import GET_APP from '../../graphql/queries/getApp'
+import dummySessionData from '../../__dummy__/sessionData'
+import dummyLessonData from '../../__dummy__/lessonData'
+import dummyAlertData from '../../__dummy__/alertData'
+import { SubmissionStatus } from '../../graphql'
+import { ContextProvider } from '../../helpers/globalContext'
+import GET_PREVIOUS_SUBMISSIONS from '../../graphql/queries/getPreviousSubmissions'
+import getPreviousSubmissionsData from '../../__dummy__/getPreviousSubmissionsData'
 
 describe('CommentBox component', () => {
   const comments = [

components/CommentBox.tsx → components/CommentBox/CommentBox.tsx

@@ -1,17 +1,17 @@
 import React, { useState, useContext } from 'react'
-import { MdInput } from './MdInput'
-import { Button } from './theme/Button'
-import styles from '../scss/commentBox.module.scss'
+import { MdInput } from '.././MdInput'
+import { Button } from '.././theme/Button'
+import styles from './commentBox.module.scss'
 import {
   useAddCommentMutation,
   Comment,
   SubmissionStatus,
   Submission
-} from '../graphql'
+} from '../../graphql'
 import _ from 'lodash'
-import { GlobalContext } from '../helpers/globalContext'
-import { updateCache } from '../helpers/updateCache'
-import { SubmissionComments } from './SubmissionComments'
+import { GlobalContext } from '../../helpers/globalContext'
+import { updateCache } from '../../helpers/updateCache'
+import { SubmissionComments } from '.././SubmissionComments'
 
 const CommentBox: React.FC<{
   line: number

components/CommentBox/index.tsx

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

components/ConnectToDiscordModal.test.js → components/ConnectToDiscordModal/ConnectToDiscordModal.test.js

@@ -1,7 +1,7 @@
 jest.mock('next-auth/react')
 
 import React from 'react'
-import ConnectToDiscordModal from './ConnectToDiscordModal'
+import ConnectToDiscordModal from '.'
 import { render, waitFor, fireEvent, screen } from '@testing-library/react'
 import { signIn } from 'next-auth/react'
 

components/ConnectToDiscordModal.tsx → components/ConnectToDiscordModal/ConnectToDiscordModal.tsx

@@ -1,6 +1,6 @@
 import React, { useEffect, useState } from 'react'
-import { ModalCard, ModalSize } from './ModalCard'
-import styles from '../scss/connectToDiscordModal.module.scss'
+import { ModalCard, ModalSize } from '../ModalCard'
+import styles from './connectToDiscordModal.module.scss'
 import { signIn } from 'next-auth/react'
 type ConnectToDiscordModalProps = {
   show: boolean

components/ConnectToDiscordModal/index.tsx

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

components/ContributorCard.tsx → components/ContributorCard/ContributorCard.tsx

@@ -1,7 +1,7 @@
 import React from 'react'
 import { Linkedin, GitHub, File, Code } from 'react-feather'
-import UserInfoImage from './UserInfoImage'
-import styles from '../scss/contributorCard.module.scss'
+import UserInfoImage from '../UserInfoImage'
+import styles from './contributorCard.module.scss'
 
 type ContributorCardProps = {
   user: {

components/ContributorCard/index.tsx

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