diff --git a/package.json b/package.json index 1f2e2029..0e5034ca 100644 --- a/package.json +++ b/package.json @@ -19,6 +19,7 @@ "ext-name": "^5.0.0", "postcss": "^8.4.21", "react": "^18.2.0", + "react-content-loader": "^6.2.1", "react-dom": "^18.2.0", "react-draggable": "^4.4.5", "react-helmet-async": "^1.3.0", diff --git a/src/App.js b/src/App.js index b46ff819..fdeb09c9 100644 --- a/src/App.js +++ b/src/App.js @@ -2,11 +2,11 @@ import React, { useEffect } from 'react'; import { Route, Routes } from 'react-router-dom'; import { Helmet } from 'react-helmet-async'; import useBoardStore from './useBoardStore'; -import Home from './components/Home'; -import Board from './components/Board'; -import Thread from './components/Thread'; -import Catalog from './components/Catalog'; -import NotFound from './components/NotFound'; +import Home from './components/views/Home'; +import Board from './components/views/Board'; +import Thread from './components/views/Thread'; +import Catalog from './components/views/Catalog'; +import NotFound from './components/views/NotFound'; import styled, { createGlobalStyle } from 'styled-components'; import 'react-tooltip/dist/react-tooltip.css'; import 'react-toastify/dist/ReactToastify.css'; diff --git a/src/components/Board.jsx b/src/components/views/Board.jsx similarity index 99% rename from src/components/Board.jsx rename to src/components/views/Board.jsx index c3e1e5ca..40294896 100644 --- a/src/components/Board.jsx +++ b/src/components/views/Board.jsx @@ -1,18 +1,18 @@ import React, { useState, useEffect, Fragment } from 'react'; import { Link, useNavigate, useParams, useLocation } from 'react-router-dom'; -import useBoardStore from '../useBoardStore'; +import useBoardStore from '../../useBoardStore'; import { Container, NavBar, Header, Break, PostFormLink, PostFormTable, PostForm, TopBar, BoardForm } from './styles/Board.styled'; -import ImageBanner from './ImageBanner'; -import CaptchaModal from './CaptchaModal'; -import ReplyModal from './ReplyModal'; -import SettingsModal from './SettingsModal'; +import ImageBanner from '../ImageBanner'; +import CaptchaModal from '../CaptchaModal'; +import ReplyModal from '../ReplyModal'; +import SettingsModal from '../SettingsModal'; import { useFeed, useAccountsActions } from '@plebbit/plebbit-react-hooks'; import InfiniteScroll from 'react-infinite-scroller'; import { Tooltip } from 'react-tooltip'; -import onError from '../utils/onError'; -import onSuccess from '../utils/onSuccess'; -import getDate from '../utils/getDate'; -import renderComments from '../utils/renderComments'; +import onError from '../../utils/onError'; +import onSuccess from '../../utils/onSuccess'; +import getDate from '../../utils/getDate'; +import renderComments from '../../utils/renderComments'; const Board = ({ setBodyStyle }) => { diff --git a/src/components/Catalog.jsx b/src/components/views/Catalog.jsx similarity index 98% rename from src/components/Catalog.jsx rename to src/components/views/Catalog.jsx index b6e86801..f0bd33cf 100644 --- a/src/components/Catalog.jsx +++ b/src/components/views/Catalog.jsx @@ -1,15 +1,15 @@ import React, { useState, useEffect } from 'react'; import { Link, useNavigate, useParams, useLocation } from 'react-router-dom'; -import useBoardStore from '../useBoardStore'; +import useBoardStore from '../../useBoardStore'; import { Container, NavBar, Header, Break, PostForm, PostFormLink, PostFormTable } from './styles/Board.styled'; import { TopBar } from './styles/Thread.styled'; import { Threads } from './styles/Catalog.styled'; import { useFeed, useAccountsActions } from '@plebbit/plebbit-react-hooks'; -import ImageBanner from './ImageBanner'; -import CaptchaModal from './CaptchaModal'; -import SettingsModal from './SettingsModal'; -import onError from '../utils/onError'; -import onSuccess from '../utils/onSuccess'; +import ImageBanner from '../ImageBanner'; +import CaptchaModal from '../CaptchaModal'; +import SettingsModal from '../SettingsModal'; +import onError from '../../utils/onError'; +import onSuccess from '../../utils/onSuccess'; import InfiniteScroll from 'react-infinite-scroller'; diff --git a/src/components/Home.jsx b/src/components/views/Home.jsx similarity index 98% rename from src/components/Home.jsx rename to src/components/views/Home.jsx index 86697a20..91dbbd80 100644 --- a/src/components/Home.jsx +++ b/src/components/views/Home.jsx @@ -1,5 +1,5 @@ import React, { useState, useEffect } from 'react'; -import useBoardStore from '../useBoardStore'; +import useBoardStore from '../../useBoardStore'; import { Link } from 'react-router-dom'; import { Container, Header, Logo, Page, Search, About, AboutTitle, AboutContent, Boards, BoardsTitle, BoardsContent, Footer } from './styles/Home.styled'; diff --git a/src/components/NotFound.jsx b/src/components/views/NotFound.jsx similarity index 95% rename from src/components/NotFound.jsx rename to src/components/views/NotFound.jsx index 432ed79a..36641cb3 100644 --- a/src/components/NotFound.jsx +++ b/src/components/views/NotFound.jsx @@ -1,5 +1,5 @@ import React, { useEffect } from 'react'; -import useBoardStore from '../useBoardStore'; +import useBoardStore from '../../useBoardStore'; import { Link } from "react-router-dom"; import { Container, Header, Logo, Page, Boards, BoardsTitle } from './styles/Home.styled'; diff --git a/src/components/Thread.jsx b/src/components/views/Thread.jsx similarity index 99% rename from src/components/Thread.jsx rename to src/components/views/Thread.jsx index 24fddb9f..0f3c617b 100644 --- a/src/components/Thread.jsx +++ b/src/components/views/Thread.jsx @@ -1,18 +1,18 @@ import React, { useState, useEffect } from 'react'; import { Link, useNavigate, useParams, useLocation } from 'react-router-dom'; -import useBoardStore from '../useBoardStore'; +import useBoardStore from '../../useBoardStore'; import { Container, NavBar, Header, Break, PostForm, PostFormTable, BoardForm } from './styles/Board.styled'; import { ReplyFormLink, TopBar, BottomBar } from './styles/Thread.styled'; import { useComment, useAccountsActions } from '@plebbit/plebbit-react-hooks'; -import ImageBanner from './ImageBanner'; -import CaptchaModal from './CaptchaModal'; -import ReplyModal from './ReplyModal'; -import SettingsModal from './SettingsModal'; +import ImageBanner from '../ImageBanner'; +import CaptchaModal from '../CaptchaModal'; +import ReplyModal from '../ReplyModal'; +import SettingsModal from '../SettingsModal'; import { Tooltip } from 'react-tooltip'; -import onError from '../utils/onError'; -import onSuccess from '../utils/onSuccess'; -import getDate from '../utils/getDate'; -import renderThreadComments from '../utils/renderThreadComments'; +import onError from '../../utils/onError'; +import onSuccess from '../../utils/onSuccess'; +import getDate from '../../utils/getDate'; +import renderThreadComments from '../../utils/renderThreadComments'; const Thread = ({ setBodyStyle }) => { diff --git a/src/components/styles/Board.styled.jsx b/src/components/views/styles/Board.styled.jsx similarity index 100% rename from src/components/styles/Board.styled.jsx rename to src/components/views/styles/Board.styled.jsx diff --git a/src/components/styles/Catalog.styled.jsx b/src/components/views/styles/Catalog.styled.jsx similarity index 100% rename from src/components/styles/Catalog.styled.jsx rename to src/components/views/styles/Catalog.styled.jsx diff --git a/src/components/styles/Home.styled.jsx b/src/components/views/styles/Home.styled.jsx similarity index 100% rename from src/components/styles/Home.styled.jsx rename to src/components/views/styles/Home.styled.jsx diff --git a/src/components/styles/Thread.styled.jsx b/src/components/views/styles/Thread.styled.jsx similarity index 100% rename from src/components/styles/Thread.styled.jsx rename to src/components/views/styles/Thread.styled.jsx diff --git a/yarn.lock b/yarn.lock index 35acf469..471e2856 100644 --- a/yarn.lock +++ b/yarn.lock @@ -9970,6 +9970,11 @@ react-app-polyfill@^3.0.0: regenerator-runtime "^0.13.9" whatwg-fetch "^3.6.2" +react-content-loader@^6.2.1: + version "6.2.1" + resolved "https://registry.yarnpkg.com/react-content-loader/-/react-content-loader-6.2.1.tgz#8feb733c2d2495002e1b216f13707f2b5f2a8ead" + integrity sha512-6ONbFX+Hi3SHuP66JB8CPvJn372pj+qwltJV0J8z/8MFrq98I1cbFdZuhDWeQXu3CFxiiDTXJn7DFxx2ZvrO7g== + react-dev-utils@^12.0.1: version "12.0.1" resolved "https://registry.yarnpkg.com/react-dev-utils/-/react-dev-utils-12.0.1.tgz#ba92edb4a1f379bd46ccd6bcd4e7bc398df33e73"