Ref/hy/model separate

src/App.tsx

@@ -1,48 +1,43 @@
-import React, { useEffect } from 'react';
-import { Redirect, Route } from 'react-router-dom';
 import { IonApp, IonRouterOutlet } from '@ionic/react';
 import { IonReactRouter } from '@ionic/react-router';
-import Landing from './pages/Landing';
-import Login from './pages/Login';
-import Home from './pages/Home';
-import RegisterLanding from './pages/RegisterLanding';
-import RegisterForm from './pages/RegisterForm';
-import PostView from './pages/PostView';
-
-/* Redux for User */
-import { clearUser, setUser } from './features/User/UserStore';
-import { useDispatch } from 'react-redux';
-
 /* Core CSS required for Ionic components to work properly */
 import '@ionic/react/css/core.css';
-
+import '@ionic/react/css/display.css';
+import '@ionic/react/css/flex-utils.css';
+import '@ionic/react/css/float-elements.css';
 /* Basic CSS for apps built with Ionic */
 import '@ionic/react/css/normalize.css';
-import '@ionic/react/css/structure.css';
-import '@ionic/react/css/typography.css';
-
 /* Optional CSS utils that can be commented out */
 import '@ionic/react/css/padding.css';
-import '@ionic/react/css/float-elements.css';
+import '@ionic/react/css/structure.css';
 import '@ionic/react/css/text-alignment.css';
 import '@ionic/react/css/text-transformation.css';
-import '@ionic/react/css/flex-utils.css';
-import '@ionic/react/css/display.css';
-
-/* Theme variables */
-import './theme/variables.scss';
+import '@ionic/react/css/typography.css';
+import React, { useEffect } from 'react';
+import { useDispatch } from 'react-redux';
+import { Redirect, Route } from 'react-router-dom';
+import unProtectedRoutes from './pages/data/router.data';
 import { PrivateRoute } from './components/PrivateRoute';
-import WritePostView from './pages/WritePost';
 import TitleBar from './components/TitleBar';
-import unProtectedRoutes from './app/routing';
-import { Auth } from './Models/Auth';
+/* Redux for User */
+import { clearUser, setUser } from './stores/users/user.store';
+import Home from './pages/HomePage';
+import Landing from './pages/LandingPage';
+import Login from './pages/LoginPage';
+import PostView from './pages/PostView';
 import ProfileView from './pages/ProfileView';
