From ddfd102177dbde8b615f967bbf4b5132ba1cd747 Mon Sep 17 00:00:00 2001 From: Hy Huynh Date: Thu, 7 Apr 2022 21:16:16 -0600 Subject: [PATCH 1/5] organize services folder --- src/App.tsx | 4 ++-- src/components/CommentCompose.tsx | 4 ++-- src/components/CommentView.tsx | 2 +- src/components/HomePostView.tsx | 19 +++++++++++-------- src/components/PostComments.tsx | 2 +- src/components/PostContainer.tsx | 4 ++-- src/components/RegisterFormComp.tsx | 4 ++-- src/components/TitleBar.tsx | 4 ++-- src/components/WritePost.tsx | 6 +++--- src/features/User/UserStore.tsx | 2 +- src/features/counter/UserStore.tsx | 2 +- src/pages/Login.tsx | 8 ++++---- src/pages/PostView.tsx | 6 +++--- src/pages/ProfileView.tsx | 8 ++++---- .../FirebaseAuth.service.ts} | 18 +++++++++--------- .../FirebaseComment.service.ts} | 16 ++++++++-------- .../FirebaseDocument.service.ts} | 4 ++-- .../FirebasePost.service.ts} | 16 ++++++++-------- .../Firestore.service.ts} | 4 ++-- .../PostAttachment.service.ts} | 2 +- .../PrimaryUser.service.ts} | 6 +++--- .../User.ts => services/User.service.ts} | 6 +++--- src/{Models => services/data}/firebase.ts | 4 ++-- .../models/DocTypes.model.ts} | 4 ++-- .../models/Enums.model.ts} | 0 25 files changed, 79 insertions(+), 76 deletions(-) rename src/{Models/Auth.ts => services/FirebaseAuth.service.ts} (91%) rename src/{Models/Comment.ts => services/FirebaseComment.service.ts} (84%) rename src/{Models/FirebaseDocument.ts => services/FirebaseDocument.service.ts} (93%) rename src/{Models/Post.firebase.ts => services/FirebasePost.service.ts} (85%) rename src/{Models/firestore.ts => services/Firestore.service.ts} (95%) rename src/{Models/PostAttachment.ts => services/PostAttachment.service.ts} (96%) rename src/{Models/PrimaryUser.ts => services/PrimaryUser.service.ts} (90%) rename src/{Models/User.ts => services/User.service.ts} (95%) rename src/{Models => services/data}/firebase.ts (95%) rename src/{Models/DocTypes.ts => services/models/DocTypes.model.ts} (89%) rename src/{Models/Enums.ts => services/models/Enums.model.ts} (100%) diff --git a/src/App.tsx b/src/App.tsx index 8dd3d49..8a04a0d 100644 --- a/src/App.tsx +++ b/src/App.tsx @@ -35,14 +35,14 @@ 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'; +import { FirebaseAuthService } from './services/FirebaseAuth.service'; import ProfileView from './pages/ProfileView'; 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 diff --git a/src/components/CommentCompose.tsx b/src/components/CommentCompose.tsx index 9e455b1..f154db5 100644 --- a/src/components/CommentCompose.tsx +++ b/src/components/CommentCompose.tsx @@ -1,8 +1,8 @@ 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 { 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'; diff --git a/src/components/CommentView.tsx b/src/components/CommentView.tsx index e24ae70..f54cc8e 100644 --- a/src/components/CommentView.tsx +++ b/src/components/CommentView.tsx @@ -1,6 +1,6 @@ import React from 'react'; import './CommentView.scss'; -import Comment from '../Models/Comment'; +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'; diff --git a/src/components/HomePostView.tsx b/src/components/HomePostView.tsx index cf72dee..c91cd4c 100644 --- a/src/components/HomePostView.tsx +++ b/src/components/HomePostView.tsx @@ -4,16 +4,16 @@ import { useSelector } from 'react-redux'; import { toast } from '../app/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 { 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 './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 { diff --git a/src/components/PostComments.tsx b/src/components/PostComments.tsx index 1d1b2ba..4893a68 100644 --- a/src/components/PostComments.tsx +++ b/src/components/PostComments.tsx @@ -1,6 +1,6 @@ import React from 'react'; import './PostComments.scss'; -import Comment from '../Models/Comment'; +import Comment from '../services/FirebaseComment.service'; import CommentView from './CommentView'; import { IonList, IonLabel, IonListHeader } from '@ionic/react'; import PropTypes from 'prop-types'; diff --git a/src/components/PostContainer.tsx b/src/components/PostContainer.tsx index 1c27538..34b1f36 100644 --- a/src/components/PostContainer.tsx +++ b/src/components/PostContainer.tsx @@ -20,8 +20,8 @@ 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 { IPost } from '../services/models/DocTypes.model'; +import { db, Timestamp } from '../services/data/firebase'; import { HomePost } from './HomePostView'; import './PostContainer.scss'; diff --git a/src/components/RegisterFormComp.tsx b/src/components/RegisterFormComp.tsx index 1c79772..818b65f 100644 --- a/src/components/RegisterFormComp.tsx +++ b/src/components/RegisterFormComp.tsx @@ -7,7 +7,7 @@ import Select from 'react-select'; import '../pages/RegisterMain.scss'; import majors from '../majors'; import { toast } from '../app/toast'; -import { Auth } from '../Models/Auth'; +import { FirebaseAuthService } from '../services/FirebaseAuth.service'; import Footer from '../components/Footer'; const RegisterForm: React.FC = () => { @@ -22,7 +22,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'); } diff --git a/src/components/TitleBar.tsx b/src/components/TitleBar.tsx index d2ba924..00fd130 100644 --- a/src/components/TitleBar.tsx +++ b/src/components/TitleBar.tsx @@ -20,7 +20,7 @@ import { } from '@ionic/react'; import { ellipseOutline, homeOutline, logOutOutline } from 'ionicons/icons'; import { toast } from '../app/toast'; -import { Auth } from '../Models/Auth'; +import { FirebaseAuthService } from '../services/FirebaseAuth.service'; import { useSelector } from 'react-redux'; import { selectUser } from '../features/User/UserStore'; @@ -28,7 +28,7 @@ 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'; diff --git a/src/components/WritePost.tsx b/src/components/WritePost.tsx index fb94bea..510e42e 100644 --- a/src/components/WritePost.tsx +++ b/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 { useSelector } from 'react-redux'; import { selectUser } from '../features/User/UserStore'; +import { db, Timestamp } from '../services/data/firebase'; const WritePost: React.FC = () => { const [content, setContent] = useState(''); diff --git a/src/features/User/UserStore.tsx b/src/features/User/UserStore.tsx index 833dba5..7bb966b 100644 --- a/src/features/User/UserStore.tsx +++ b/src/features/User/UserStore.tsx @@ -1,6 +1,6 @@ import { createSlice, PayloadAction } from '@reduxjs/toolkit'; import { RootState } from '../../app/store'; -import PrimaryUser from '../../Models/PrimaryUser'; +import PrimaryUser from '../../services/PrimaryUser.service'; interface UserState { user: PrimaryUser | undefined; diff --git a/src/features/counter/UserStore.tsx b/src/features/counter/UserStore.tsx index 4ede7e9..70ce8f2 100644 --- a/src/features/counter/UserStore.tsx +++ b/src/features/counter/UserStore.tsx @@ -1,6 +1,6 @@ import { createSlice, PayloadAction } from '@reduxjs/toolkit'; // import { AppThunk, RootState } from '../../app/store'; -import User from '../../Models/User'; +import User from '../../services/User.service'; interface UserState { user: User | undefined; diff --git a/src/pages/Login.tsx b/src/pages/Login.tsx index a8e652b..8161317 100644 --- a/src/pages/Login.tsx +++ b/src/pages/Login.tsx @@ -3,7 +3,7 @@ import { InputChangeEventDetail } from '@ionic/core'; import { IonContent, IonPage, IonInput, IonButton, IonRouterLink } from '@ionic/react'; import './Login.scss'; import { toast } from '../app/toast'; -import { Auth } from '../Models/Auth'; +import { FirebaseAuthService } from '../services/FirebaseAuth.service'; import Footer from '../components/Footer'; /** @@ -18,7 +18,7 @@ const Login: React.FC = () => { * @author Carter Zimmer */ async function handleSubmit() { - const user = await Auth.signInWithEmail(userState.email, userState.password); + const user = await FirebaseAuthService.signInWithEmail(userState.email, userState.password); if (user) { toast('Yay!', 'login success'); } else { @@ -48,12 +48,12 @@ const Login: React.FC = () => { Sign In
- + Sign in with Google
- + Sign in with Microsoft
diff --git a/src/pages/PostView.tsx b/src/pages/PostView.tsx index 14f541a..cc1ded1 100644 --- a/src/pages/PostView.tsx +++ b/src/pages/PostView.tsx @@ -16,12 +16,12 @@ import { import './PostView.scss'; import PostComments from '../components/PostComments'; import CommentCompose from '../components/CommentCompose'; -import Post from '../Models/Post.firebase'; +import Post from '../services/FirebasePost.service'; import { useParams } from 'react-router-dom'; -import Comment from '../Models/Comment'; +import Comment from '../services/FirebaseComment.service'; import { useSelector } from 'react-redux'; import { selectUser } from '../features/User/UserStore'; -import { db } from '../Models/firebase'; +import { db } from '../services/data/firebase'; import { ReplyCommentPairContext } from '../contexts/replyComment'; import _ from 'lodash'; diff --git a/src/pages/ProfileView.tsx b/src/pages/ProfileView.tsx index 1b6f669..38a8dc7 100644 --- a/src/pages/ProfileView.tsx +++ b/src/pages/ProfileView.tsx @@ -5,10 +5,10 @@ import { useParams } from 'react-router-dom'; import Footer from '../components/Footer'; import PostContainer from '../components/PostContainer'; import { selectUser } from '../features/User/UserStore'; -import { db } from '../Models/firebase'; -import Post from '../Models/Post.firebase'; -import PrimaryUser from '../Models/PrimaryUser'; -import User from '../Models/User'; +import { db } from '../services/data/firebase'; +import Post from '../services/FirebasePost.service'; +import PrimaryUser from '../services/PrimaryUser.service'; +import User from '../services/User.service'; import './ProfileView.scss'; const ProfileView: React.FC = () => { diff --git a/src/Models/Auth.ts b/src/services/FirebaseAuth.service.ts similarity index 91% rename from src/Models/Auth.ts rename to src/services/FirebaseAuth.service.ts index cc1eb92..11102e1 100644 --- a/src/Models/Auth.ts +++ b/src/services/FirebaseAuth.service.ts @@ -6,12 +6,12 @@ import { FirebaseUser, GoogleProvider, OAuthProvider, -} from './firebase'; -import PrimaryUser from './PrimaryUser'; +} from './data/firebase'; +import PrimaryUser from './PrimaryUser.service'; -export class Auth { +export class FirebaseAuthService { private static auth = FirebaseAuth; - protected static user = Auth.auth.currentUser; + protected static user = FirebaseAuthService.auth.currentUser; public static get googleProvider(): OAuthProvider { const provider = new GoogleProvider(); provider.addScope('https://www.googleapis.com/auth/calendar.events'); @@ -28,10 +28,10 @@ export class Auth { * signs a user in using google redirect. Doesn't work properly */ static signInWithGoogle = async (): Promise => { - const googleProvider = Auth.googleProvider; + const googleProvider = FirebaseAuthService.googleProvider; try { - const res = await Auth.auth.signInWithPopup(googleProvider); + const res = await FirebaseAuthService.auth.signInWithPopup(googleProvider); const user = res.user; if (res.additionalUserInfo?.isNewUser && user && user.displayName && user.email) { @@ -60,10 +60,10 @@ export class Auth { * signs a user in using google redirect. Doesn't work properly */ static signInWithMicrosoft = async (): Promise => { - const provider = Auth.microsoftProvider; + const provider = FirebaseAuthService.microsoftProvider; try { - const res = await Auth.auth.signInWithPopup(provider); + const res = await FirebaseAuthService.auth.signInWithPopup(provider); const user = res.user; if (res.additionalUserInfo?.isNewUser && user && user.displayName && user.email) { @@ -165,7 +165,7 @@ export class Auth { error?: (e: FirebaseAuthError) => void, completed?: FirebaseUnsubscribe, ): FirebaseUnsubscribe { - return Auth.auth.onAuthStateChanged( + return FirebaseAuthService.auth.onAuthStateChanged( async (user) => { if (user) { const primaryUser = await PrimaryUser.fromUser(user); diff --git a/src/Models/Comment.ts b/src/services/FirebaseComment.service.ts similarity index 84% rename from src/Models/Comment.ts rename to src/services/FirebaseComment.service.ts index c7c6b08..cf371ed 100644 --- a/src/Models/Comment.ts +++ b/src/services/FirebaseComment.service.ts @@ -1,12 +1,12 @@ -import { CommentAggregations, IComment, IUser } from './DocTypes'; -import { QueryDocumentSnapshot, SnapshotOptions, Timestamp } from './firebase'; -import FirebaseDocument from './FirebaseDocument'; -import User from './User'; -export default class Comment extends FirebaseDocument { +import { CommentAggregations, IComment, IUser } from './models/DocTypes.model'; +import { QueryDocumentSnapshot, SnapshotOptions, Timestamp } from './data/firebase'; +import FirebaseDocument from './FirebaseDocument.service'; +import User from './User.service'; +export default class FirebaseCommentService extends FirebaseDocument { /** * Comment class for holding comments * @author Robert Brown, Ratik Kapoor - * @since 0.0.4 + * @since 0.0.4z */ id: string; @@ -56,7 +56,7 @@ export default class Comment extends FirebaseDocument { }; } - public static toFirestore(comment: Comment): IComment { + public static toFirestore(comment: FirebaseCommentService): IComment { return comment.toJson(); } @@ -67,7 +67,7 @@ export default class Comment extends FirebaseDocument { * @param snapshot A QueryDocumentSnapshot containing your data and metadata. * @param options The SnapshotOptions from the initial call to `data()`. */ - public static fromFirestore(snapshot: QueryDocumentSnapshot, options?: SnapshotOptions): Comment { + public static fromFirestore(snapshot: QueryDocumentSnapshot, options?: SnapshotOptions): FirebaseCommentService { const data = snapshot.data(options) as IComment; const id = snapshot.id; console.log(data); diff --git a/src/Models/FirebaseDocument.ts b/src/services/FirebaseDocument.service.ts similarity index 93% rename from src/Models/FirebaseDocument.ts rename to src/services/FirebaseDocument.service.ts index defc303..4a4c2e8 100644 --- a/src/Models/FirebaseDocument.ts +++ b/src/services/FirebaseDocument.service.ts @@ -1,6 +1,6 @@ -import { Timestamp } from './firebase'; +import { Timestamp } from './data/firebase'; -export default class FirebaseDocument { +export default class FirebaseDocumentService { /** * *@author Mohamad Abdel Rida diff --git a/src/Models/Post.firebase.ts b/src/services/FirebasePost.service.ts similarity index 85% rename from src/Models/Post.firebase.ts rename to src/services/FirebasePost.service.ts index fd40f6e..6ec5abb 100644 --- a/src/Models/Post.firebase.ts +++ b/src/services/FirebasePost.service.ts @@ -1,9 +1,9 @@ -import { IPost, PostAggregations } from './DocTypes'; -import { PostCategory } from './Enums'; -import { QueryDocumentSnapshot, SnapshotOptions, Timestamp } from './firebase'; -import FirebaseDocument from './FirebaseDocument'; -import PostAttachment from './PostAttachment'; -export default class PostFirebase extends FirebaseDocument { +import { IPost, PostAggregations } from './models/DocTypes.model'; +import { PostCategory } from './models/Enums.model'; +import { QueryDocumentSnapshot, SnapshotOptions, Timestamp } from './data/firebase'; +import FirebaseDocument from './FirebaseDocument.service'; +import PostAttachment from './PostAttachment.service'; +export default class FirebasePostService extends FirebaseDocument { id: string; postReference?: string; content: string; @@ -45,7 +45,7 @@ export default class PostFirebase extends FirebaseDocument { this.aggregations = aggregations; } - public static toFirestore(post: PostFirebase): IPost { + public static toFirestore(post: FirebasePostService): IPost { return { uid: post.uid, title: post.title, @@ -66,7 +66,7 @@ export default class PostFirebase extends FirebaseDocument { * @param snapshot A QueryDocumentSnapshot containing your data and metadata. * @param options The SnapshotOptions from the initial call to `data()`. */ - public static fromFirestore(snapshot: QueryDocumentSnapshot, options?: SnapshotOptions): PostFirebase { + public static fromFirestore(snapshot: QueryDocumentSnapshot, options?: SnapshotOptions): FirebasePostService { const data = snapshot.data(options) as IPost; const id = snapshot.id; diff --git a/src/Models/firestore.ts b/src/services/Firestore.service.ts similarity index 95% rename from src/Models/firestore.ts rename to src/services/Firestore.service.ts index 06d2aa1..ebf0b35 100644 --- a/src/Models/firestore.ts +++ b/src/services/Firestore.service.ts @@ -1,6 +1,6 @@ -import { DocumentData, Firestore, WhereFilterOp } from './firebase'; +import { DocumentData, Firestore, WhereFilterOp } from './data/firebase'; -export default class FireStoreDB { +export default class FirestoreService { /** * @author Mohamad Abdel Rida */ diff --git a/src/Models/PostAttachment.ts b/src/services/PostAttachment.service.ts similarity index 96% rename from src/Models/PostAttachment.ts rename to src/services/PostAttachment.service.ts index 63a58f7..5a8b602 100644 --- a/src/Models/PostAttachment.ts +++ b/src/services/PostAttachment.service.ts @@ -1,4 +1,4 @@ -import { PostAttachmentType } from './Enums'; +import { PostAttachmentType } from './models/Enums.model'; /** * PostAttachment diff --git a/src/Models/PrimaryUser.ts b/src/services/PrimaryUser.service.ts similarity index 90% rename from src/Models/PrimaryUser.ts rename to src/services/PrimaryUser.service.ts index e8f0296..6b1ff12 100644 --- a/src/Models/PrimaryUser.ts +++ b/src/services/PrimaryUser.service.ts @@ -1,6 +1,6 @@ -import { IUser } from './DocTypes'; -import { FirebaseUser, Firestore } from './firebase'; -import User from './User'; +import { IUser } from './models/DocTypes.model'; +import { FirebaseUser, Firestore } from './data/firebase'; +import User from './User.service'; export default class PrimaryUser extends User { private user: FirebaseUser; diff --git a/src/Models/User.ts b/src/services/User.service.ts similarity index 95% rename from src/Models/User.ts rename to src/services/User.service.ts index 9ad70a0..8be1549 100644 --- a/src/Models/User.ts +++ b/src/services/User.service.ts @@ -1,6 +1,6 @@ -import { IUser } from './DocTypes'; -import { DocumentReference, QueryDocumentSnapshot, SnapshotOptions } from './firebase'; -import PrimaryUser from './PrimaryUser'; +import { IUser } from './models/DocTypes.model'; +import { DocumentReference, QueryDocumentSnapshot, SnapshotOptions } from './data/firebase'; +import PrimaryUser from './PrimaryUser.service'; export class UserError extends Error { /** diff --git a/src/Models/firebase.ts b/src/services/data/firebase.ts similarity index 95% rename from src/Models/firebase.ts rename to src/services/data/firebase.ts index 4a09a67..bbbfbcf 100644 --- a/src/Models/firebase.ts +++ b/src/services/data/firebase.ts @@ -4,7 +4,7 @@ import 'firebase/auth'; import 'firebase/analytics'; // import 'firebase/messaging'; import 'firebase/storage'; -import FireStoreDB from './firestore'; +import FirestoreService from '../Firestore.service'; export const Timestamp = firebase.firestore.Timestamp; export type Timestamp = firebase.firestore.Timestamp; export type DocumentData = firebase.firestore.DocumentData; @@ -44,4 +44,4 @@ firebase.firestore().settings({ firebase.firestore().enablePersistence({ synchronizeTabs: true }); export const Firestore = app.firestore(); -export const db = new FireStoreDB(); +export const db = new FirestoreService(); diff --git a/src/Models/DocTypes.ts b/src/services/models/DocTypes.model.ts similarity index 89% rename from src/Models/DocTypes.ts rename to src/services/models/DocTypes.model.ts index df8984c..0f0d4e2 100644 --- a/src/Models/DocTypes.ts +++ b/src/services/models/DocTypes.model.ts @@ -1,5 +1,5 @@ -import { PostAttachmentType } from './Enums'; -import { DocumentReference, Timestamp } from './firebase'; +import { PostAttachmentType } from './Enums.model'; +import { DocumentReference, Timestamp } from '../data/firebase'; export interface IUser { firstName: string; diff --git a/src/Models/Enums.ts b/src/services/models/Enums.model.ts similarity index 100% rename from src/Models/Enums.ts rename to src/services/models/Enums.model.ts From 560cae29d87c6be6765dc5475516f3b4646d9615 Mon Sep 17 00:00:00 2001 From: Hy Huynh Date: Thu, 14 Apr 2022 10:54:15 -0600 Subject: [PATCH 2/5] relocate scss files into /styles, rename tsx pages --- src/App.tsx | 51 +++++++++---------- src/components/CommentCompose.tsx | 2 +- src/components/CommentView.tsx | 2 +- src/components/Footer.tsx | 2 +- src/components/HomePostView.tsx | 2 +- src/components/LandingFeatureBox.tsx | 2 +- src/components/LandingInfo.tsx | 4 +- src/components/LandingRegisterPrompt.tsx | 2 +- src/components/PostComments.tsx | 2 +- src/components/PostContainer.tsx | 2 +- src/components/PostContainerSkeleton.tsx | 2 +- src/components/RegisterFormComp.tsx | 3 +- src/components/RegisterLandingComp.tsx | 3 +- src/components/WritePost.tsx | 2 +- src/pages/Home.tsx | 2 +- src/pages/Landing.tsx | 2 +- src/pages/Login.tsx | 2 +- src/pages/PostView.tsx | 2 +- src/pages/ProfileView.tsx | 2 +- ...{RegisterForm.tsx => RegisterFormPage.tsx} | 5 +- ...terLanding.tsx => RegisterLandingPage.tsx} | 5 +- src/pages/RegisterMain.scss | 0 .../{WritePost.tsx => WritePostView.tsx} | 0 .../components/CommentCompose.scss | 0 src/{ => styles}/components/CommentView.scss | 0 src/{ => styles}/components/Footer.scss | 0 src/{ => styles}/components/HomePostView.scss | 0 src/{ => styles}/components/LandingInfo.scss | 0 src/{ => styles}/components/PostComments.scss | 0 .../components/PostContainer.scss | 0 .../components/RegisterLanding.scss | 0 src/{ => styles}/pages/Home.scss | 0 src/{ => styles}/pages/Landing.scss | 0 src/{ => styles}/pages/Login.scss | 0 src/{ => styles}/pages/PostView.scss | 0 src/{ => styles}/pages/ProfileView.scss | 0 src/{ => styles}/theme/variables.scss | 0 37 files changed, 46 insertions(+), 55 deletions(-) rename src/pages/{RegisterForm.tsx => RegisterFormPage.tsx} (78%) rename src/pages/{RegisterLanding.tsx => RegisterLandingPage.tsx} (78%) delete mode 100644 src/pages/RegisterMain.scss rename src/pages/{WritePost.tsx => WritePostView.tsx} (100%) rename src/{ => styles}/components/CommentCompose.scss (100%) rename src/{ => styles}/components/CommentView.scss (100%) rename src/{ => styles}/components/Footer.scss (100%) rename src/{ => styles}/components/HomePostView.scss (100%) rename src/{ => styles}/components/LandingInfo.scss (100%) rename src/{ => styles}/components/PostComments.scss (100%) rename src/{ => styles}/components/PostContainer.scss (100%) rename src/{ => styles}/components/RegisterLanding.scss (100%) rename src/{ => styles}/pages/Home.scss (100%) rename src/{ => styles}/pages/Landing.scss (100%) rename src/{ => styles}/pages/Login.scss (100%) rename src/{ => styles}/pages/PostView.scss (100%) rename src/{ => styles}/pages/ProfileView.scss (100%) rename src/{ => styles}/theme/variables.scss (100%) diff --git a/src/App.tsx b/src/App.tsx index 8a04a0d..12512a1 100644 --- a/src/App.tsx +++ b/src/App.tsx @@ -1,42 +1,37 @@ -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 './app/routing'; import { PrivateRoute } from './components/PrivateRoute'; -import WritePostView from './pages/WritePost'; import TitleBar from './components/TitleBar'; -import unProtectedRoutes from './app/routing'; -import { FirebaseAuthService } from './services/FirebaseAuth.service'; +/* Redux for User */ +import { clearUser, setUser } from './features/User/UserStore'; +import Home from './pages/Home'; +import Landing from './pages/Landing'; +import Login from './pages/Login'; +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 './theme/variables.scss'; const App: React.FC = () => { const dispatch = useDispatch(); @@ -65,8 +60,8 @@ const App: React.FC = () => { - - + + } exact={true} /> diff --git a/src/components/CommentCompose.tsx b/src/components/CommentCompose.tsx index f154db5..a6000aa 100644 --- a/src/components/CommentCompose.tsx +++ b/src/components/CommentCompose.tsx @@ -1,6 +1,6 @@ import React, { useEffect, useState } from 'react'; import { IonAvatar, IonButton, IonCard, IonCardContent, IonIcon, IonTextarea } from '@ionic/react'; -import './CommentCompose.scss'; +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'; diff --git a/src/components/CommentView.tsx b/src/components/CommentView.tsx index f54cc8e..2630901 100644 --- a/src/components/CommentView.tsx +++ b/src/components/CommentView.tsx @@ -1,5 +1,5 @@ import React from 'react'; -import './CommentView.scss'; +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'; diff --git a/src/components/Footer.tsx b/src/components/Footer.tsx index 55aebe5..dd7ea48 100644 --- a/src/components/Footer.tsx +++ b/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 = () => { diff --git a/src/components/HomePostView.tsx b/src/components/HomePostView.tsx index c91cd4c..190c02e 100644 --- a/src/components/HomePostView.tsx +++ b/src/components/HomePostView.tsx @@ -10,7 +10,7 @@ import { db, QueryDocumentSnapshot, QuerySnapshot, Timestamp } from '../services import FirebasePostService from '../services/FirebasePost.service'; import PostAttachment from '../services/PostAttachment.service'; import User, { UserError } from '../services/User.service'; -import './HomePostView.scss'; +import '../styles/components/HomePostView.scss'; import PostSkeleton from './PostContainerSkeleton'; export class HomePost extends FirebasePostService { diff --git a/src/components/LandingFeatureBox.tsx b/src/components/LandingFeatureBox.tsx index bf332fe..3e75270 100644 --- a/src/components/LandingFeatureBox.tsx +++ b/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 ( diff --git a/src/components/LandingInfo.tsx b/src/components/LandingInfo.tsx index 351c801..43fd542 100644 --- a/src/components/LandingInfo.tsx +++ b/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 = () => { diff --git a/src/components/LandingRegisterPrompt.tsx b/src/components/LandingRegisterPrompt.tsx index 05e2426..f5fd187 100644 --- a/src/components/LandingRegisterPrompt.tsx +++ b/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 ( diff --git a/src/components/PostComments.tsx b/src/components/PostComments.tsx index 4893a68..eee78d2 100644 --- a/src/components/PostComments.tsx +++ b/src/components/PostComments.tsx @@ -1,5 +1,5 @@ import React from 'react'; -import './PostComments.scss'; +import '../styles/components/PostComments.scss'; import Comment from '../services/FirebaseComment.service'; import CommentView from './CommentView'; import { IonList, IonLabel, IonListHeader } from '@ionic/react'; diff --git a/src/components/PostContainer.tsx b/src/components/PostContainer.tsx index 34b1f36..a0dc73e 100644 --- a/src/components/PostContainer.tsx +++ b/src/components/PostContainer.tsx @@ -23,7 +23,7 @@ import { selectUser } from '../features/User/UserStore'; 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; diff --git a/src/components/PostContainerSkeleton.tsx b/src/components/PostContainerSkeleton.tsx index 7e47d27..898aefd 100644 --- a/src/components/PostContainerSkeleton.tsx +++ b/src/components/PostContainerSkeleton.tsx @@ -1,5 +1,5 @@ import React from 'react'; -import './PostContainer.scss'; +import '../styles/components/PostContainer.scss'; import { IonCard, IonCardHeader, diff --git a/src/components/RegisterFormComp.tsx b/src/components/RegisterFormComp.tsx index 818b65f..a9c4242 100644 --- a/src/components/RegisterFormComp.tsx +++ b/src/components/RegisterFormComp.tsx @@ -1,10 +1,9 @@ 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 { FirebaseAuthService } from '../services/FirebaseAuth.service'; diff --git a/src/components/RegisterLandingComp.tsx b/src/components/RegisterLandingComp.tsx index b14896a..e82ed5d 100644 --- a/src/components/RegisterLandingComp.tsx +++ b/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 = () => { diff --git a/src/components/WritePost.tsx b/src/components/WritePost.tsx index 510e42e..a3b9fcf 100644 --- a/src/components/WritePost.tsx +++ b/src/components/WritePost.tsx @@ -15,7 +15,7 @@ import { InputChangeEventDetail } from '@ionic/core'; import { loadingComponent } from './Loading'; 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 { db, Timestamp } from '../services/data/firebase'; diff --git a/src/pages/Home.tsx b/src/pages/Home.tsx index ab3a81b..bd02de1 100644 --- a/src/pages/Home.tsx +++ b/src/pages/Home.tsx @@ -1,6 +1,6 @@ import React from 'react'; import { IonPage, IonButton } from '@ionic/react'; -import './Home.scss'; +import '../styles/pages/Home.scss'; import HomePostView from '../components/HomePostView'; import { useSelector } from 'react-redux'; import { selectUser } from '../features/User/UserStore'; diff --git a/src/pages/Landing.tsx b/src/pages/Landing.tsx index d1b4e3d..3614717 100644 --- a/src/pages/Landing.tsx +++ b/src/pages/Landing.tsx @@ -1,6 +1,6 @@ import React from 'react'; import { IonPage, IonContent, IonItem, IonImg } from '@ionic/react'; -import './Landing.scss'; +import '../styles/pages/Landing.scss'; import LandingFeatureBox from '../components/LandingFeatureBox'; import LandingRegisterPrompt from '../components/LandingRegisterPrompt'; import LandingInfo from '../components/LandingInfo'; diff --git a/src/pages/Login.tsx b/src/pages/Login.tsx index 8161317..e90cca1 100644 --- a/src/pages/Login.tsx +++ b/src/pages/Login.tsx @@ -1,7 +1,7 @@ import React, { useState } from 'react'; import { InputChangeEventDetail } from '@ionic/core'; import { IonContent, IonPage, IonInput, IonButton, IonRouterLink } from '@ionic/react'; -import './Login.scss'; +import '../styles/pages/Login.scss'; import { toast } from '../app/toast'; import { FirebaseAuthService } from '../services/FirebaseAuth.service'; import Footer from '../components/Footer'; diff --git a/src/pages/PostView.tsx b/src/pages/PostView.tsx index cc1ded1..43db3f2 100644 --- a/src/pages/PostView.tsx +++ b/src/pages/PostView.tsx @@ -13,7 +13,7 @@ import { IonSkeletonText, IonTextarea, } from '@ionic/react'; -import './PostView.scss'; +import '../styles/pages/PostView.scss'; import PostComments from '../components/PostComments'; import CommentCompose from '../components/CommentCompose'; import Post from '../services/FirebasePost.service'; diff --git a/src/pages/ProfileView.tsx b/src/pages/ProfileView.tsx index 38a8dc7..ef09615 100644 --- a/src/pages/ProfileView.tsx +++ b/src/pages/ProfileView.tsx @@ -9,7 +9,7 @@ import { db } from '../services/data/firebase'; import Post from '../services/FirebasePost.service'; import PrimaryUser from '../services/PrimaryUser.service'; import User from '../services/User.service'; -import './ProfileView.scss'; +import '../styles/pages/ProfileView.scss'; const ProfileView: React.FC = () => { const [user, setUser] = useState(); diff --git a/src/pages/RegisterForm.tsx b/src/pages/RegisterFormPage.tsx similarity index 78% rename from src/pages/RegisterForm.tsx rename to src/pages/RegisterFormPage.tsx index 4575082..bb4bb96 100644 --- a/src/pages/RegisterForm.tsx +++ b/src/pages/RegisterFormPage.tsx @@ -1,9 +1,8 @@ import React from 'react'; import { IonContent, IonPage } from '@ionic/react'; -import './RegisterMain.scss'; import RegisterForm from '../components/RegisterFormComp'; -const Tab1: React.FC = () => { +const RegisterFormPage: React.FC = () => { return ( @@ -13,4 +12,4 @@ const Tab1: React.FC = () => { ); }; -export default Tab1; +export default RegisterFormPage; diff --git a/src/pages/RegisterLanding.tsx b/src/pages/RegisterLandingPage.tsx similarity index 78% rename from src/pages/RegisterLanding.tsx rename to src/pages/RegisterLandingPage.tsx index d2a2de1..b6f5a69 100644 --- a/src/pages/RegisterLanding.tsx +++ b/src/pages/RegisterLandingPage.tsx @@ -1,9 +1,8 @@ import React from 'react'; import { IonContent, IonPage } from '@ionic/react'; import RegisterLanding from '../components/RegisterLandingComp'; -import './RegisterMain.scss'; -const Tab1: React.FC = () => { +const RegisterLandingPage: React.FC = () => { return ( @@ -13,4 +12,4 @@ const Tab1: React.FC = () => { ); }; -export default Tab1; +export default RegisterLandingPage; diff --git a/src/pages/RegisterMain.scss b/src/pages/RegisterMain.scss deleted file mode 100644 index e69de29..0000000 diff --git a/src/pages/WritePost.tsx b/src/pages/WritePostView.tsx similarity index 100% rename from src/pages/WritePost.tsx rename to src/pages/WritePostView.tsx diff --git a/src/components/CommentCompose.scss b/src/styles/components/CommentCompose.scss similarity index 100% rename from src/components/CommentCompose.scss rename to src/styles/components/CommentCompose.scss diff --git a/src/components/CommentView.scss b/src/styles/components/CommentView.scss similarity index 100% rename from src/components/CommentView.scss rename to src/styles/components/CommentView.scss diff --git a/src/components/Footer.scss b/src/styles/components/Footer.scss similarity index 100% rename from src/components/Footer.scss rename to src/styles/components/Footer.scss diff --git a/src/components/HomePostView.scss b/src/styles/components/HomePostView.scss similarity index 100% rename from src/components/HomePostView.scss rename to src/styles/components/HomePostView.scss diff --git a/src/components/LandingInfo.scss b/src/styles/components/LandingInfo.scss similarity index 100% rename from src/components/LandingInfo.scss rename to src/styles/components/LandingInfo.scss diff --git a/src/components/PostComments.scss b/src/styles/components/PostComments.scss similarity index 100% rename from src/components/PostComments.scss rename to src/styles/components/PostComments.scss diff --git a/src/components/PostContainer.scss b/src/styles/components/PostContainer.scss similarity index 100% rename from src/components/PostContainer.scss rename to src/styles/components/PostContainer.scss diff --git a/src/components/RegisterLanding.scss b/src/styles/components/RegisterLanding.scss similarity index 100% rename from src/components/RegisterLanding.scss rename to src/styles/components/RegisterLanding.scss diff --git a/src/pages/Home.scss b/src/styles/pages/Home.scss similarity index 100% rename from src/pages/Home.scss rename to src/styles/pages/Home.scss diff --git a/src/pages/Landing.scss b/src/styles/pages/Landing.scss similarity index 100% rename from src/pages/Landing.scss rename to src/styles/pages/Landing.scss diff --git a/src/pages/Login.scss b/src/styles/pages/Login.scss similarity index 100% rename from src/pages/Login.scss rename to src/styles/pages/Login.scss diff --git a/src/pages/PostView.scss b/src/styles/pages/PostView.scss similarity index 100% rename from src/pages/PostView.scss rename to src/styles/pages/PostView.scss diff --git a/src/pages/ProfileView.scss b/src/styles/pages/ProfileView.scss similarity index 100% rename from src/pages/ProfileView.scss rename to src/styles/pages/ProfileView.scss diff --git a/src/theme/variables.scss b/src/styles/theme/variables.scss similarity index 100% rename from src/theme/variables.scss rename to src/styles/theme/variables.scss From 06ffaee1bd96b6863824cf93ed8f544249906ce4 Mon Sep 17 00:00:00 2001 From: Hy Huynh Date: Thu, 14 Apr 2022 10:54:29 -0600 Subject: [PATCH 3/5] rename tsx pages --- src/App.tsx | 8 ++++---- src/components/PrivateRoute.tsx | 2 +- src/pages/{Home.tsx => HomePage.tsx} | 0 src/pages/{Landing.tsx => LandingPage.tsx} | 4 ++-- src/pages/{Login.tsx => LoginPage.tsx} | 0 5 files changed, 7 insertions(+), 7 deletions(-) rename src/pages/{Home.tsx => HomePage.tsx} (100%) rename src/pages/{Landing.tsx => LandingPage.tsx} (92%) rename src/pages/{Login.tsx => LoginPage.tsx} (100%) diff --git a/src/App.tsx b/src/App.tsx index 12512a1..2a78d91 100644 --- a/src/App.tsx +++ b/src/App.tsx @@ -21,9 +21,9 @@ import { PrivateRoute } from './components/PrivateRoute'; import TitleBar from './components/TitleBar'; /* Redux for User */ import { clearUser, setUser } from './features/User/UserStore'; -import Home from './pages/Home'; -import Landing from './pages/Landing'; -import Login from './pages/Login'; +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'; @@ -31,7 +31,7 @@ import RegisterLandingPage from './pages/RegisterLandingPage'; import WritePostView from './pages/WritePostView'; import { FirebaseAuthService } from './services/FirebaseAuth.service'; /* Theme variables */ -import './theme/variables.scss'; +import './styles/theme/variables.scss'; const App: React.FC = () => { const dispatch = useDispatch(); diff --git a/src/components/PrivateRoute.tsx b/src/components/PrivateRoute.tsx index d59afc6..3ebdb23 100644 --- a/src/components/PrivateRoute.tsx +++ b/src/components/PrivateRoute.tsx @@ -1,6 +1,6 @@ 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'; diff --git a/src/pages/Home.tsx b/src/pages/HomePage.tsx similarity index 100% rename from src/pages/Home.tsx rename to src/pages/HomePage.tsx diff --git a/src/pages/Landing.tsx b/src/pages/LandingPage.tsx similarity index 92% rename from src/pages/Landing.tsx rename to src/pages/LandingPage.tsx index 3614717..b9bc7e8 100644 --- a/src/pages/Landing.tsx +++ b/src/pages/LandingPage.tsx @@ -6,7 +6,7 @@ import LandingRegisterPrompt from '../components/LandingRegisterPrompt'; import LandingInfo from '../components/LandingInfo'; import Footer from '../components/Footer'; -const Landing: React.FC = () => { +const LandingPage: React.FC = () => { return ( @@ -22,4 +22,4 @@ const Landing: React.FC = () => { ); }; -export default Landing; +export default LandingPage; diff --git a/src/pages/Login.tsx b/src/pages/LoginPage.tsx similarity index 100% rename from src/pages/Login.tsx rename to src/pages/LoginPage.tsx From e6396e8e250773952ea39e20e8e360e88bc10da8 Mon Sep 17 00:00:00 2001 From: Hy Huynh Date: Thu, 14 Apr 2022 11:28:13 -0600 Subject: [PATCH 4/5] relocate files in /app and create /stores --- src/App.tsx | 6 +-- src/components/CommentCompose.tsx | 2 +- src/components/HomePostView.tsx | 4 +- src/components/PostContainer.tsx | 4 +- src/components/PrivateRoute.tsx | 2 +- src/components/RegisterFormComp.tsx | 4 +- src/components/TitleBar.tsx | 6 +-- src/components/WritePost.tsx | 2 +- src/{app => components/data}/toast.ts | 0 src/features/counter/Counter.scss | 9 ---- src/features/counter/Counter.tsx_disabled | 38 -------------- src/features/counter/UserStore.tsx | 43 ---------------- .../counter/counterSlice.tsx_disabled | 51 ------------------- src/index.tsx | 2 +- src/pages/HomePage.tsx | 2 +- src/pages/LoginPage.tsx | 4 +- src/pages/PostView.tsx | 2 +- src/pages/ProfileView.tsx | 2 +- .../routing.tsx => pages/data/router.data.ts} | 0 src/services/FirebaseAuth.service.ts | 2 +- src/{app/store.tsx => stores/store.ts} | 5 +- .../users/user.store.ts} | 2 +- 22 files changed, 25 insertions(+), 167 deletions(-) rename src/{app => components/data}/toast.ts (100%) delete mode 100644 src/features/counter/Counter.scss delete mode 100644 src/features/counter/Counter.tsx_disabled delete mode 100644 src/features/counter/UserStore.tsx delete mode 100644 src/features/counter/counterSlice.tsx_disabled rename src/{app/routing.tsx => pages/data/router.data.ts} (100%) rename src/{app/store.tsx => stores/store.ts} (57%) rename src/{features/User/UserStore.tsx => stores/users/user.store.ts} (96%) diff --git a/src/App.tsx b/src/App.tsx index 2a78d91..58db15c 100644 --- a/src/App.tsx +++ b/src/App.tsx @@ -16,11 +16,11 @@ 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 './app/routing'; +import unProtectedRoutes from './pages/data/router.data'; import { PrivateRoute } from './components/PrivateRoute'; import TitleBar from './components/TitleBar'; /* Redux for User */ -import { clearUser, setUser } from './features/User/UserStore'; +import { clearUser, setUser } from './stores/users/user.store'; import Home from './pages/HomePage'; import Landing from './pages/LandingPage'; import Login from './pages/LoginPage'; @@ -29,7 +29,7 @@ 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'; +import FirebaseAuthService from './services/FirebaseAuth.service'; /* Theme variables */ import './styles/theme/variables.scss'; diff --git a/src/components/CommentCompose.tsx b/src/components/CommentCompose.tsx index a6000aa..c12cb57 100644 --- a/src/components/CommentCompose.tsx +++ b/src/components/CommentCompose.tsx @@ -6,7 +6,7 @@ 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) => { diff --git a/src/components/HomePostView.tsx b/src/components/HomePostView.tsx index 190c02e..5eca78a 100644 --- a/src/components/HomePostView.tsx +++ b/src/components/HomePostView.tsx @@ -1,9 +1,9 @@ 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 { 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'; diff --git a/src/components/PostContainer.tsx b/src/components/PostContainer.tsx index a0dc73e..b3cd321 100644 --- a/src/components/PostContainer.tsx +++ b/src/components/PostContainer.tsx @@ -18,8 +18,8 @@ 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 { 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'; diff --git a/src/components/PrivateRoute.tsx b/src/components/PrivateRoute.tsx index 3ebdb23..71872d8 100644 --- a/src/components/PrivateRoute.tsx +++ b/src/components/PrivateRoute.tsx @@ -2,7 +2,7 @@ import React from 'react'; import PropTypes from 'prop-types'; 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; diff --git a/src/components/RegisterFormComp.tsx b/src/components/RegisterFormComp.tsx index a9c4242..4721b5b 100644 --- a/src/components/RegisterFormComp.tsx +++ b/src/components/RegisterFormComp.tsx @@ -5,8 +5,8 @@ import { InputChangeEventDetail } from '@ionic/core'; import { useState } from 'react'; import Select from 'react-select'; import majors from '../majors'; -import { toast } from '../app/toast'; -import { FirebaseAuthService } from '../services/FirebaseAuth.service'; +import { toast } from './data/toast'; +import FirebaseAuthService from '../services/FirebaseAuth.service'; import Footer from '../components/Footer'; const RegisterForm: React.FC = () => { diff --git a/src/components/TitleBar.tsx b/src/components/TitleBar.tsx index 00fd130..d56a2f5 100644 --- a/src/components/TitleBar.tsx +++ b/src/components/TitleBar.tsx @@ -19,10 +19,10 @@ import { IonRouterLink, } from '@ionic/react'; import { ellipseOutline, homeOutline, logOutOutline } from 'ionicons/icons'; -import { toast } from '../app/toast'; -import { FirebaseAuthService } from '../services/FirebaseAuth.service'; +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); diff --git a/src/components/WritePost.tsx b/src/components/WritePost.tsx index a3b9fcf..86ff781 100644 --- a/src/components/WritePost.tsx +++ b/src/components/WritePost.tsx @@ -17,7 +17,7 @@ import { PostCategory } from '../services/models/Enums.model'; import { useHistory } from 'react-router'; 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 = () => { diff --git a/src/app/toast.ts b/src/components/data/toast.ts similarity index 100% rename from src/app/toast.ts rename to src/components/data/toast.ts diff --git a/src/features/counter/Counter.scss b/src/features/counter/Counter.scss deleted file mode 100644 index 43622d5..0000000 --- a/src/features/counter/Counter.scss +++ /dev/null @@ -1,9 +0,0 @@ -.counterList { - width: fit-content; - margin: auto; -} - -.counterText { - align-content: space-between; - margin: auto; -} diff --git a/src/features/counter/Counter.tsx_disabled b/src/features/counter/Counter.tsx_disabled deleted file mode 100644 index b9a6ca0..0000000 --- a/src/features/counter/Counter.tsx_disabled +++ /dev/null @@ -1,38 +0,0 @@ -/* eslint-ignore */ -import { IonButton, IonInput, IonItem, IonList, IonText } from '@ionic/react'; -import React, { ReactElement, useState } from 'react'; -import { useSelector, useDispatch } from 'react-redux'; -import { decrement, increment, incrementByAmount, incrementAsync, selectCount } from './counterSlice'; -import './Counter.scss'; - -/** - * Counter is a simple example to base any future redux-dependent work off of. - * This should not be used in production - */ -export function Counter(): ReactElement { - const count = useSelector(selectCount); - const dispatch = useDispatch(); - const [incrementAmount, setIncrementAmount] = useState('2'); - - return ( - - - dispatch(increment())}>+ - {count} - dispatch(decrement())}>- - - - setIncrementAmount(e.detail.value || '1')} - clearInput={true} - size={2} - /> - dispatch(incrementByAmount(Number(incrementAmount) || 0))}> - Add Amount - - dispatch(incrementAsync(Number(incrementAmount) || 0))}>Add Async - - - ); -} diff --git a/src/features/counter/UserStore.tsx b/src/features/counter/UserStore.tsx deleted file mode 100644 index 70ce8f2..0000000 --- a/src/features/counter/UserStore.tsx +++ /dev/null @@ -1,43 +0,0 @@ -import { createSlice, PayloadAction } from '@reduxjs/toolkit'; -// import { AppThunk, RootState } from '../../app/store'; -import User from '../../services/User.service'; - -interface UserState { - user: User | undefined; -} - -const initialState: UserState = { - user: undefined, -}; - -export const slice = createSlice({ - name: 'user', - initialState, - reducers: { - setUser: (state, action: PayloadAction) => { - state.user = action.payload; - }, - clearUser: (state) => { - state.user = undefined; - }, - }, -}); - -export const { setUser, clearUser } = slice.actions; - -// The function below is called a thunk and allows us to perform async logic. It -// can be dispatched like a regular action: `dispatch(incrementAsync(10))`. This -// will call the thunk with the `dispatch` function as the first argument. Async -// code can then be executed and other actions can be dispatched -// export const incrementAsync = (amount: number): AppThunk => (dispatch) => { -// setTimeout(() => { -// dispatch(incrementByAmount(amount)); -// }, 1000); -// }; - -// The function below is called a selector and allows us to select a value from -// the state. Selectors can also be defined inline where they're used instead of -// in the slice file. For example: `useSelector((state: RootState) => state.counter.value)` -// export const selectCount = (state: RootState): number => state.counter.value; - -export default slice.reducer; diff --git a/src/features/counter/counterSlice.tsx_disabled b/src/features/counter/counterSlice.tsx_disabled deleted file mode 100644 index 87772c9..0000000 --- a/src/features/counter/counterSlice.tsx_disabled +++ /dev/null @@ -1,51 +0,0 @@ -/* eslint-ignore */ -import { createSlice, PayloadAction } from '@reduxjs/toolkit'; -import { AppThunk, RootState } from '../../app/store'; - -interface CounterState { - value: number; -} - -const initialState: CounterState = { - value: 0, -}; - -export const slice = createSlice({ - name: 'counter', - initialState, - reducers: { - increment: (state) => { - // Redux Toolkit allows us to write "mutating" logic in reducers. It - // doesn't actually mutate the state because it uses the immer library, - // which detects changes to a "draft state" and produces a brand new - // immutable state based off those changes - state.value += 1; - }, - decrement: (state) => { - state.value -= 1; - }, - // Use the PayloadAction type to declare the contents of `action.payload` - incrementByAmount: (state, action: PayloadAction) => { - state.value += action.payload; - }, - }, -}); - -export const { increment, decrement, incrementByAmount } = slice.actions; - -// The function below is called a thunk and allows us to perform async logic. It -// can be dispatched like a regular action: `dispatch(incrementAsync(10))`. This -// will call the thunk with the `dispatch` function as the first argument. Async -// code can then be executed and other actions can be dispatched -export const incrementAsync = (amount: number): AppThunk => (dispatch) => { - setTimeout(() => { - dispatch(incrementByAmount(amount)); - }, 1000); -}; - -// The function below is called a selector and allows us to select a value from -// the state. Selectors can also be defined inline where they're used instead of -// in the slice file. For example: `useSelector((state: RootState) => state.counter.value)` -export const selectCount = (state: RootState): number => state.counter.value; - -export default slice.reducer; diff --git a/src/index.tsx b/src/index.tsx index af26034..2d7ec43 100644 --- a/src/index.tsx +++ b/src/index.tsx @@ -4,7 +4,7 @@ import App from './App'; import * as serviceWorker from './serviceWorker'; // Connects global state to App import { Provider } from 'react-redux'; -import { store } from './app/store'; +import { store } from './stores/store'; ReactDOM.render( diff --git a/src/pages/HomePage.tsx b/src/pages/HomePage.tsx index bd02de1..c13c15b 100644 --- a/src/pages/HomePage.tsx +++ b/src/pages/HomePage.tsx @@ -3,7 +3,7 @@ import { IonPage, IonButton } from '@ionic/react'; import '../styles/pages/Home.scss'; import HomePostView from '../components/HomePostView'; import { useSelector } from 'react-redux'; -import { selectUser } from '../features/User/UserStore'; +import { selectUser } from '../stores/users/user.store'; const Home: React.FC = () => { const user = useSelector(selectUser); diff --git a/src/pages/LoginPage.tsx b/src/pages/LoginPage.tsx index e90cca1..307b516 100644 --- a/src/pages/LoginPage.tsx +++ b/src/pages/LoginPage.tsx @@ -2,8 +2,8 @@ import React, { useState } from 'react'; import { InputChangeEventDetail } from '@ionic/core'; import { IonContent, IonPage, IonInput, IonButton, IonRouterLink } from '@ionic/react'; import '../styles/pages/Login.scss'; -import { toast } from '../app/toast'; -import { FirebaseAuthService } from '../services/FirebaseAuth.service'; +import { toast } from '../components/data/toast'; +import FirebaseAuthService from '../services/FirebaseAuth.service'; import Footer from '../components/Footer'; /** diff --git a/src/pages/PostView.tsx b/src/pages/PostView.tsx index 43db3f2..aa9b98b 100644 --- a/src/pages/PostView.tsx +++ b/src/pages/PostView.tsx @@ -20,7 +20,7 @@ import Post from '../services/FirebasePost.service'; import { useParams } from 'react-router-dom'; import Comment from '../services/FirebaseComment.service'; import { useSelector } from 'react-redux'; -import { selectUser } from '../features/User/UserStore'; +import { selectUser } from '../stores/users/user.store'; import { db } from '../services/data/firebase'; import { ReplyCommentPairContext } from '../contexts/replyComment'; import _ from 'lodash'; diff --git a/src/pages/ProfileView.tsx b/src/pages/ProfileView.tsx index ef09615..23eef26 100644 --- a/src/pages/ProfileView.tsx +++ b/src/pages/ProfileView.tsx @@ -4,7 +4,7 @@ import { useSelector } from 'react-redux'; import { useParams } from 'react-router-dom'; import Footer from '../components/Footer'; import PostContainer from '../components/PostContainer'; -import { selectUser } from '../features/User/UserStore'; +import { selectUser } from '../stores/users/user.store'; import { db } from '../services/data/firebase'; import Post from '../services/FirebasePost.service'; import PrimaryUser from '../services/PrimaryUser.service'; diff --git a/src/app/routing.tsx b/src/pages/data/router.data.ts similarity index 100% rename from src/app/routing.tsx rename to src/pages/data/router.data.ts diff --git a/src/services/FirebaseAuth.service.ts b/src/services/FirebaseAuth.service.ts index 11102e1..dfe01de 100644 --- a/src/services/FirebaseAuth.service.ts +++ b/src/services/FirebaseAuth.service.ts @@ -9,7 +9,7 @@ import { } from './data/firebase'; import PrimaryUser from './PrimaryUser.service'; -export class FirebaseAuthService { +export default class FirebaseAuthService { private static auth = FirebaseAuth; protected static user = FirebaseAuthService.auth.currentUser; public static get googleProvider(): OAuthProvider { diff --git a/src/app/store.tsx b/src/stores/store.ts similarity index 57% rename from src/app/store.tsx rename to src/stores/store.ts index 4de6a8f..5500427 100644 --- a/src/app/store.tsx +++ b/src/stores/store.ts @@ -1,6 +1,5 @@ -import { configureStore, ThunkAction, Action, createImmutableStateInvariantMiddleware } from '@reduxjs/toolkit'; -// import counterReducer from '../features/counter/counterSlice'; -import userReducer from '../features/User/UserStore'; +import { Action, configureStore, createImmutableStateInvariantMiddleware, ThunkAction } from '@reduxjs/toolkit'; +import userReducer from './users/user.store'; export const store = configureStore({ reducer: { user: userReducer, diff --git a/src/features/User/UserStore.tsx b/src/stores/users/user.store.ts similarity index 96% rename from src/features/User/UserStore.tsx rename to src/stores/users/user.store.ts index 7bb966b..2f3bde4 100644 --- a/src/features/User/UserStore.tsx +++ b/src/stores/users/user.store.ts @@ -1,6 +1,6 @@ import { createSlice, PayloadAction } from '@reduxjs/toolkit'; -import { RootState } from '../../app/store'; import PrimaryUser from '../../services/PrimaryUser.service'; +import { RootState } from '../store'; interface UserState { user: PrimaryUser | undefined; From 77c55c882e72bff8a2ef3ae2b192fb76ee83faba Mon Sep 17 00:00:00 2001 From: Hy Huynh Date: Thu, 14 Apr 2022 15:25:45 -0600 Subject: [PATCH 5/5] fixed: share option now can display on single post --- src/components/HomePostView.tsx | 6 +++++- 1 file changed, 5 insertions(+), 1 deletion(-) diff --git a/src/components/HomePostView.tsx b/src/components/HomePostView.tsx index 5eca78a..bf5e459 100644 --- a/src/components/HomePostView.tsx +++ b/src/components/HomePostView.tsx @@ -161,7 +161,11 @@ const HomePostView: React.FC = () => { /> )} - {v.data.postReference === undefined && } + {v.data.postReference === undefined && ( + + <> + + )} ); })