chore: group components into subfolders (#560)

* chore: remove truthyFilter
* chore: group components in folders

web/src/app.tsx

@@ -7,16 +7,16 @@ import { getLanguages, setCurrentLocale } from './actions/languages';
 import { checkCurrentUser } from './actions/login';
 import type { RootState } from './types';
 
-import Add from './components/add';
-import Home from './components/home';
-import HowTo from './components/how-to';
-import { LoginSuccess, LoginFailure, LogoutSuccess } from './components/login';
-import MySentences from './components/my-sentences-list';
-import PageContainer from './components/page';
-import Profile from './components/profile';
-import RejectedSentences from './components/rejected-sentences-list';
-import Review from './components/review';
-import Stats from './components/stats';
+import Add from './components/pages/add';
+import Home from './components/pages/home';
+import HowTo from './components/pages/how-to';
+import { LoginSuccess, LoginFailure, LogoutSuccess } from './components/pages/login';
+import MySentences from './components/pages/my-sentences-list';
+import PageContainer from './components/pages/page';
+import Profile from './components/pages/profile';
+import RejectedSentences from './components/pages/rejected-sentences-list';
+import Review from './components/pages/review';
+import Stats from './components/pages/stats';
 
 export default function App({ history }: { history: History }) {
   const { authed } = useSelector((state: RootState) => state.login);

web/src/components/confirm-form.test.tsx → web/src/components/add/confirm-form.test.tsx

@@ -2,7 +2,7 @@ import React from 'react';
 import { screen } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
 
-import { renderWithLocalization } from '../../tests/test-utils';
+import { renderWithLocalization } from '../../../tests/test-utils';
 import ConfirmForm from './confirm-form';
 
 const submitted = ['This is a test444.', 'This too!', 'Hi.'];

web/src/components/confirm-form.tsx → web/src/components/add/confirm-form.tsx

@@ -1,9 +1,9 @@
 import React from 'react';
 import { Localized } from '@fluent/react';
 
-import ReviewLink from './review-link';
-import SpinnerButton from './spinner-button';
-import { Prompt } from './prompt';
+import ReviewLink from '../review/review-link';
+import SpinnerButton from '../spinner-button';
+import { Prompt } from '../prompt';
 
 type Props = {
   submitted: string[];

web/src/components/submit-form.test.tsx → web/src/components/add/submit-form.test.tsx

@@ -3,7 +3,7 @@ import { screen, fireEvent } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
 import { BrowserRouter } from 'react-router-dom';
 
-import { renderWithLocalization } from '../../tests/test-utils';
+import { renderWithLocalization } from '../../../tests/test-utils';
 
 import SubmitForm from './submit-form';
 

web/src/components/submit-form.tsx → web/src/components/add/submit-form.tsx

@@ -2,12 +2,12 @@ import React, { useState } from 'react';
 import { Link } from 'react-router-dom';
 import { Localized, useLocalization } from '@fluent/react';
 
-import { useLocaleUrl } from '../urls';
-import type { Language, SubmissionFailures } from '../types';
-import LanguageSelector from './language-selector';
-import Sentence from './sentence';
-import SubmitButton from './submit-button';
-import { Prompt } from './prompt';
+import { useLocaleUrl } from '../../urls';
+import type { Language, SubmissionFailures } from '../../types';
+import LanguageSelector from '../language-selector';
+import Sentence from '../sentence';
+import SubmitButton from '../submit-button';
+import { Prompt } from '../prompt';
 
 const SPLIT_ON = '\n';
 const TRANSLATION_KEY_PREFIX = 'TRANSLATION_KEY:';

web/src/components/add.test.tsx → web/src/components/pages/add.test.tsx

@@ -3,7 +3,7 @@ import * as redux from 'react-redux';
 import { screen, fireEvent, act, waitFor } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
 
-import { renderWithLocalization } from '../../tests/test-utils';
+import { renderWithLocalization } from '../../../tests/test-utils';
 import Add from './add';
 
 const languages = [

web/src/components/add.tsx → web/src/components/pages/add.tsx

@@ -2,14 +2,14 @@ import React, { useState } from 'react';
 import { useDispatch, useSelector } from 'react-redux';
 import { useLocalization } from '@fluent/react';
 
-import { uploadSentences } from '../actions/sentences';
-import type { ReviewedState, RootState, SentenceRecord } from '../types';
+import { uploadSentences } from '../../actions/sentences';
+import type { ReviewedState, RootState, SentenceRecord } from '../../types';
 
-import SubmitForm from './submit-form';
-import ConfirmForm from './confirm-form';
-import ReviewForm from './review-form';
+import ReviewForm from '../review/review-form';
+import SubmitForm from '../add/submit-form';
+import ConfirmForm from '../add/confirm-form';
 
-import '../../css/add.css';
+import '../../../css/add.css';
 
 function merge<T>(arr1: T[], arr2: T[]) {
   return arr1.reduce((accum, cur) => {
@@ -150,16 +150,15 @@ export default function Add() {
         isUploadingSentences={isUploadingSentences}
       />
     );
-  } else {
-    // The plain submission form allows copy & pasting
-    return (
-      <SubmitForm
-        onSubmit={onSubmit}
-        message={message}
-        error={error}
-        languages={availableLanguages}
-        sentenceSubmissionFailures={sentenceSubmissionFailures}
-      />
-    );
   }
+
+  return (
+    <SubmitForm
+      onSubmit={onSubmit}
+      message={message}
+      error={error}
+      languages={availableLanguages}
+      sentenceSubmissionFailures={sentenceSubmissionFailures}
+    />
+  );
 }

web/src/components/home.test.tsx → web/src/components/pages/home.test.tsx

@@ -1,6 +1,6 @@
 import React from 'react';
 
-import { renderWithLocalization } from '../../tests/test-utils';
+import { renderWithLocalization } from '../../../tests/test-utils';
 
 import Home from './home';
 

web/src/components/home.tsx → web/src/components/pages/home.tsx

@@ -2,9 +2,9 @@ import React from 'react';
 import { Link } from 'react-router-dom';
 import { Localized } from '@fluent/react';
 
-import { useLocaleUrl } from '../urls';
+import { useLocaleUrl } from '../../urls';
 
-import '../../css/home.css';
+import '../../../css/home.css';
 
 export default function Home() {
   return (

web/src/components/how-to.test.tsx → web/src/components/pages/how-to.test.tsx

@@ -1,6 +1,6 @@
 import React from 'react';
 
-import { renderWithLocalization } from '../../tests/test-utils';
+import { renderWithLocalization } from '../../../tests/test-utils';
 
 import HowTo from './how-to';
 

web/src/components/login.test.tsx → web/src/components/pages/login.test.tsx

@@ -2,7 +2,7 @@ import React from 'react';
 import * as redux from 'react-redux';
 import { screen } from '@testing-library/react';
 
-import { renderWithLocalization } from '../../tests/test-utils';
+import { renderWithLocalization } from '../../../tests/test-utils';
 
 import { LoginSuccess, LoginFailure, LogoutSuccess } from './login';
 

web/src/components/login.tsx → web/src/components/pages/login.tsx

@@ -3,7 +3,7 @@ import { useDispatch } from 'react-redux';
 import { Redirect } from 'react-router-dom';
 import { Localized } from '@fluent/react';
 
-import { afterLogin, logout } from '../actions/login';
+import { afterLogin, logout } from '../../actions/login';
 
 export function LoginSuccess() {
   const dispatch = useDispatch();

web/src/components/my-sentences-list.test.tsx → web/src/components/pages/my-sentences-list.test.tsx

@@ -2,9 +2,9 @@ import React from 'react';
 import { act, screen, waitFor } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
 
-import { renderWithLocalization } from '../../tests/test-utils';
+import { renderWithLocalization } from '../../../tests/test-utils';
 
-import * as backend from '../backend';
+import * as backend from '../../backend';
 import MySentencesList from './my-sentences-list';
 
 const sentences = {

web/src/components/my-sentences-list.tsx → web/src/components/pages/my-sentences-list.tsx

@@ -1,13 +1,12 @@
 import React, { useEffect, useState } from 'react';
 import { Localized, useLocalization } from '@fluent/react';
 
-import '../../css/sentences-list.css';
+import '../../../css/sentences-list.css';
 
-import { sendRequest } from '../backend';
-import truthyFilter from '../truthyFilter';
-import type { SentenceRecord } from '../types';
-import Sentence from './sentence';
-import SpinnerButton from './spinner-button';
+import { sendRequest } from '../../backend';
+import type { SentenceRecord } from '../../types';
+import Sentence from '../sentence';
+import SpinnerButton from '../spinner-button';
 
 type MySentenceBatch = {
   source: string;
@@ -61,7 +60,7 @@ export default function MySentencesList() {
 
         return parseInt(sentenceId, 10);
       })
-      .filter(truthyFilter);
+      .filter(Boolean);
 
     try {
       setDeletionError(undefined);

web/src/components/page.test.tsx → web/src/components/pages/page.test.tsx

@@ -1,12 +1,12 @@
 import React from 'react';
 import { render } from '@testing-library/react';
 
-import Header from './header';
-import Footer from './footer';
+import Header from '../header';
+import Footer from '../footer';
 import Page from './page';
 
-jest.mock('./header');
-jest.mock('./footer');
+jest.mock('../header');
+jest.mock('../footer');
 
 test('should render page', () => {
   (Header as jest.Mock).mockReturnValue(<div>...Header...</div>);

web/src/components/page.tsx → web/src/components/pages/page.tsx

@@ -1,7 +1,7 @@
 import React from 'react';
 
-import Header from './header';
-import Footer from './footer';
+import Header from '../header';
+import Footer from '../footer';
 
 type Props = {
   children?: React.ReactNode;

web/src/components/profile.test.tsx → web/src/components/pages/profile.test.tsx

@@ -2,16 +2,16 @@ import React from 'react';
 import * as redux from 'react-redux';
 import { screen } from '@testing-library/react';
 
-import { renderWithLocalization } from '../../tests/test-utils';
+import { renderWithLocalization } from '../../../tests/test-utils';
 
-import AddLanguage from './add-language-section';
-import PersonalLanguageInfo from './personal-language-info';
+import AddLanguage from '../profile/add-language-section';
+import PersonalLanguageInfo from '../profile/personal-language-info';
+import Settings from '../profile/settings';
 import Profile from './profile';
-import Settings from './settings';
 
-jest.mock('./personal-language-info');
-jest.mock('./add-language-section');
-jest.mock('./settings');
+jest.mock('../profile/personal-language-info');
+jest.mock('../profile/add-language-section');
+jest.mock('../profile/settings');
 
 const username = 'foo';
 

web/src/components/profile.tsx → web/src/components/pages/profile.tsx

@@ -2,13 +2,13 @@ import React from 'react';
 import { useSelector } from 'react-redux';
 import { Localized } from '@fluent/react';
 
-import type { RootState } from '../types';
+import type { RootState } from '../../types';
 
-import PersonalLanguageInfo from './personal-language-info';
-import AddLanguage from './add-language-section';
-import Settings from './settings';
+import PersonalLanguageInfo from '../profile/personal-language-info';
+import AddLanguage from '../profile/add-language-section';
+import Settings from '../profile/settings';
 
-import '../../css/profile.css';
+import '../../../css/profile.css';
 
 export default function Profile() {
   const { username } = useSelector((state: RootState) => state.login);

web/src/components/rejected-sentences-list.test.tsx → web/src/components/pages/rejected-sentences-list.test.tsx

@@ -1,9 +1,9 @@
 import React from 'react';
 import { act, screen, waitFor } from '@testing-library/react';
 
-import { renderWithLocalization } from '../../tests/test-utils';
+import { renderWithLocalization } from '../../../tests/test-utils';
 
-import * as backend from '../backend';
+import * as backend from '../../backend';
 import RejectedSentencesList from './rejected-sentences-list';
 
 const rejectedSentences = {

web/src/components/rejected-sentences-list.tsx → web/src/components/pages/rejected-sentences-list.tsx

@@ -1,9 +1,9 @@
 import React, { useEffect, useState } from 'react';
 import { Localized, useLocalization } from '@fluent/react';
 
-import { sendRequest } from '../backend';
-import type { SentenceRecord } from '../types';
-import Sentence from './sentence';
+import { sendRequest } from '../../backend';
+import type { SentenceRecord } from '../../types';
+import Sentence from '../sentence';
 
 export type RejectedSentences = Record<string, SentenceRecord[]>;
 

web/src/components/review.test.tsx → web/src/components/pages/review.test.tsx

@@ -2,16 +2,16 @@ import React from 'react';
 import * as redux from 'react-redux';
 import { screen } from '@testing-library/react';
 
-import { renderWithLocalization } from '../../tests/test-utils';
+import { renderWithLocalization } from '../../../tests/test-utils';
 
-import LanguageSelector from './language-selector';
-import ReviewForm from './review-form';
-import ReviewCriteria from './review-criteria';
+import LanguageSelector from '../language-selector';
+import ReviewForm from '../review/review-form';
+import ReviewCriteria from '../review/review-criteria';
 import Review from './review';
 
-jest.mock('./language-selector');
-jest.mock('./review-form');
-jest.mock('./review-criteria');
+jest.mock('../language-selector');
+jest.mock('../review/review-form');
+jest.mock('../review/review-criteria');
 
 const dispatchMock = jest.fn();
 

web/src/components/review.tsx → web/src/components/pages/review.tsx

@@ -8,13 +8,13 @@ import {
   resetReviewMessage,
   reviewSentences,
   saveSkippedSentences,
-} from '../actions/sentences';
-import { useLocaleUrl, getReviewUrl } from '../urls';
-import type { RootState, ReviewedState } from '../types';
+} from '../../actions/sentences';
+import { useLocaleUrl, getReviewUrl } from '../../urls';
+import type { RootState, ReviewedState } from '../../types';
 
-import LanguageSelector from './language-selector';
-import ReviewForm from './review-form';
-import ReviewCriteria from './review-criteria';
+import LanguageSelector from '../language-selector';
+import ReviewForm from '../review/review-form';
+import ReviewCriteria from '../review/review-criteria';
 
 type ReviewRouteMatch = {
   language: string;

web/src/components/stats.test.tsx → web/src/components/pages/stats.test.tsx

@@ -2,7 +2,7 @@ import React from 'react';
 import * as redux from 'react-redux';
 import { screen } from '@testing-library/react';
 
-import { renderWithLocalization } from '../../tests/test-utils';
+import { renderWithLocalization } from '../../../tests/test-utils';
 
 import Stats from './stats';
 

web/src/components/stats.tsx → web/src/components/pages/stats.tsx

@@ -2,9 +2,9 @@ import React, { useEffect } from 'react';
 import { useDispatch, useSelector } from 'react-redux';
 import { Localized } from '@fluent/react';
 
-import { getStats } from '../actions/languages';
-import type { RootState } from '../types';
-import LanguageInfo from './language-info';
+import { getStats } from '../../actions/languages';
+import type { RootState } from '../../types';
+import LanguageInfo from '../language-info';
 
 export default function Stats() {
   const dispatch = useDispatch();

web/src/components/add-language-section.test.tsx → web/src/components/profile/add-language-section.test.tsx

@@ -3,7 +3,7 @@ import * as redux from 'react-redux';
 import { screen, fireEvent, act } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
 
-import { renderWithLocalization } from '../../tests/test-utils';
+import { renderWithLocalization } from '../../../tests/test-utils';
 
 import AddLanguageSection from './add-language-section';