Updated components folder structure

refs https://github.com/TryGhost/Team/issues/1858

apps/comments-ui/src/components/CommentsBox.js

@@ -1,10 +1,10 @@
 import React, {useContext, useEffect} from 'react';
 import AppContext from '../AppContext';
-import CTABox from './CTABox';
+import CTABox from './content/CTABox';
-import Form from './Form';
+import Form from './content/Form';
-import Comment from './Comment';
+import Comment from './content/Comment';
-import Pagination from './Pagination';
+import Pagination from './content/Pagination';
-import Loading from './Loading';
+import Loading from './content/Loading';
 import {ROOT_DIV_ID} from '../utils/constants';
 
 const CommentsBoxTitle = ({title, showCount, count}) => {

apps/comments-ui/src/components/Empty.js

@@ -1,11 +0,0 @@
-import React from 'react';
-
-const Empty = (props) => {
-    return (
-        <div className="px-2 pt-0 pb-10 text-center font-sans leading-normal text-neutral-400 dark:text-[rgba(255,255,255,0.85)]">
-            There are currently no comments.
-        </div>
-    );
-};
-
-export default Empty;

apps/comments-ui/src/components/PopupModal.js

@@ -1,7 +1,7 @@
 import {useContext, useEffect, useState} from 'react';
 import AppContext from '../AppContext';
 import Pages from '../pages';
-import GenericDialog from './modals/GenericDialog';
+import GenericDialog from './dialogs/GenericDialog';
 
 export default function PopupModal(props) {
     const {popup} = useContext(AppContext);

apps/comments-ui/src/components/content/Avatar.js

@@ -1,7 +1,7 @@
 import React, {useContext} from 'react';
-import AppContext from '../AppContext';
+import AppContext from '../../AppContext';
-import {getInitials} from '../utils/helpers';
+import {getInitials} from '../../utils/helpers';
-import {ReactComponent as AvatarIcon} from '../images/icons/avatar.svg';
+import {ReactComponent as AvatarIcon} from '../../images/icons/avatar.svg';
 
 function getDimensionClasses() {
     return 'w-9 h-9 sm:w-[40px] sm:h-[40px]';

apps/comments-ui/src/components/content/CTABox.js

@@ -1,5 +1,5 @@
 import {useContext} from 'react';
-import AppContext from '../AppContext';
+import AppContext from '../../AppContext';
 
 const CTABox = (props) => {
     const {accentColor, publication, member} = useContext(AppContext);

apps/comments-ui/src/components/content/Comment.js

@@ -1,13 +1,13 @@
 import React, {useContext, useState} from 'react';
 import {Transition} from '@headlessui/react';
 import {BlankAvatar, Avatar} from './Avatar';
-import Like from './Like';
+import Like from './buttons/Like';
-import Reply from './Reply';
+import Reply from './buttons/Reply';
-import More from './More';
+import More from './buttons/More';
 import Form from './Form';
 import Replies from './Replies';
-import AppContext from '../AppContext';
+import AppContext from '../../AppContext';
-import {formatRelativeTime, formatExplicitTime, isCommentPublished} from '../utils/helpers';
+import {formatRelativeTime, formatExplicitTime, isCommentPublished} from '../../utils/helpers';
 
 function AnimatedComment({comment, parent}) {
     return (

apps/comments-ui/src/components/content/Form.js

@@ -1,13 +1,13 @@
 import React, {useCallback, useContext, useEffect, useRef, useState} from 'react';
 import {Transition} from '@headlessui/react';
-import AppContext from '../AppContext';
+import AppContext from '../../AppContext';
 import {Avatar} from './Avatar';
 import {useEditor, EditorContent} from '@tiptap/react';
-import {getEditorConfig} from '../utils/editor';
+import {getEditorConfig} from '../../utils/editor';
-import {isMobile} from '../utils/helpers';
+import {isMobile} from '../../utils/helpers';
-import {ReactComponent as SpinnerIcon} from '../images/icons/spinner.svg';
+import {ReactComponent as SpinnerIcon} from '../../images/icons/spinner.svg';
-import {ReactComponent as EditIcon} from '../images/icons/edit.svg';
+import {ReactComponent as EditIcon} from '../../images/icons/edit.svg';
-import {GlobalEventBus} from '../utils/event-bus';
+import {GlobalEventBus} from '../../utils/event-bus';
 
 let formId = 0;
 

apps/comments-ui/src/components/content/Loading.js

@@ -1,5 +1,5 @@
 import React from 'react';
-import {ReactComponent as SpinnerIcon} from '../images/icons/spinner.svg';
+import {ReactComponent as SpinnerIcon} from '../../images/icons/spinner.svg';
 
 function Loading() {
     return (

apps/comments-ui/src/components/content/Pagination.js

@@ -1,5 +1,5 @@
 import React, {useContext} from 'react';
-import AppContext from '../AppContext';
+import AppContext from '../../AppContext';
 
 const Pagination = (props) => {
     const {pagination, dispatchAction} = useContext(AppContext);

apps/comments-ui/src/components/content/Replies.js

@@ -1,5 +1,5 @@
 import {useContext} from 'react';
-import AppContext from '../AppContext';
+import AppContext from '../../AppContext';
 import Comment from './Comment';
 import RepliesPagination from './RepliesPagination';
 

apps/comments-ui/src/components/content/buttons/Like.js

@@ -1,6 +1,6 @@
 import {useContext, useState} from 'react';
-import {ReactComponent as LikeIcon} from '../images/icons/like.svg';
+import {ReactComponent as LikeIcon} from '../../../images/icons/like.svg';
-import AppContext from '../AppContext';
+import AppContext from '../../../AppContext';
 
 function Like(props) {
     const {dispatchAction, member, commentsEnabled} = useContext(AppContext);

apps/comments-ui/src/components/content/buttons/More.js

@@ -1,7 +1,7 @@
 import React, {useContext, useState} from 'react';
-import CommentContextMenu from './modals/CommentContextMenu';
+import CommentContextMenu from '../context-menus/CommentContextMenu';
-import AppContext from '../AppContext';
+import AppContext from '../../../AppContext';
-import {ReactComponent as MoreIcon} from '../images/icons/more.svg';
+import {ReactComponent as MoreIcon} from '../../../images/icons/more.svg';
 
 const More = (props) => {
     const [isContextMenuOpen, setIsContextMenuOpen] = useState(false);

apps/comments-ui/src/components/content/buttons/Reply.js

@@ -1,6 +1,6 @@
 import React, {useContext} from 'react';
-import AppContext from '../AppContext';
+import AppContext from '../../../AppContext';
-import {ReactComponent as ReplyIcon} from '../images/icons/reply.svg';
+import {ReactComponent as ReplyIcon} from '../../../images/icons/reply.svg';
 
 function Reply(props) {
     const {member} = useContext(AppContext);

apps/comments-ui/src/components/content/context-menus/AdminContextMenu.js

@@ -1,5 +1,5 @@
 import React, {useContext} from 'react';
-import AppContext from '../../AppContext';
+import AppContext from '../../../AppContext';
 
 const AdminContextMenu = (props) => {
     const {dispatchAction} = useContext(AppContext);

apps/comments-ui/src/components/content/context-menus/AuthorContextMenu.js

@@ -1,5 +1,5 @@
 import React, {useContext} from 'react';
-import AppContext from '../../AppContext';
+import AppContext from '../../../AppContext';
 
 const AuthorContextMenu = (props) => {
     const {dispatchAction} = useContext(AppContext);

apps/comments-ui/src/components/content/context-menus/CommentContextMenu.js

@@ -1,5 +1,5 @@
 import React, {useContext, useEffect, useRef} from 'react';
-import AppContext from '../../AppContext';
+import AppContext from '../../../AppContext';
 import AdminContextMenu from './AdminContextMenu';
 import AuthorContextMenu from './AuthorContextMenu';
 import NotAuthorContextMenu from './NotAuthorContextMenu';

apps/comments-ui/src/components/content/context-menus/NotAuthorContextMenu.js

@@ -1,5 +1,5 @@
 import React, {useContext} from 'react';
-import AppContext from '../../AppContext';
+import AppContext from '../../../AppContext';
 
 const NotAuthorContextMenu = (props) => {
     const {dispatchAction} = useContext(AppContext);

apps/comments-ui/src/pages.js

@@ -1,5 +1,5 @@
-import AddDetailsDialog from './components/modals/AddDetailsDialog';
+import AddDetailsDialog from './components/dialogs/AddDetailsDialog';
-import ReportDialog from './components/modals/ReportDialog';
+import ReportDialog from './components/dialogs/ReportDialog';
 
 /** List of all available pages in Comments-UI, mapped to their UI component
  * Any new page added to comments-ui needs to be mapped here