+import RegisterFormPage from './pages/RegisterFormPage';
+import RegisterLandingPage from './pages/RegisterLandingPage';
+import WritePostView from './pages/WritePostView';
+import FirebaseAuthService from './services/FirebaseAuth.service';
+/* Theme variables */
+import './styles/theme/variables.scss';
 
 const App: React.FC = () => {
     const dispatch = useDispatch();
 
     useEffect(() => {
-        const unSubscribe = Auth.onAuthStateChange((user) => {
+        const unSubscribe = FirebaseAuthService.onAuthStateChange((user) => {
             if (user) {
                 console.log('Signed in');
                 dispatch(setUser(user)); // Push user to redux
@@ -65,8 +60,8 @@ const App: React.FC = () => {
                     <PrivateRoute path="/home" component={Home} exact={true} />
                     <Route path="/post/:id" component={PostView} />
                     <Route path="/login" component={Login} exact={true} />
-                    <Route path="/register" component={RegisterLanding} exact={true} />
-                    <Route path="/emailRegister" component={RegisterForm} exact={true} />
+                    <Route path="/register" component={RegisterLandingPage} exact={true} />
+                    <Route path="/emailRegister" component={RegisterFormPage} exact={true} />
                     <Route path="/writePost" component={WritePostView} exact={true} />
                     <Route path="/u/:uid" component={ProfileView} exact={true} />
                     <Route path="/" render={() => <Redirect to="/landing" />} exact={true} />

src/components/CommentCompose.tsx

@@ -1,12 +1,12 @@
 import React, { useEffect, useState } from 'react';
 import { IonAvatar, IonButton, IonCard, IonCardContent, IonIcon, IonTextarea } from '@ionic/react';
-import './CommentCompose.scss';
-import { IComment } from '../Models/DocTypes';
-import { db, FieldValue, Timestamp } from '../Models/firebase';
+import '../styles/components/CommentCompose.scss';
+import { IComment } from '../services/models/DocTypes.model';
+import { db, FieldValue, Timestamp } from '../services/data/firebase';
 import { arrowForward } from 'ionicons/icons';
 import PropTypes from 'prop-types';
 import { useReplyCommentPair } from '../contexts/replyComment';
-import { selectUser } from '../features/User/UserStore';
+import { selectUser } from '../stores/users/user.store';
 import { useSelector } from 'react-redux';
 
 const CommentCompose: React.FC<{ postId: string }> = (props) => {

src/components/CommentView.tsx

@@ -1,6 +1,6 @@
 import React from 'react';
-import './CommentView.scss';
-import Comment from '../Models/Comment';
+import '../styles/components/CommentView.scss';
+import Comment from '../services/FirebaseComment.service';
 import { IonItem, IonAvatar, IonLabel, IonText, IonIcon } from '@ionic/react';
 import { arrowUndo } from 'ionicons/icons';
 import { useReplyCommentPair } from '../contexts/replyComment';

src/components/Footer.tsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import './Footer.scss';
+import '../styles/components/Footer.scss';
 import { IonText, IonImg, IonFooter, IonToolbar, IonGrid, IonRow, IonCol, IonRouterLink } from '@ionic/react';
 
 const Footer: React.FC = () => {

src/components/HomePostView.tsx

@@ -1,19 +1,19 @@
 import { IonContent, IonLabel, IonSelect, IonSelectOption, IonToast } from '@ionic/react';
 import React, { useEffect, useState } from 'react';
 import { useSelector } from 'react-redux';
-import { toast } from '../app/toast';
+import { toast } from './data/toast';
 import PostContainer from '../components/PostContainer';
-import { selectUser } from '../features/User/UserStore';
-import { PostAggregations } from '../Models/DocTypes';
-import { PostCategory } from '../Models/Enums';
-import { db, QueryDocumentSnapshot, QuerySnapshot, Timestamp } from '../Models/firebase';
-import PostFirebase from '../Models/Post.firebase';
-import PostAttachment from '../Models/PostAttachment';
-import User, { UserError } from '../Models/User';
-import './HomePostView.scss';
+import { selectUser } from '../stores/users/user.store';
+import { PostAggregations } from '../services/models/DocTypes.model';
+import { PostCategory } from '../services/models/Enums.model';
+import { db, QueryDocumentSnapshot, QuerySnapshot, Timestamp } from '../services/data/firebase';
+import FirebasePostService from '../services/FirebasePost.service';
+import PostAttachment from '../services/PostAttachment.service';
+import User, { UserError } from '../services/User.service';
+import '../styles/components/HomePostView.scss';
 import PostSkeleton from './PostContainerSkeleton';
 
-export class HomePost extends PostFirebase {
+export class HomePost extends FirebasePostService {
     username?: string;
 
     constructor(
@@ -84,7 +84,10 @@ const HomePostView: React.FC = () => {
          * Gets posts that have a Timestamp
          *
          */
-        const postsCollection = db.db.collection('posts').orderBy('timestamp', 'desc').withConverter(PostFirebase);
+        const postsCollection = db.db
+            .collection('posts')
+            .orderBy('timestamp', 'desc')
+            .withConverter(FirebasePostService);
         if (postFilters.length !== 0) {
             return postsCollection.where('category', 'in', postFilters).onSnapshot({ next: handleSnapshot });
         } else {
@@ -158,7 +161,11 @@ const HomePostView: React.FC = () => {
                                     />
                                 </PostContainer>
                             )}
-                            {v.data.postReference === undefined && <PostContainer key={v.id} postData={v.data} />}
+                            {v.data.postReference === undefined && (
+                                <PostContainer key={v.id} postData={v.data}>
+                                    <></>
+                                </PostContainer>
+                            )}
                         </>
                     );
                 })

src/components/LandingFeatureBox.tsx

@@ -1,6 +1,6 @@
 import React from 'react';
 import { IonGrid, IonRow, IonCol, IonText, IonHeader, IonImg } from '@ionic/react';
-import '../pages/Landing.scss';
+import '../styles/pages/Landing.scss';
 
 const LandingFeatureBox: React.FC = () => {
     return (

src/components/LandingInfo.tsx

@@ -1,6 +1,6 @@
 import React from 'react';
-import './LandingInfo.scss';
-import '../pages/Landing.scss';
+import '../styles/components/LandingInfo.scss';
+import '../styles/pages/Landing.scss';
 import { IonButton, IonGrid, IonRow, IonCol, IonText, IonHeader, IonImg } from '@ionic/react';
 
 const LandingInfo: React.FC = () => {

src/components/LandingRegisterPrompt.tsx

@@ -1,6 +1,6 @@
 import React from 'react';
 import { IonButton, IonGrid, IonRow, IonCol, IonHeader } from '@ionic/react';
-import '../pages/Landing.scss';
+import '../styles/pages/Landing.scss';
 
 const LandingRegisterPrompt: React.FC = () => {
     return (

src/components/PostComments.tsx

@@ -1,6 +1,6 @@
 import React from 'react';
-import './PostComments.scss';
-import Comment from '../Models/Comment';
+import '../styles/components/PostComments.scss';
+import Comment from '../services/FirebaseComment.service';
 import CommentView from './CommentView';
 import { IonList, IonLabel, IonListHeader } from '@ionic/react';
 import PropTypes from 'prop-types';

src/components/PostContainer.tsx

@@ -18,12 +18,12 @@ import { ellipsisVertical, share, trash } from 'ionicons/icons';
 import React, { ReactElement, useState } from 'react';
 import { useSelector } from 'react-redux';
 import { useHistory } from 'react-router';
-import { toast } from '../app/toast';
-import { selectUser } from '../features/User/UserStore';
-import { IPost } from '../Models/DocTypes';
-import { db, Timestamp } from '../Models/firebase';
+import { toast } from './data/toast';
+import { selectUser } from '../stores/users/user.store';
+import { IPost } from '../services/models/DocTypes.model';
+import { db, Timestamp } from '../services/data/firebase';
 import { HomePost } from './HomePostView';
-import './PostContainer.scss';
+import '../styles/components/PostContainer.scss';
 
 interface ContainerProps {
     postData: HomePost;

src/components/PostContainerSkeleton.tsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import './PostContainer.scss';
+import '../styles/components/PostContainer.scss';
 import {
     IonCard,
     IonCardHeader,

src/components/PrivateRoute.tsx

@@ -1,8 +1,8 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import Login from '../pages/Login';
+import Login from '../pages/LoginPage';
 import { useSelector } from 'react-redux';
-import { selectUser } from '../features/User/UserStore';
+import { selectUser } from '../stores/users/user.store';
 
 type PrivateRouteTypes = {
     component: React.FC;

src/components/RegisterFormComp.tsx

@@ -1,13 +1,12 @@
 import React from 'react';
-import './RegisterLanding.scss';
+import '../styles/components/RegisterLanding.scss';
 import { IonButton, IonInput, IonTitle, IonContent } from '@ionic/react';
 import { InputChangeEventDetail } from '@ionic/core';
 import { useState } from 'react';
 import Select from 'react-select';
-import '../pages/RegisterMain.scss';
 import majors from '../majors';
-import { toast } from '../app/toast';
-import { Auth } from '../Models/Auth';
+import { toast } from './data/toast';
+import FirebaseAuthService from '../services/FirebaseAuth.service';
 import Footer from '../components/Footer';
 
 const RegisterForm: React.FC = () => {
@@ -22,7 +21,7 @@ const RegisterForm: React.FC = () => {
 
     async function RegisterUser() {
         if (userState.password == userState.cPassword) {
-            if (await Auth.createWithEmail(userState.email, userState.password, userState)) {
+            if (await FirebaseAuthService.createWithEmail(userState.email, userState.password, userState)) {
             } else {
                 toast('Oops...', 'Sign up failed');
             }

src/components/RegisterLandingComp.tsx

@@ -1,7 +1,6 @@
 import React from 'react';
-import './RegisterLanding.scss';
+import '../styles/components/RegisterLanding.scss';
 import { IonButton, IonRow, IonText } from '@ionic/react';
-import '../pages/RegisterMain.scss';
 import Footer from '../components/Footer';
 
 const RegisterLanding: React.FC = () => {

src/components/TitleBar.tsx

@@ -19,16 +19,16 @@ import {
     IonRouterLink,
 } from '@ionic/react';
 import { ellipseOutline, homeOutline, logOutOutline } from 'ionicons/icons';
-import { toast } from '../app/toast';
-import { Auth } from '../Models/Auth';
+import { toast } from './data/toast';
+import FirebaseAuthService from '../services/FirebaseAuth.service';
 import { useSelector } from 'react-redux';
-import { selectUser } from '../features/User/UserStore';
+import { selectUser } from '../stores/users/user.store';
 
 const TitleBar: React.FC = () => {
     const user = useSelector(selectUser);
 
     const handleSignOut = async () => {
-        await Auth.signOut();
+        await FirebaseAuthService.signOut();
         toast('You have signed out :(', 'Signed out...');
 
         location.href = '/login';

src/components/WritePost.tsx

@@ -10,15 +10,15 @@ import {
     IonSelectOption,
     IonTextarea,
 } from '@ionic/react';
-import { db, Timestamp } from '../Models/firebase';
-import { IPost } from '../Models/DocTypes';
+import { IPost } from '../services/models/DocTypes.model';
 import { InputChangeEventDetail } from '@ionic/core';
 import { loadingComponent } from './Loading';
-import { PostCategory } from '../Models/Enums';
+import { PostCategory } from '../services/models/Enums.model';
 import { useHistory } from 'react-router';
-import './HomePostView.scss';
+import '../styles/components/HomePostView.scss';
 import { useSelector } from 'react-redux';
-import { selectUser } from '../features/User/UserStore';
+import { selectUser } from '../stores/users/user.store';
+import { db, Timestamp } from '../services/data/firebase';
 
 const WritePost: React.FC = () => {
     const [content, setContent] = useState('');