--------------------------------------------------------------------------------
/frontend/src/components/shared/Preloader.tsx:
--------------------------------------------------------------------------------
1 | import { LoadingOutlined } from '@ant-design/icons';
2 | import React from 'react';
3 | import logo from '~/images/logo.svg';
4 |
5 | const Preloader = () => (
6 |
7 |
8 |
Nothing brings people together like good food.
9 |
10 |
(Component: React.ComponentType
) => {
9 | return (props: Pick>) => {
10 | const isAuth = useSelector((state: IRootReducer) => !!state.auth.id && !!state.auth.username);
11 |
12 | return
13 | }
14 | };
15 |
16 | export default withAuth;
17 |
18 |
--------------------------------------------------------------------------------
/frontend/src/components/hoc/withTheme.tsx:
--------------------------------------------------------------------------------
1 | import { useSelector } from "react-redux";
2 | import { IRootReducer } from "~/types/types";
3 |
4 | interface IInjectedProps {
5 | theme: string;
6 | [prop: string]: any;
7 | }
8 |
9 | const withTheme = (Component: React.ComponentType
) => {
10 | return (props: Pick>) => {
11 | const theme = useSelector((state: IRootReducer) => state.settings.theme);
12 |
13 | return
14 | }
15 | };
16 |
17 | export default withTheme;
18 |
19 |
--------------------------------------------------------------------------------
/frontend/src/styles/components/grid.css:
--------------------------------------------------------------------------------
1 | .grid-img {
2 | width: 100%;
3 | height: 100%;
4 | object-fit: cover;
5 |
6 | &:hover {
7 | cursor: pointer;
8 | }
9 | }
10 |
11 | .custom-grid {
12 | display: grid;
13 | width: 100%;
14 | height: 100%;
15 | grid-gap: 2px;
16 | overflow:hidden;
17 | }
18 |
19 | .custom-grid-cols-2 {
20 | grid-template-columns: repeat(2, 1fr);
21 | }
22 | .custom-grid-cols-3 {
23 | grid-template-columns: repeat(3, 1fr);
24 | }
25 |
26 | .custom-grid-rows-2 {
27 | grid-template-columns: 1fr;
28 | grid-template-rows: repeat(2, 50%);
29 | }
--------------------------------------------------------------------------------
/server/src/utils/storage.utils.ts:
--------------------------------------------------------------------------------
1 | const { Storage } = require('@google-cloud/storage');
2 | const Multer = require('multer');
3 | const config = require('../config/config');
4 |
5 | export default class CloudStorage {
6 | public bucket;
7 |
8 | public initialize() {
9 | const storage = new Storage(config.gCloudStorage);
10 |
11 | this.bucket = storage.bucket(process.env.FIREBASE_STORAGE_BUCKET_URL);
12 | }
13 | }
14 |
15 | export const multer = Multer({
16 | storage: Multer.memoryStorage(),
17 | limits: {
18 | fileSize: 2 * 1024 * 1024 // no larger than 2mb
19 | }
20 | });
--------------------------------------------------------------------------------
/frontend/public/manifest.json:
--------------------------------------------------------------------------------
1 | {
2 | "short_name": "React App",
3 | "name": "Create React App Sample",
4 | "icons": [
5 | {
6 | "src": "favicon.ico",
7 | "sizes": "64x64 32x32 24x24 16x16",
8 | "type": "image/x-icon"
9 | },
10 | {
11 | "src": "logo192.png",
12 | "type": "image/png",
13 | "sizes": "192x192"
14 | },
15 | {
16 | "src": "logo512.png",
17 | "type": "image/png",
18 | "sizes": "512x512"
19 | }
20 | ],
21 | "start_url": ".",
22 | "display": "standalone",
23 | "theme_color": "#000000",
24 | "background_color": "#ffffff"
25 | }
26 |
--------------------------------------------------------------------------------
/server/src/routes/createRouter.ts:
--------------------------------------------------------------------------------
1 | import config from '@/config/config';
2 | import { Router } from 'express';
3 | import glob from 'glob';
4 |
5 | const routers = glob
6 | .sync(`**/*.${config.server.env === 'dev' ? 'ts' : 'js'}`, { cwd: `${__dirname}/` })
7 | .map((filename: string) => require(`./${filename}`))
8 | .filter((router: any) => {
9 | return router.default && Object.getPrototypeOf(router.default) === Router
10 | })
11 | .reduce((rootRouter: Router, router: any) => {
12 | return rootRouter.use(router.default)
13 | }, Router({ mergeParams: true }));
14 |
15 | export default routers;
--------------------------------------------------------------------------------
/frontend/src/components/main/index.ts:
--------------------------------------------------------------------------------
1 | export { default as BookmarkButton } from './BookmarkButton';
2 | export * from './Chats';
3 | export { default as Comments } from './Comments';
4 | export { default as FollowButton } from './FollowButton';
5 | export { default as LikeButton } from './LikeButton';
6 | export { default as Messages } from './Messages';
7 | export * from './Modals';
8 | export { default as Notification } from './Notification';
9 | export * from './Options';
10 | export { default as PostItem } from './PostItem';
11 | export { default as SuggestedPeople } from './SuggestedPeople';
12 | export { default as UserCard } from './UserCard';
13 |
14 |
--------------------------------------------------------------------------------
/frontend/src/components/shared/Badge.tsx:
--------------------------------------------------------------------------------
1 | interface IProps {
2 | children?: React.ReactNode,
3 | count: number;
4 | }
5 |
6 | const Badge: React.FC = ({ children, count = 0 }) => {
7 | return (
8 |
9 | {count > 0 && (
10 |
11 | {count}
12 |
13 | )}
14 | {children && children}
15 |
21 |
:( Something went wrong.
22 |
23 | );
24 | }
25 |
26 | return this.props.children;
27 | }
28 | }
29 |
30 | export default Boundary;
--------------------------------------------------------------------------------
/frontend/src/App.css:
--------------------------------------------------------------------------------
1 | .App {
2 | text-align: center;
3 | }
4 |
5 | .App-logo {
6 | height: 40vmin;
7 | pointer-events: none;
8 | }
9 |
10 | @media (prefers-reduced-motion: no-preference) {
11 | .App-logo {
12 | animation: App-logo-spin infinite 20s linear;
13 | }
14 | }
15 |
16 | .App-header {
17 | background-color: #282c34;
18 | min-height: 100vh;
19 | display: flex;
20 | flex-direction: column;
21 | align-items: center;
22 | justify-content: center;
23 | font-size: calc(10px + 2vmin);
24 | color: white;
25 | }
26 |
27 | .App-link {
28 | color: #61dafb;
29 | }
30 |
31 | @keyframes App-logo-spin {
32 | from {
33 | transform: rotate(0deg);
34 | }
35 | to {
36 | transform: rotate(360deg);
37 | }
38 | }
39 |
--------------------------------------------------------------------------------
/frontend/src/routers/ProtectedRoute.tsx:
--------------------------------------------------------------------------------
1 | import { Redirect, Route } from "react-router-dom";
2 | import withAuth from "~/components/hoc/withAuth";
3 | import { LOGIN } from "~/constants/routes";
4 |
5 | interface IProps {
6 | component: React.ComponentType;
7 | path: string;
8 | isAuth: boolean;
9 | [propName: string]: any;
10 | }
11 |
12 | const ProtectedRoute: React.FC = ({ isAuth, component: Component, path, ...rest }) => {
13 | return (
14 | {
17 | return isAuth ? :
18 | }}
19 | />
20 | );
21 | }
22 |
23 | export default withAuth(ProtectedRoute);
24 |
--------------------------------------------------------------------------------
/frontend/src/components/main/Chats/Chats.tsx:
--------------------------------------------------------------------------------
1 | import { useSelector } from "react-redux";
2 | import { IRootReducer } from "~/types/types";
3 | import ChatBox from "./ChatBox";
4 | import MinimizedChats from "./MinimizedChats";
5 |
6 | const Chats = () => {
7 | const { chats, user } = useSelector((state: IRootReducer) => ({
8 | chats: state.chats,
9 | user: state.auth
10 | }));
11 |
12 | return (
13 |
14 | {chats.items.map(chat => chats.active === chat.id && (
15 |
16 | ))}
17 |
18 |
19 | )
20 | };
21 |
22 | export default Chats;
23 |
--------------------------------------------------------------------------------
/frontend/src/styles/elements/button.css:
--------------------------------------------------------------------------------
1 | .button {
2 | @extend button;
3 | }
4 |
5 | .button--stretch {
6 | @extend button;
7 | width: 100%;
8 | }
9 | .button--muted {
10 | @extend button;
11 | @apply bg-gray-100;
12 | @apply text-gray-600;
13 | @apply rounded-md;
14 |
15 | &:hover {
16 | @apply bg-gray-300;
17 | @apply text-gray-700;
18 | }
19 |
20 | &:active {
21 | @apply bg-gray-300;
22 | }
23 |
24 | &:focus {
25 | @apply bg-gray-100;
26 | }
27 | }
28 |
29 | .button--danger {
30 | @extend button;
31 | @apply bg-red-500;
32 |
33 | &:hover {
34 | @apply bg-red-700;
35 | }
36 |
37 | &:active,
38 | &:focus {
39 | @apply bg-red-700;
40 | }
41 | }
--------------------------------------------------------------------------------
/frontend/src/index.tsx:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import ReactDOM from 'react-dom';
3 | import 'react-image-lightbox/style.css';
4 | import { Provider } from 'react-redux';
5 | import store from '~/redux/store/store';
6 | import '~/styles/app.css';
7 | import App from './App';
8 | import reportWebVitals from './reportWebVitals';
9 |
10 | ReactDOM.render(
11 |
12 |
13 |
14 |
15 | ,
16 | document.getElementById('root')
17 | );
18 |
19 | // If you want to start measuring performance in your app, pass a function
20 | // to log results (for example: reportWebVitals(console.log))
21 | // or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals
22 | reportWebVitals();
23 |
--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "foodie",
3 | "version": "1.0.0",
4 | "description": "A social media website for food lovers and cooks.",
5 | "main": "index.js",
6 | "repository": {
7 | "type": "git",
8 | "url": ""
9 | },
10 | "engines": {
11 | "node": "12.18.1"
12 | },
13 | "scripts": {
14 | "start-client": "cd frontend && npm start",
15 | "start-server": "cd server && npm start",
16 | "start": "concurrently \"npm run start-server\" \"npm run start-client\"",
17 | "init-project": "concurrently \"cd frontend && npm install\" \"cd server && npm install\""
18 | },
19 | "keywords": [],
20 | "author": "Julius Guevarra ",
21 | "license": "MIT",
22 | "devDependencies": {
23 | "concurrently": "^5.3.0"
24 | }
25 | }
26 |
--------------------------------------------------------------------------------
/server/src/db/db.ts:
--------------------------------------------------------------------------------
1 | const mongoose = require('mongoose');
2 | import config from '@/config/config';
3 | const mongoUri = config.mongodb.uri || 'mongodb://localhost:27017';
4 | const dbName = config.mongodb.dbName || 'foodie';
5 |
6 | if (config.server.env === 'dev') {
7 | mongoose.set("debug", true);
8 | }
9 |
10 | const options = {
11 | useNewUrlParser: true,
12 | useUnifiedTopology: true,
13 | useCreateIndex: true,
14 | useFindAndModify: false,
15 | serverSelectionTimeoutMS: 5000,
16 | dbName
17 | };
18 |
19 | export default async function () {
20 | try {
21 | await mongoose.connect(mongoUri, options);
22 | console.log(`MongoDB connected as ${mongoUri}`);
23 | } catch (e) {
24 | console.log('Error connecting to mongoose: ', e);
25 | }
26 | };
27 |
--------------------------------------------------------------------------------
/server/src/schemas/LikeSchema.ts:
--------------------------------------------------------------------------------
1 | import { Document, model, Schema } from "mongoose";
2 | import { IPost } from "./PostSchema";
3 | import { IUser } from "./UserSchema";
4 |
5 | export interface ILike extends Document {
6 | target: IPost['_id'];
7 | user: IUser['_id'];
8 | }
9 |
10 | const LikeSchema = new Schema({
11 | type: {
12 | type: String,
13 | required: true,
14 | enum: ['Post', 'Comment']
15 | },
16 | target: {
17 | type: Schema.Types.ObjectId,
18 | refPath: 'type',
19 | required: true
20 | },
21 | user: {
22 | type: Schema.Types.ObjectId,
23 | ref: 'User',
24 | required: true
25 | }
26 | }, { timestamps: true, toJSON: { virtuals: true }, toObject: { getters: true, virtuals: true } });
27 |
28 | export default model('Like', LikeSchema);
29 |
--------------------------------------------------------------------------------
/server/src/schemas/NewsFeedSchema.ts:
--------------------------------------------------------------------------------
1 | import { Document, model, Schema } from "mongoose";
2 | import { IPost } from "./PostSchema";
3 | import { IUser } from "./UserSchema";
4 |
5 | export interface INewsFeed extends Document {
6 | follower: IUser['_id'];
7 | post: IPost['_id'];
8 | post_owner: IUser['_id'];
9 | }
10 |
11 | const NewsFeedSchema = new Schema({
12 | follower: {
13 | type: Schema.Types.ObjectId,
14 | required: true,
15 | ref: 'User'
16 | },
17 | post: {
18 | type: Schema.Types.ObjectId,
19 | required: true,
20 | ref: 'Post'
21 | },
22 | post_owner: {
23 | type: Schema.Types.ObjectId,
24 | required: true,
25 | ref: 'User'
26 | },
27 | createdAt: Date
28 | });
29 |
30 | export default model('NewsFeed', NewsFeedSchema);
31 |
--------------------------------------------------------------------------------
/frontend/src/pages/search/Users.tsx:
--------------------------------------------------------------------------------
1 | import UserCard from "~/components/main/UserCard";
2 | import useDocumentTitle from "~/hooks/useDocumentTitle";
3 | import { IProfile } from "~/types/types";
4 |
5 | interface IProps {
6 | users: IProfile[];
7 | }
8 |
9 | const Users: React.FC = ({ users }) => {
10 | useDocumentTitle(`Search Users | Foodie`);
11 |
12 | return (
13 |
14 | {users.map((user) => (
15 |
19 |
20 |
21 | ))}
22 |
10 |
Uh oh, you seemed lost.
11 |
The page you're trying to visit doesn't exist.
12 |
13 |
17 | Go to News Feed
18 |
19 |
9 |
Failed to authenticate
10 |
11 |
Possible cause(s):
12 |
13 | - Same email/username has been already linked to other social login eg: Google
14 |
15 |
16 |
Back to Login
17 |
16 |
20 |
21 | );
22 | };
23 |
24 | export default Chat;
25 |
--------------------------------------------------------------------------------
/frontend/src/components/shared/Avatar.tsx:
--------------------------------------------------------------------------------
1 | import placeholder from '~/images/avatar_placeholder.png';
2 |
3 | interface IProps {
4 | url?: string;
5 | size?: string;
6 | className?: string;
7 | }
8 |
9 | const Avatar: React.FC = ({ url, size, className }) => {
10 | return (
11 |
22 | )
23 | };
24 |
25 | Avatar.defaultProps = {
26 | size: 'md'
27 | }
28 |
29 | export default Avatar;
30 |
--------------------------------------------------------------------------------
/server/tsconfig.json:
--------------------------------------------------------------------------------
1 | {
2 | "compilerOptions": {
3 | "target": "es2017",
4 | "lib": [
5 | "es2017",
6 | "esnext.asynciterable"
7 | ],
8 | "baseUrl": ".",
9 | "paths": {
10 | "@/*": [
11 | "./src/*"
12 | ]
13 | },
14 | "typeRoots": [
15 | "./node_modules/@types",
16 | "./src/types"
17 | ],
18 | "allowSyntheticDefaultImports": true,
19 | "experimentalDecorators": true,
20 | "emitDecoratorMetadata": true,
21 | "forceConsistentCasingInFileNames": true,
22 | "moduleResolution": "node",
23 | "module": "commonjs",
24 | "pretty": true,
25 | "sourceMap": true,
26 | "outDir": "./build",
27 | "allowJs": true,
28 | "noEmit": false,
29 | "esModuleInterop": true,
30 | "resolveJsonModule": true
31 | },
32 | "include": [
33 | "./src/**/*",
34 | ".env"
35 | ],
36 | "exclude": [
37 | "node_modules",
38 | ]
39 | }
--------------------------------------------------------------------------------
/frontend/src/helpers/utils.tsx:
--------------------------------------------------------------------------------
1 | import dayjs from 'dayjs';
2 | import relativeTime from 'dayjs/plugin/relativeTime';
3 |
4 | dayjs.extend(relativeTime);
5 |
6 | export const displayTime = (createdAt: string | Date, showTime = false) => {
7 | const now = dayjs();
8 | const created = dayjs(createdAt);
9 | const oneDay = 24 * 60 * 60 * 1000;
10 | const twelveHours = 12 * 60 * 60 * 1000;
11 | const timeDisplay = !showTime ? '' : ` | ${dayjs(createdAt).format('hh:mm a')}`;
12 |
13 | if (now.diff(created) < twelveHours) {
14 | return dayjs(createdAt).fromNow();
15 | } else if (now.diff(created) < oneDay) {
16 | return `${dayjs(createdAt).fromNow()} ${timeDisplay}`;
17 | } else if (now.diff(createdAt, 'year') >= 1) {
18 | return `${dayjs(createdAt).format('MMM. DD, YYYY')} ${timeDisplay}`;
19 | } else {
20 | return `${dayjs(createdAt).format('MMM. DD')} ${timeDisplay}`;
21 | }
22 | }
--------------------------------------------------------------------------------
/server/src/middlewares/middlewares.ts:
--------------------------------------------------------------------------------
1 | import { NextFunction } from 'express';
2 | import { isValidObjectId } from 'mongoose';
3 | import { ErrorHandler } from './error.middleware';
4 |
5 | function isAuthenticated(req: any, res: any, next: NextFunction) {
6 | if (req.isAuthenticated()) {
7 | console.log('CHECK MIDDLEWARE: IS AUTH: ', req.isAuthenticated());
8 | return next();
9 | }
10 |
11 | return next(new ErrorHandler(401));
12 | }
13 |
14 | function validateObjectID(...ObjectIDs) {
15 | return function (req: any, res: any, next: NextFunction) {
16 | ObjectIDs.forEach((id) => {
17 | if (!isValidObjectId(req.params[id])) {
18 | return next(new ErrorHandler(400, `ObjectID ${id} supplied is not valid`));
19 | } else {
20 | next();
21 | }
22 | });
23 | }
24 | }
25 |
26 | export { isAuthenticated, validateObjectID };
27 |
28 |
--------------------------------------------------------------------------------
/frontend/src/styles/components/modal.css:
--------------------------------------------------------------------------------
1 | .modal {
2 | position: absolute;
3 | background: var(--modalBackground);
4 | top: 50%;
5 | left: 50%;
6 | transform: translate(-50%, -50%);
7 | border: none;
8 | outline: none;
9 | overflow: hidden;
10 | @apply rounded-lg shadow-xl;
11 | @apply w-11/12;
12 | @apply laptop:w-auto;
13 | }
14 |
15 | .modal-overlay {
16 | position: fixed;
17 | top: 0;
18 | left: 0;
19 | right: 0;
20 | bottom: 0;
21 | z-index: 999;
22 | background-color: var(--modalOverlayBackground);
23 | }
24 |
25 |
26 | .ril-next-button,
27 | .ril-prev-button {
28 | border-radius: 15px;
29 | }
30 | .ril-next-button {
31 | border-top-right-radius: 0;
32 | border-bottom-right-radius: 0
33 | }
34 |
35 | .ril-prev-button {
36 | border-top-left-radius: 0;
37 | border-bottom-left-radius: 0
38 | }
39 |
40 | .ril-toolbar {
41 | background: transparent;
42 | }
--------------------------------------------------------------------------------
/frontend/src/redux/reducer/authReducer.ts:
--------------------------------------------------------------------------------
1 | import { LOGIN_SUCCESS, LOGOUT_SUCCESS, REGISTER_SUCCESS, UPDATE_AUTH_PICTURE } from '~/constants/actionType';
2 | import { TAuthActionType } from '~/redux/action/authActions';
3 | import { IUser } from '~/types/types';
4 |
5 | const initState: IUser = {
6 | id: '',
7 | username: '',
8 | fullname: '',
9 | profilePicture: {}
10 | }
11 |
12 | const authReducer = (state = initState, action: TAuthActionType) => {
13 | switch (action.type) {
14 | case LOGIN_SUCCESS:
15 | return action.payload;
16 | case LOGOUT_SUCCESS:
17 | return initState;
18 | case REGISTER_SUCCESS:
19 | return action.payload;
20 | case UPDATE_AUTH_PICTURE:
21 | return {
22 | ...state,
23 | profilePicture: action.payload
24 | }
25 | default:
26 | return state;
27 | }
28 | };
29 |
30 | export default authReducer;
31 |
--------------------------------------------------------------------------------
/frontend/src/components/main/Modals/PostModals.tsx:
--------------------------------------------------------------------------------
1 | import { LoadingOutlined } from "@ant-design/icons";
2 | import { lazy, Suspense } from "react";
3 | import { IPost } from "~/types/types";
4 |
5 | const EditPostModal = lazy(() => import('./EditPostModal'));
6 | const PostLikesModal = lazy(() => import('./PostLikesModal'));
7 | const DeletePostModal = lazy(() => import('./DeletePostModal'));
8 |
9 | interface IProps {
10 | deleteSuccessCallback: (postID: string) => void;
11 | updateSuccessCallback: (post: IPost) => void;
12 | }
13 |
14 | const PostModals: React.FC = (props) => {
15 | return (
16 | }>
17 |
18 |
19 |
20 |
21 | );
22 | }
23 |
24 | export default PostModals;
25 |
--------------------------------------------------------------------------------
/frontend/src/redux/action/errorActions.ts:
--------------------------------------------------------------------------------
1 | import {
2 | CLEAR_AUTH_ERR_MSG,
3 | SET_AUTH_ERR_MSG,
4 | SET_NEWSFEED_ERR_MSG,
5 | SET_PROFILE_ERR_MSG
6 | } from "~/constants/actionType";
7 | import { IError } from "~/types/types";
8 |
9 | export const setAuthErrorMessage = (error: IError | null) => ({
10 | type: SET_AUTH_ERR_MSG,
11 | payload: error
12 | });
13 |
14 | export const setProfileErrorMessage = (error: IError | null) => ({
15 | type: SET_PROFILE_ERR_MSG,
16 | payload: error
17 | });
18 |
19 | export const setNewsFeedErrorMessage = (error: IError | null) => ({
20 | type: SET_NEWSFEED_ERR_MSG,
21 | payload: error
22 | });
23 |
24 | export const clearAuthErrorMessage = () => ({
25 | type: CLEAR_AUTH_ERR_MSG
26 | });
27 |
28 | export type ErrorActionType =
29 | | ReturnType
30 | | ReturnType
31 | | ReturnType
32 | | ReturnType;
33 |
--------------------------------------------------------------------------------
/frontend/src/redux/action/loadingActions.ts:
--------------------------------------------------------------------------------
1 | import {
2 | SET_AUTH_LOADING,
3 | SET_CREATE_POST_LOADING,
4 | SET_GET_FEED_LOADING,
5 | SET_GET_USER_LOADING
6 | } from "~/constants/actionType";
7 |
8 | export const isAuthenticating = (bool: boolean = true) => ({
9 | type: SET_AUTH_LOADING,
10 | payload: bool
11 | });
12 |
13 |
14 | export const isCreatingPost = (bool: boolean = true) => ({
15 | type: SET_CREATE_POST_LOADING,
16 | payload: bool
17 | });
18 |
19 | export const isGettingUser = (bool: boolean = true) => ({
20 | type: SET_GET_USER_LOADING,
21 | payload: bool
22 | });
23 |
24 | export const isGettingFeed = (bool: boolean = true) => ({
25 | type: SET_GET_FEED_LOADING,
26 | payload: bool
27 | });
28 |
29 | export type TLoadingActionType =
30 | | ReturnType
31 | | ReturnType
32 | | ReturnType
33 | | ReturnType;
--------------------------------------------------------------------------------
/server/src/schemas/MessageSchema.ts:
--------------------------------------------------------------------------------
1 | import { Document, model, Schema } from "mongoose";
2 | import { IUser } from "./UserSchema";
3 |
4 | export interface IMessage extends Document {
5 | from: IUser['_id'];
6 | to: IUser['_id'];
7 | text: string;
8 | seen: boolean;
9 | createdAt: string | number;
10 | }
11 |
12 | const MessageSchema = new Schema({
13 | from: {
14 | type: Schema.Types.ObjectId,
15 | ref: 'User',
16 | required: true
17 | },
18 | to: {
19 | type: Schema.Types.ObjectId,
20 | ref: 'User',
21 | required: true
22 | },
23 | text: {
24 | type: String,
25 | required: true
26 | },
27 | seen: {
28 | type: Boolean,
29 | default: false
30 | },
31 | createdAt: {
32 | type: Date,
33 | required: true
34 | }
35 |
36 | }, { timestamps: true, toJSON: { virtuals: true }, toObject: { getters: true, virtuals: true } });
37 |
38 | export default model('Message', MessageSchema);
39 |
--------------------------------------------------------------------------------
/frontend/src/pages/profile/Tabs/Bio.tsx:
--------------------------------------------------------------------------------
1 | import dayjs from 'dayjs';
2 |
3 | interface IProps {
4 | bio: string;
5 | dateJoined: string | Date;
6 | }
7 |
8 | const Bio: React.FC = ({ bio, dateJoined }) => {
9 | return (
10 |
26 | );
27 | };
28 |
29 | export default Bio;
30 |
--------------------------------------------------------------------------------
/server/src/schemas/BookmarkSchema.ts:
--------------------------------------------------------------------------------
1 | import { Document, model, Schema } from "mongoose";
2 | import { IPost } from "./PostSchema";
3 | import { IUser } from "./UserSchema";
4 |
5 | export interface IBookmark extends Document {
6 | _post_id: IPost['_id'];
7 | _author_id: IUser['_id'];
8 | createdAt: string | Date;
9 | }
10 |
11 | const BookmarkSchema = new Schema({
12 | _post_id: {
13 | type: Schema.Types.ObjectId,
14 | ref: 'Post',
15 | required: true
16 | },
17 | _author_id: {
18 | type: Schema.Types.ObjectId,
19 | ref: 'User',
20 | required: true
21 | },
22 | createdAt: {
23 | type: Date,
24 | required: true
25 | }
26 |
27 | }, { timestamps: true, toJSON: { virtuals: true }, toObject: { getters: true, virtuals: true } });
28 |
29 | BookmarkSchema.virtual('post', {
30 | ref: 'Post',
31 | localField: '_post_id',
32 | foreignField: '_id',
33 | justOne: true
34 | });
35 |
36 | export default model('Bookmark', BookmarkSchema);
37 |
--------------------------------------------------------------------------------
/LICENSE:
--------------------------------------------------------------------------------
1 | MIT License
2 |
3 | Copyright (c) 2021 Julius Guevarra
4 |
5 | Permission is hereby granted, free of charge, to any person obtaining a copy
6 | of this software and associated documentation files (the "Software"), to deal
7 | in the Software without restriction, including without limitation the rights
8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
9 | copies of the Software, and to permit persons to whom the Software is
10 | furnished to do so, subject to the following conditions:
11 |
12 | The above copyright notice and this permission notice shall be included in all
13 | copies or substantial portions of the Software.
14 |
15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
21 | SOFTWARE.
22 |
--------------------------------------------------------------------------------
/frontend/src/redux/action/profileActions.ts:
--------------------------------------------------------------------------------
1 | import { GET_USER_START, GET_USER_SUCCESS, UPDATE_COVER_PHOTO, UPDATE_PROFILE_INFO, UPDATE_PROFILE_PICTURE } from "~/constants/actionType";
2 | import { IProfile } from "~/types/types";
3 |
4 | export const getUserStart = (username: string) => ({
5 | type: GET_USER_START,
6 | payload: username
7 | });
8 |
9 | export const getUserSuccess = (user: IProfile) => ({
10 | type: GET_USER_SUCCESS,
11 | payload: user
12 | });
13 |
14 | export const updateProfileInfo = (user: IProfile) => ({
15 | type: UPDATE_PROFILE_INFO,
16 | payload: user
17 | });
18 |
19 | export const updateProfilePicture = (image: Object) => ({
20 | type: UPDATE_PROFILE_PICTURE,
21 | payload: image
22 | });
23 |
24 | export const updateCoverPhoto = (image: Object) => ({
25 | type: UPDATE_COVER_PHOTO,
26 | payload: image
27 | });
28 |
29 | export type TProfileActionTypes =
30 | | ReturnType
31 | | ReturnType
32 | | ReturnType
33 | | ReturnType
34 | | ReturnType;
--------------------------------------------------------------------------------
/frontend/src/redux/reducer/modalReducer.ts:
--------------------------------------------------------------------------------
1 | import { HIDE_MODAL, SHOW_MODAL } from "~/constants/actionType";
2 | import { EModalType, IModalState } from "~/types/types";
3 | import { modalActionType } from "../action/modalActions";
4 |
5 | const initState: IModalState = {
6 | isOpenDeleteComment: false,
7 | isOpenDeletePost: false,
8 | isOpenEditPost: false,
9 | isOpenPostLikes: false
10 | }
11 |
12 | const modalMapType = {
13 | [EModalType.DELETE_COMMENT]: 'isOpenDeleteComment',
14 | [EModalType.DELETE_POST]: 'isOpenDeletePost',
15 | [EModalType.EDIT_POST]: 'isOpenEditPost',
16 | [EModalType.POST_LIKES]: 'isOpenPostLikes',
17 | }
18 |
19 | const modalReducer = (state = initState, action: modalActionType) => {
20 | switch (action.type) {
21 | case SHOW_MODAL:
22 | return {
23 | ...state,
24 | [modalMapType[action.payload]]: true
25 | }
26 | case HIDE_MODAL:
27 | return {
28 | ...state,
29 | [modalMapType[action.payload]]: false
30 | }
31 | default:
32 | return state;
33 | }
34 | }
35 |
36 | export default modalReducer;
--------------------------------------------------------------------------------
/server/src/helpers/utils.ts:
--------------------------------------------------------------------------------
1 | import { IUser } from "@/schemas/UserSchema";
2 | import Filter from 'bad-words';
3 |
4 | interface IResponseStatus {
5 | status_code: number;
6 | success: Boolean;
7 | data: any;
8 | error: any;
9 | timestamp: string | Date;
10 | }
11 |
12 | const initStatus: IResponseStatus = {
13 | status_code: 404,
14 | success: false,
15 | data: null,
16 | error: null,
17 | timestamp: null
18 | };
19 |
20 | const sessionizeUser = (user: Partial) => ({
21 | id: user._id,
22 | username: user.username,
23 | fullname: user.fullname,
24 | profilePicture: user.profilePicture
25 | })
26 |
27 | const makeResponseJson = (data: any, success = true) => {
28 | return {
29 | ...initStatus,
30 | status_code: 200,
31 | success,
32 | data,
33 | timestamp: new Date()
34 | };
35 | }
36 |
37 | const newBadWords = [
38 | 'gago', 'puta', 'animal', 'porn', 'amputa', 'tangina', 'pota', 'puta', 'putangina',
39 | 'libog', 'eut', 'iyot', 'iyutan', 'eutan', 'umiyot', 'karat', 'pornhub', 'ptngina', 'tngina'
40 | ];
41 |
42 | const filterWords = new Filter();
43 | filterWords.addWords(...newBadWords);
44 |
45 | export { sessionizeUser, makeResponseJson, filterWords };
46 |
47 |
--------------------------------------------------------------------------------
/frontend/src/redux/reducer/errorReducer.ts:
--------------------------------------------------------------------------------
1 | import {
2 | CLEAR_AUTH_ERR_MSG,
3 | SET_AUTH_ERR_MSG,
4 | SET_NEWSFEED_ERR_MSG,
5 | SET_PROFILE_ERR_MSG
6 | } from "~/constants/actionType";
7 | import { IErrorState } from "~/types/types";
8 | import { ErrorActionType } from "../action/errorActions";
9 |
10 | const initState: IErrorState = {
11 | authError: null,
12 | profileError: null,
13 | newsFeedError: null
14 | }
15 |
16 | const errorReducer = (state = initState, action: ErrorActionType) => {
17 | switch (action.type) {
18 | case SET_AUTH_ERR_MSG:
19 | return {
20 | ...state,
21 | authError: action.payload
22 | }
23 | case SET_PROFILE_ERR_MSG:
24 | return {
25 | ...state,
26 | profileError: action.payload
27 | }
28 | case SET_NEWSFEED_ERR_MSG:
29 | return {
30 | ...state,
31 | newsFeedError: action.payload
32 | }
33 | case CLEAR_AUTH_ERR_MSG:
34 | return {
35 | ...state,
36 | authError: null
37 | }
38 | default:
39 | return state;
40 | }
41 | };
42 |
43 | export default errorReducer;
44 |
--------------------------------------------------------------------------------
/frontend/src/redux/sagas/profileSaga.ts:
--------------------------------------------------------------------------------
1 | import { call, put } from "redux-saga/effects";
2 | import { GET_USER_START } from "~/constants/actionType";
3 | import { getUser } from "~/services/api";
4 | import { IProfile } from "~/types/types";
5 | import { setProfileErrorMessage } from "../action/errorActions";
6 | import { isGettingUser } from "../action/loadingActions";
7 | import { getUserSuccess } from "../action/profileActions";
8 |
9 | interface IProfileSaga {
10 | type: string;
11 | payload: any;
12 | }
13 |
14 | function* profileSaga({ type, payload }: IProfileSaga) {
15 | switch (type) {
16 | case GET_USER_START:
17 | try {
18 | yield put(isGettingUser(true));
19 | const user: IProfile = yield call(getUser, payload);
20 |
21 | yield put(isGettingUser(false));
22 | yield put(setProfileErrorMessage(null));
23 | yield put(getUserSuccess(user));
24 | } catch (e) {
25 | yield put(setProfileErrorMessage(e));
26 | yield put(isGettingUser(false));
27 | console.log(e);
28 | }
29 | break;
30 | default:
31 | throw new Error(`Unexpected action type ${type}.`);
32 | }
33 | }
34 |
35 | export default profileSaga;
36 |
--------------------------------------------------------------------------------
/frontend/src/redux/reducer/loadingReducer.ts:
--------------------------------------------------------------------------------
1 | import {
2 | SET_AUTH_LOADING,
3 | SET_CREATE_POST_LOADING,
4 | SET_GET_FEED_LOADING,
5 | SET_GET_USER_LOADING
6 | } from "~/constants/actionType";
7 | import { TLoadingActionType } from "../action/loadingActions";
8 |
9 | const initState = {
10 | isLoadingAuth: false,
11 | isLoadingCreatePost: false,
12 | isLoadingGetUser: false,
13 | isLoadingProfile: false,
14 | isLoadingFeed: false
15 | }
16 |
17 | const loadingReducer = (state = initState, action: TLoadingActionType) => {
18 | switch (action.type) {
19 | case SET_AUTH_LOADING:
20 | return {
21 | ...state,
22 | isLoadingAuth: action.payload
23 | }
24 | case SET_CREATE_POST_LOADING:
25 | return {
26 | ...state,
27 | isLoadingCreatePost: action.payload
28 | }
29 | case SET_GET_USER_LOADING:
30 | return {
31 | ...state,
32 | isLoadingGetUser: action.payload
33 | }
34 | case SET_GET_FEED_LOADING:
35 | return {
36 | ...state,
37 | isLoadingFeed: action.payload
38 | }
39 | default:
40 | return state;
41 | }
42 | };
43 |
44 | export default loadingReducer;
45 |
--------------------------------------------------------------------------------
/frontend/src/components/shared/Loader.tsx:
--------------------------------------------------------------------------------
1 |
2 | const Loader: React.FC<{ mode?: string; size?: string }> = ({ mode, size }) => {
3 | return (
4 |
27 | );
28 | };
29 |
30 | Loader.defaultProps = {
31 | mode: 'dark',
32 | size: 'sm'
33 | }
34 |
35 | export default Loader;
36 |
--------------------------------------------------------------------------------
/frontend/src/components/main/UserCard/index.tsx:
--------------------------------------------------------------------------------
1 | import { useSelector } from "react-redux";
2 | import { Link } from "react-router-dom";
3 | import { FollowButton } from '~/components/main';
4 | import { Avatar } from "~/components/shared";
5 | import { IProfile, IRootReducer, IUser } from "~/types/types";
6 |
7 | interface IProps {
8 | profile: IProfile | IUser;
9 | }
10 |
11 | const UserCard: React.FC = ({ profile }) => {
12 | const myUsername = useSelector((state: IRootReducer) => state.auth.username);
13 |
14 | return (
15 |
16 |
17 |
18 |
19 |
@{profile.username}
20 |
21 |
22 |
23 | {profile.username === myUsername ? (
24 |
Me
25 | ) : (
26 |
27 | )}
28 |
29 |
23 | {!isUpdateMode &&
}
24 |
25 |
32 | {isUpdateMode && Press Esc to Cancel}
33 |
34 |
29 |
45 |
46 | ) : null;
47 | };
48 |
49 | export default ImageLightbox;
50 |
--------------------------------------------------------------------------------
/frontend/src/redux/reducer/profileReducer.ts:
--------------------------------------------------------------------------------
1 | import { GET_USER_SUCCESS, UPDATE_COVER_PHOTO, UPDATE_PROFILE_INFO, UPDATE_PROFILE_PICTURE } from "~/constants/actionType";
2 | import { IProfile } from "~/types/types";
3 | import { TProfileActionTypes } from "../action/profileActions";
4 |
5 | const initState: IProfile = {
6 | _id: '',
7 | id: '',
8 | username: '',
9 | email: '',
10 | fullname: '',
11 | firstname: '',
12 | lastname: '',
13 | info: {
14 | bio: '',
15 | birthday: '',
16 | gender: 'unspecified',
17 | },
18 | isEmailValidated: false,
19 | profilePicture: {},
20 | coverPhoto: {},
21 | followersCount: 0,
22 | followingCount: 0,
23 | dateJoined: ''
24 | };
25 |
26 | const profileReducer = (state = initState, action: TProfileActionTypes) => {
27 | switch (action.type) {
28 | case GET_USER_SUCCESS:
29 | return action.payload;
30 | case UPDATE_PROFILE_PICTURE:
31 | return {
32 | ...state,
33 | profilePicture: action.payload
34 | }
35 | case UPDATE_PROFILE_INFO:
36 | const { payload: user } = action;
37 | return {
38 | ...state,
39 | fullname: user.fullname,
40 | firstname: user.firstname,
41 | lastname: user.lastname,
42 | info: user.info
43 | }
44 | case UPDATE_COVER_PHOTO:
45 | return {
46 | ...state,
47 | coverPhoto: action.payload
48 | }
49 | default:
50 | return state;
51 | }
52 | };
53 |
54 | export default profileReducer;
55 |
--------------------------------------------------------------------------------
/frontend/src/components/main/Chats/MinimizedChats.tsx:
--------------------------------------------------------------------------------
1 | import { useDispatch } from "react-redux";
2 | import { CSSTransition, TransitionGroup } from "react-transition-group";
3 | import Avatar from "~/components/shared/Avatar";
4 | import { initiateChat } from "~/redux/action/chatActions";
5 | import { IChatItemsState } from "~/types/types";
6 |
7 | interface IProps {
8 | users: IChatItemsState[]
9 | }
10 |
11 | const MinimizedChats: React.FC = ({ users }) => {
12 | const dispatch = useDispatch();
13 |
14 | return (
15 |
16 |
17 | {users.map(chat => chat.minimized && (
18 |
23 | dispatch(initiateChat(chat))}
26 | title={chat.username}
27 | >
28 |
33 |
37 |
53 | { props.children({ dispatchBookmark, isBookmarked, isLoading })}
54 |
55 | );
56 | };
57 |
58 | export default BookmarkButton;
59 |
--------------------------------------------------------------------------------
/server/src/services/follow.service.ts:
--------------------------------------------------------------------------------
1 | import { Follow } from "@/schemas";
2 | import { IUser } from "@/schemas/UserSchema";
3 |
4 | export const getFollow = (
5 | query: Object,
6 | type = 'followers',
7 | user: IUser,
8 | skip?: number,
9 | limit?: number
10 | ): Promise => {
11 | return new Promise(async (resolve, reject) => {
12 | try {
13 | const myFollowingDoc = await Follow.find({ user: user._id });
14 | const myFollowing = myFollowingDoc.map(user => user.target); // map to array of user IDs
15 |
16 | const agg = await Follow.aggregate([
17 | {
18 | $match: query
19 | },
20 | { $skip: skip },
21 | { $limit: limit },
22 | {
23 | $lookup: {
24 | from: 'users',
25 | localField: type === 'following' ? 'target' : 'user',
26 | foreignField: '_id',
27 | as: 'user'
28 | }
29 | },
30 | {
31 | $unwind: '$user'
32 | },
33 | {
34 | $addFields: {
35 | isFollowing: { $in: ['$user._id', myFollowing] }
36 | }
37 | },
38 | {
39 | $project: {
40 | _id: 0,
41 | id: '$user._id',
42 | username: '$user.username',
43 | email: '$user.email',
44 | profilePicture: '$user.profilePicture',
45 | isFollowing: 1
46 | }
47 | }
48 | ]);
49 |
50 | resolve(agg);
51 | } catch (err) {
52 | reject(err);
53 | }
54 | });
55 | }
--------------------------------------------------------------------------------
/frontend/src/components/main/LikeButton/index.tsx:
--------------------------------------------------------------------------------
1 | import { LikeOutlined } from '@ant-design/icons';
2 | import { useEffect, useState } from 'react';
3 | import { useDidMount } from '~/hooks';
4 | import { likePost } from '~/services/api';
5 |
6 | interface IProps {
7 | postID: string;
8 | isLiked: boolean;
9 | likeCallback: (postID: string, state: boolean, newLikeCount: number) => void;
10 | }
11 |
12 | const LikeButton: React.FC = (props) => {
13 | const [isLiked, setIsLiked] = useState(props.isLiked);
14 | const [isLoading, setLoading] = useState(false);
15 | const didMount = useDidMount();
16 |
17 | useEffect(() => {
18 | setIsLiked(props.isLiked);
19 | }, [props.isLiked]);
20 |
21 | const dispatchLike = async () => {
22 | if (isLoading) return;
23 |
24 | try {
25 | setLoading(true);
26 |
27 | const { state, likesCount } = await likePost(props.postID);
28 | if (didMount) {
29 | setLoading(false);
30 | setIsLiked(state);
31 | }
32 |
33 | props.likeCallback(props.postID, state, likesCount);
34 | } catch (e) {
35 | didMount && setLoading(false);
36 | console.log(e);
37 | }
38 | }
39 |
40 | return (
41 |
45 |
46 |
47 |
48 | {isLiked ? 'Unlike' : 'Like'}
49 |
50 | );
51 | };
52 |
53 | export default LikeButton;
54 |
--------------------------------------------------------------------------------
/frontend/src/redux/store/store.ts:
--------------------------------------------------------------------------------
1 | import { Dispatch } from 'react';
2 | import { applyMiddleware, compose, createStore, Store } from 'redux';
3 | import createSagaMiddleware from 'redux-saga';
4 | import rootReducer from '../reducer/rootReducer';
5 | import rootSaga from '../sagas';
6 |
7 | declare global {
8 | interface Window {
9 | __REDUX_DEVTOOLS_EXTENSION_COMPOSE__?: typeof compose;
10 | }
11 | }
12 |
13 | const localStorageMiddleware = (store: Store) => {
14 | return (next: Dispatch) => (action: any) => {
15 | const result = next(action);
16 | try {
17 | const { settings } = store.getState();
18 | localStorage.setItem('foodie_theme', JSON.stringify(settings.theme));
19 | } catch (e) {
20 | console.log('Error while saving in localStorage', e);
21 | }
22 | return result;
23 | };
24 | };
25 |
26 | const reHydrateStore = () => {
27 | const storage = localStorage.getItem('foodie_theme');
28 | if (storage && storage !== null) {
29 | return {
30 | settings: {
31 | theme: JSON.parse(storage)
32 | }
33 | };
34 | }
35 | return undefined;
36 | };
37 |
38 | const sagaMiddleware = createSagaMiddleware();
39 | const middlewares: any = [sagaMiddleware, localStorageMiddleware];
40 | const composeEnhancers = window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__ || compose;
41 |
42 | if (process.env.NODE_ENV === `development`) {
43 | const { logger } = require(`redux-logger`);
44 |
45 | middlewares.push(logger);
46 | }
47 |
48 | const configureStore = () => {
49 | const store = createStore(
50 | rootReducer,
51 | reHydrateStore(),
52 | composeEnhancers(applyMiddleware(...middlewares)),
53 | );
54 |
55 | sagaMiddleware.run(rootSaga);
56 | return store;
57 | };
58 |
59 | const store = configureStore();
60 |
61 | export default store;
62 |
--------------------------------------------------------------------------------
/server/src/schemas/CommentSchema.ts:
--------------------------------------------------------------------------------
1 | import { Document, model, Schema } from "mongoose";
2 | import { IPost } from "./PostSchema";
3 | import { IUser } from "./UserSchema";
4 |
5 | export interface IComment extends Document {
6 | _post_id: IPost['_id'];
7 | body: string;
8 | _author_id: IUser['_id'];
9 | depth: number;
10 | parent: IComment['id'];
11 | parents: IComment['id'][];
12 | isEdited: boolean;
13 | createdAt: number | Date;
14 | updatedAt: number | Date;
15 | }
16 |
17 | const options = {
18 | timestamps: true,
19 | toJSON: {
20 | virtuals: true,
21 | transform: function (doc, ret, opt) {
22 | delete ret.parents;
23 | return ret;
24 | }
25 | },
26 | toObject: {
27 | getters: true,
28 | virtuals: true,
29 | transform: function (doc, ret, opt) {
30 | delete ret.parents;
31 | return ret;
32 | }
33 | }
34 | }
35 |
36 | const CommentSchema = new Schema({
37 | _post_id: {
38 | type: Schema.Types.ObjectId,
39 | ref: 'Post',
40 | required: true
41 | },
42 | parent: {
43 | type: Schema.Types.ObjectId,
44 | ref: 'Comment',
45 | default: null
46 | },
47 | parents: [{
48 | type: Schema.Types.ObjectId,
49 | ref: 'Comment'
50 | }],
51 | depth: {
52 | type: Number,
53 | default: 1
54 | },
55 | body: String,
56 | _author_id: {
57 | type: Schema.Types.ObjectId,
58 | ref: 'User'
59 | },
60 | isEdited: {
61 | type: Boolean,
62 | default: false
63 | },
64 | createdAt: Date,
65 | updatedAt: Date
66 | }, options);
67 |
68 | CommentSchema.virtual('author', {
69 | ref: 'User',
70 | localField: '_author_id',
71 | foreignField: '_id',
72 | justOne: true
73 | });
74 |
75 | export default model('Comment', CommentSchema);
76 |
--------------------------------------------------------------------------------
/frontend/src/redux/sagas/newsFeedSaga.ts:
--------------------------------------------------------------------------------
1 | import { toast } from "react-toastify";
2 | import { call, put } from "redux-saga/effects";
3 | import { CREATE_POST_START, GET_FEED_START } from "~/constants/actionType";
4 | import { createPost, getNewsFeed } from "~/services/api";
5 | import { IPost } from "~/types/types";
6 | import { setNewsFeedErrorMessage } from "../action/errorActions";
7 | import { createPostSuccess, getNewsFeedSuccess } from "../action/feedActions";
8 | import { isCreatingPost, isGettingFeed } from "../action/loadingActions";
9 |
10 | interface INewsFeedSaga {
11 | type: string;
12 | payload: any;
13 | }
14 |
15 | function* newsFeedSaga({ type, payload }: INewsFeedSaga) {
16 | switch (type) {
17 | case GET_FEED_START:
18 | try {
19 | yield put(isGettingFeed(true));
20 | yield put(setNewsFeedErrorMessage(null));
21 |
22 | const posts: IPost[] = yield call(getNewsFeed, payload);
23 |
24 | yield put(isGettingFeed(false));
25 | yield put(getNewsFeedSuccess(posts));
26 | } catch (e) {
27 | console.log(e);
28 | yield put(isGettingFeed(false));
29 | yield put(setNewsFeedErrorMessage(e))
30 | }
31 |
32 | break;
33 | case CREATE_POST_START:
34 | try {
35 | yield put(isCreatingPost(true));
36 |
37 | const post: IPost = yield call(createPost, payload);
38 |
39 | yield put(createPostSuccess(post));
40 | yield put(isCreatingPost(false));
41 | toast.dismiss();
42 | toast.dark('Post succesfully created.');
43 | } catch (e) {
44 | yield put(isCreatingPost(false));
45 | console.log(e);
46 | }
47 | break;
48 | default:
49 | throw new Error('Unexpected action type.')
50 | }
51 | }
52 |
53 | export default newsFeedSaga;
54 |
--------------------------------------------------------------------------------
/frontend/src/redux/action/feedActions.ts:
--------------------------------------------------------------------------------
1 | import {
2 | CLEAR_FEED,
3 | CREATE_POST_START,
4 | CREATE_POST_SUCCESS,
5 | DELETE_FEED_POST,
6 | GET_FEED_START,
7 | GET_FEED_SUCCESS,
8 | HAS_NEW_FEED,
9 | UPDATE_FEED_POST,
10 | UPDATE_POST_LIKES
11 | } from "~/constants/actionType";
12 | import { IFetchParams, IPost } from "~/types/types";
13 |
14 | export const getNewsFeedStart = (options?: IFetchParams) => ({
15 | type: GET_FEED_START,
16 | payload: options
17 | });
18 |
19 | export const getNewsFeedSuccess = (posts: IPost[]) => ({
20 | type: GET_FEED_SUCCESS,
21 | payload: posts
22 | });
23 |
24 | export const createPostStart = (post: FormData) => ({
25 | type: CREATE_POST_START,
26 | payload: post
27 | });
28 |
29 | export const createPostSuccess = (post: IPost) => ({
30 | type: CREATE_POST_SUCCESS,
31 | payload: post
32 | });
33 |
34 | export const updateFeedPost = (post: IPost) => ({
35 | type: UPDATE_FEED_POST,
36 | payload: post
37 | });
38 |
39 | export const updatePostLikes = (postID: string, state: boolean, likesCount: number) => ({
40 | type: UPDATE_POST_LIKES,
41 | payload: { postID, state, likesCount }
42 | });
43 |
44 | export const deleteFeedPost = (postID: string) => ({
45 | type: DELETE_FEED_POST,
46 | payload: postID
47 | });
48 |
49 | export const clearNewsFeed = () => ({
50 | type: CLEAR_FEED
51 | });
52 |
53 | export const hasNewFeed = (bool = true) => ({
54 | type: HAS_NEW_FEED,
55 | payload: bool
56 | });
57 |
58 | export type TNewsFeedActionType =
59 | | ReturnType
60 | | ReturnType
61 | | ReturnType
62 | | ReturnType
63 | | ReturnType
64 | | ReturnType
65 | | ReturnType
66 | | ReturnType
67 | | ReturnType;
--------------------------------------------------------------------------------
/server/src/storage/filestorage.ts:
--------------------------------------------------------------------------------
1 | import config from '@/config/config';
2 | import { Storage } from '@google-cloud/storage';
3 | import { format } from 'util';
4 |
5 | const storage = new Storage(config.gCloudStorage);
6 |
7 | const bucket = storage.bucket(process.env.FIREBASE_STORAGE_BUCKET_URL);
8 |
9 | const uploadImageToStorage = (file) => {
10 | return new Promise((resolve, reject) => {
11 | if (!file) {
12 | reject('No image file');
13 | }
14 | let newFileName = `${file.originalname}`;
15 |
16 | let fileUpload = bucket.file(newFileName);
17 |
18 | const blobStream = fileUpload.createWriteStream({
19 | metadata: {
20 | contentType: file.mimetype
21 | }
22 | });
23 |
24 | blobStream.on('error', (err) => {
25 | console.log(err);
26 | reject('Something is wrong! Unable to upload at the moment.');
27 | });
28 |
29 | blobStream.on('finish', () => {
30 | // The public URL can be used to directly access the file via HTTP.
31 | const url = format(`https://storage.googleapis.com/${bucket.name}/${fileUpload.name}`);
32 | resolve(url);
33 | });
34 |
35 | blobStream.end(file.buffer);
36 | });
37 | }
38 |
39 | const deleteImageFromStorage = (...images) => {
40 | return new Promise(async (resolve, reject) => {
41 | if (images.length === 0) {
42 | return reject('Images to delete not provided.');
43 | }
44 |
45 | try {
46 | images.map(async (image) => {
47 | const spl = image.split('/');
48 | const filename = spl[spl.length - 1];
49 |
50 | await bucket.file(filename).delete();
51 | });
52 |
53 | resolve('Successfully deleted.');
54 | } catch (e) {
55 | console.log(e);
56 | reject('Cannot delete images.');
57 | }
58 | });
59 | }
60 |
61 | export { uploadImageToStorage, deleteImageFromStorage };
62 |
63 |
--------------------------------------------------------------------------------
/frontend/src/components/main/FollowButton/index.tsx:
--------------------------------------------------------------------------------
1 | import { CheckOutlined, UserAddOutlined } from "@ant-design/icons";
2 | import { useEffect, useState } from "react";
3 | import { useDidMount } from "~/hooks";
4 | import { followUser, unfollowUser } from "~/services/api";
5 |
6 | interface IProps {
7 | isFollowing: boolean;
8 | userID: string;
9 | size?: string;
10 | }
11 |
12 | const FollowButton: React.FC = (props) => {
13 | const [isFollowing, setIsFollowing] = useState(props.isFollowing);
14 | const [isLoading, setLoading] = useState(false);
15 | const didMount = useDidMount();
16 |
17 | useEffect(() => {
18 | setIsFollowing(props.isFollowing);
19 | }, [props.isFollowing])
20 |
21 | const dispatchFollow = async () => {
22 | try {
23 | setLoading(true);
24 | if (isFollowing) {
25 | const result = await unfollowUser(props.userID);
26 | didMount && setIsFollowing(result.state);
27 | } else {
28 | const result = await followUser(props.userID);
29 | didMount && setIsFollowing(result.state);
30 | }
31 |
32 | didMount && setLoading(false);
33 | } catch (e) {
34 | didMount && setLoading(false);
35 | console.log(e);
36 | }
37 | };
38 |
39 | return (
40 |
55 | );
56 | };
57 |
58 | export default FollowButton;
59 |
--------------------------------------------------------------------------------
/frontend/README.md:
--------------------------------------------------------------------------------
1 | # Getting Started with Create React App
2 |
3 | This project was bootstrapped with [Create React App](https://github.com/facebook/create-react-app).
4 |
5 | ## Available Scripts
6 |
7 | In the project directory, you can run:
8 |
9 | ### `yarn start`
10 |
11 | Runs the app in the development mode.\
12 | Open [http://localhost:3000](http://localhost:3000) to view it in the browser.
13 |
14 | The page will reload if you make edits.\
15 | You will also see any lint errors in the console.
16 |
17 | ### `yarn test`
18 |
19 | Launches the test runner in the interactive watch mode.\
20 | See the section about [running tests](https://facebook.github.io/create-react-app/docs/running-tests) for more information.
21 |
22 | ### `yarn build`
23 |
24 | Builds the app for production to the `build` folder.\
25 | It correctly bundles React in production mode and optimizes the build for the best performance.
26 |
27 | The build is minified and the filenames include the hashes.\
28 | Your app is ready to be deployed!
29 |
30 | See the section about [deployment](https://facebook.github.io/create-react-app/docs/deployment) for more information.
31 |
32 | ### `yarn eject`
33 |
34 | **Note: this is a one-way operation. Once you `eject`, you can’t go back!**
35 |
36 | If you aren’t satisfied with the build tool and configuration choices, you can `eject` at any time. This command will remove the single build dependency from your project.
37 |
38 | Instead, it will copy all the configuration files and the transitive dependencies (webpack, Babel, ESLint, etc) right into your project so you have full control over them. All of the commands except `eject` will still work, but they will point to the copied scripts so you can tweak them. At this point you’re on your own.
39 |
40 | You don’t have to ever use `eject`. The curated feature set is suitable for small and middle deployments, and you shouldn’t feel obligated to use this feature. However we understand that this tool wouldn’t be useful if you couldn’t customize it when you are ready for it.
41 |
42 | ## Learn More
43 |
44 | You can learn more in the [Create React App documentation](https://facebook.github.io/create-react-app/docs/getting-started).
45 |
46 | To learn React, check out the [React documentation](https://reactjs.org/).
47 |
--------------------------------------------------------------------------------
/frontend/src/pages/home/SideMenu.tsx:
--------------------------------------------------------------------------------
1 | import { StarOutlined, TeamOutlined } from "@ant-design/icons";
2 | import { Link } from "react-router-dom";
3 | import { Avatar } from "~/components/shared";
4 |
5 | interface IProps {
6 | username: string;
7 | profilePicture?: string;
8 | }
9 |
10 | const SideMenu: React.FC = ({ username, profilePicture }) => {
11 | return (
12 |
13 | -
14 |
15 |
16 |
My Profile
17 |
18 |
19 | -
20 |
21 |
22 |
Following
23 |
24 |
25 | -
26 |
27 |
28 |
Followers
29 |
30 |
31 | -
32 |
33 |
34 |
Bookmarks
35 |
36 |
37 |
38 | )
39 | };
40 |
41 | export default SideMenu;
42 |
--------------------------------------------------------------------------------
/server/src/storage/cloudinary.ts:
--------------------------------------------------------------------------------
1 | import config from '@/config/config';
2 | import { AdminApiOptions, v2 as cloudinaryV2 } from 'cloudinary';
3 | import Multer from 'multer';
4 |
5 | cloudinaryV2.config(config.cloudinary);
6 |
7 | export const multer = Multer({
8 | dest: 'uploads/',
9 | limits: {
10 | fileSize: 2 * 1024 * 1024 // no larger than 2mb
11 | }
12 | });
13 |
14 | export const uploadImageToStorage = (file: File | File[], folder: string) => {
15 | if (file) {
16 | return new Promise(async (resolve, reject) => {
17 | const opts: AdminApiOptions = {
18 | folder,
19 | resource_type: 'auto',
20 | overwrite: true,
21 | quality: 'auto'
22 | };
23 |
24 | if (Array.isArray(file)) {
25 | const req = file.map((img: any) => {
26 | return cloudinaryV2.uploader.upload(img.path, opts);
27 | });
28 |
29 | try {
30 | const result = await Promise.all(req);
31 | resolve(result);
32 | } catch (err) {
33 | reject(err);
34 | }
35 | } else {
36 | try {
37 | const result = await cloudinaryV2.uploader.upload((file as any).path, opts);
38 | resolve(result);
39 | } catch (err) {
40 | reject(err);
41 | }
42 | }
43 | });
44 | }
45 | }
46 |
47 | export const deleteImageFromStorage = (publicID: string | string[]) => {
48 | if (publicID) {
49 | return new Promise(async (resolve, reject) => {
50 | if (Array.isArray(publicID)) {
51 | try {
52 | await cloudinaryV2.api.delete_resources(publicID);
53 | resolve({ state: true });
54 | } catch (err) {
55 | reject(err);
56 | }
57 | } else {
58 | try {
59 | await cloudinaryV2.uploader.destroy(publicID, { invalidate: true });
60 | resolve({ state: true });
61 | } catch (err) {
62 | reject(err);
63 | }
64 | }
65 | });
66 | }
67 | }
--------------------------------------------------------------------------------
/frontend/src/styles/utils/utils.css:
--------------------------------------------------------------------------------
1 | .excerpt-text {
2 | display: -webkit-box;
3 | overflow : hidden;
4 | text-overflow: ellipsis;
5 | -webkit-line-clamp: number_of_lines_you_want;
6 | -webkit-box-orient: vertical;
7 | }
8 |
9 | .animate-loader {
10 | width: 10px;
11 | height: 10px;
12 | border-radius: 50%;
13 | animation-duration: .5s;
14 | animation-iteration-count: infinite;
15 | animation-timing-function: ease;
16 | animation-direction: alternate;
17 |
18 | &:nth-of-type(1) {
19 | animation-delay: .2s;
20 | }
21 |
22 | &:nth-of-type(2) {
23 | animation-delay: .5s;
24 | }
25 |
26 | &:nth-of-type(3) {
27 | animation-delay: .8s;
28 | }
29 | }
30 |
31 | .animate-loader-dark {
32 | @apply bg-indigo-700;
33 | animation-name: blink-dark;
34 |
35 | }
36 |
37 | .animate-loader-light {
38 | @apply bg-white;
39 | animation-name: blink-light;
40 | }
41 |
42 | @keyframes blink-dark {
43 | to {
44 | background: #a29afc;
45 | }
46 | }
47 |
48 | @keyframes blink-light {
49 | to {
50 | opacity: .3;
51 | }
52 | }
53 |
54 | .Toastify {
55 | z-index: 9999;
56 | }
57 |
58 | .animate-fade {
59 | animation: animate-fade .5s ease;
60 | }
61 |
62 | @keyframes animate-fade {
63 | 0% {
64 | opacity: 0;
65 | }
66 | 100% {
67 | opacity: 1;
68 | }
69 | }
70 |
71 | .fade-enter {
72 | max-height: 0;
73 | opacity: 0;
74 | }
75 |
76 | .fade-enter-active {
77 | max-height: 500px;
78 | opacity: 1;
79 | transition: all .5s;
80 | }
81 |
82 | .fade-exit {
83 | max-height: 500px;
84 | opacity: 1;
85 | }
86 |
87 | .fade-exit-active {
88 | max-height: 0;
89 | opacity: 0;
90 | transition: all .5s;
91 | }
92 |
93 | .social-login-divider {
94 | position: relative;
95 | display: block;
96 | width: 100%;
97 | text-align: center;
98 | @apply text-sm;
99 | @apply text-gray-400;
100 |
101 | &:after,
102 | &:before {
103 | content: '';
104 | position: absolute;
105 | top: 0;
106 | bottom: 0;
107 | margin: auto 0;
108 | width: 45%;
109 | height: 1px;
110 | @apply bg-gray-200;
111 | }
112 |
113 | &:after {
114 | right: 0;
115 | }
116 |
117 | &:before {
118 | left: 0;
119 | }
120 | }
--------------------------------------------------------------------------------
/server/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "server",
3 | "version": "0.0.0",
4 | "private": true,
5 | "scripts": {
6 | "serve": "node ./build/server.js",
7 | "start": "nodemon --exec ts-node --files -r tsconfig-paths/register src/server.ts",
8 | "build": "rimraf ./build && tsc && ef-tspm",
9 | "postinstall": "rimraf ./build && tsc && ef-tspm"
10 | },
11 | "engines": {
12 | "node": "12.18.1"
13 | },
14 | "dependencies": {
15 | "@google-cloud/storage": "^5.7.2",
16 | "bad-words": "^3.0.4",
17 | "bcrypt": "^5.0.0",
18 | "cloudinary": "^1.25.0",
19 | "connect-mongo": "^3.2.0",
20 | "cookie-parser": "~1.4.4",
21 | "cors": "^2.8.5",
22 | "cross-env": "^7.0.3",
23 | "csurf": "^1.11.0",
24 | "debug": "~2.6.9",
25 | "express": "^4.16.4",
26 | "express-rate-limit": "^5.2.3",
27 | "express-session": "^1.17.1",
28 | "helmet": "^4.2.0",
29 | "hpp": "^0.2.3",
30 | "http-errors": "~1.6.3",
31 | "jade": "~1.11.0",
32 | "joi": "^17.3.0",
33 | "jsonwebtoken": "^8.5.1",
34 | "lodash.omit": "^4.5.0",
35 | "mongoose": "^5.11.5",
36 | "morgan": "~1.9.1",
37 | "multer": "^1.4.2",
38 | "node-fetch": "^2.6.1",
39 | "passport": "^0.4.1",
40 | "passport-facebook": "^3.0.0",
41 | "passport-github": "^1.1.0",
42 | "passport-google-oauth2": "^0.2.0",
43 | "passport-local": "^1.0.0",
44 | "socket.io": "^3.0.4"
45 | },
46 | "devDependencies": {
47 | "@ef-carbon/tspm": "^2.2.5",
48 | "@types/bad-words": "^3.0.0",
49 | "@types/bcrypt": "^3.0.0",
50 | "@types/connect-mongo": "^3.1.3",
51 | "@types/csurf": "^1.11.0",
52 | "@types/express": "^4.17.11",
53 | "@types/express-session": "^1.17.0",
54 | "@types/hpp": "^0.2.1",
55 | "@types/http-errors": "^1.8.0",
56 | "@types/morgan": "^1.9.2",
57 | "@types/multer": "^1.4.5",
58 | "@types/node": "^14.14.25",
59 | "@types/passport": "^1.0.5",
60 | "@types/passport-facebook": "^2.1.10",
61 | "@types/passport-github": "^1.1.5",
62 | "@types/passport-google-oauth2": "^0.1.3",
63 | "@types/passport-local": "^1.0.33",
64 | "@types/socket.io": "^2.1.13",
65 | "clean-css": "^4.2.3",
66 | "dotenv": "^8.2.0",
67 | "mquery": "^3.2.3",
68 | "nodemon": "^2.0.6",
69 | "rimraf": "^3.0.2",
70 | "ts-node": "^9.1.1",
71 | "tsconfig-paths": "^3.9.0",
72 | "typescript": "^4.1.3"
73 | }
74 | }
75 |
--------------------------------------------------------------------------------
/frontend/src/components/main/Comments/CommentList.tsx:
--------------------------------------------------------------------------------
1 | import { LoadingOutlined } from "@ant-design/icons";
2 | import React, { lazy, Suspense, useEffect, useState } from "react";
3 | import { useDispatch } from "react-redux";
4 | import { CSSTransition, TransitionGroup } from "react-transition-group";
5 | import { useDidMount, useModal } from "~/hooks";
6 | import { setTargetComment } from "~/redux/action/helperActions";
7 | import { IComment } from "~/types/types";
8 | import CommentItem from "./CommentItem";
9 |
10 | const DeleteCommentModal = lazy(() => import('~/components/main/Modals/DeleteCommentModal'))
11 |
12 | interface IProps {
13 | comments: IComment[];
14 | updateCommentCallback?: (comment: IComment) => void;
15 | }
16 |
17 | const CommentList: React.FC = ({ comments, updateCommentCallback }) => {
18 | const didMount = useDidMount();
19 | const dispatch = useDispatch();
20 | const [replies, setReplies] = useState(comments);
21 | const { isOpen, closeModal, openModal } = useModal();
22 |
23 | useEffect(() => {
24 | didMount && setReplies(comments);
25 | // eslint-disable-next-line react-hooks/exhaustive-deps
26 | }, [comments]);
27 |
28 | const deleteSuccessCallback = (comment: IComment) => {
29 | if (didMount) {
30 | (updateCommentCallback) && updateCommentCallback(comment); // For updating the base/parent comment
31 | dispatch(setTargetComment(null));
32 | setReplies(oldComments => oldComments.filter((cmt) => cmt.id !== comment.id));
33 | }
34 | }
35 |
36 | return (
37 |
38 | {replies.map(comment => (
39 |
44 |
45 |
46 | ))}
47 | {/* ---- DELETE MODAL ---- */}
48 | }>
49 | {isOpen && (
50 |
55 | )}
56 |
57 |
58 | );
59 | };
60 |
61 | export default CommentList;
62 |
--------------------------------------------------------------------------------
/frontend/src/components/shared/ThemeToggler.tsx:
--------------------------------------------------------------------------------
1 | import { useEffect } from 'react';
2 | import { useDispatch, useSelector } from 'react-redux';
3 | import { setTheme } from '~/redux/action/settingsActions';
4 | import { IRootReducer } from '~/types/types';
5 |
6 | const ThemeToggler = () => {
7 | const { theme } = useSelector((state: IRootReducer) => ({ theme: state.settings.theme }));
8 | const dispatch = useDispatch();
9 |
10 | useEffect(() => {
11 | const root = document.documentElement;
12 |
13 | if (theme === 'dark') {
14 | root.classList.add('dark');
15 | } else {
16 | root.classList.remove('dark');
17 | }
18 | }, [theme]);
19 |
20 | const onThemeChange = (e: React.ChangeEvent) => {
21 | if (e.target.checked) {
22 | dispatch(setTheme('dark'));
23 | } else {
24 | dispatch(setTheme('light'));
25 | }
26 | }
27 |
28 | return (
29 |
57 | );
58 | };
59 |
60 | export default ThemeToggler;
--------------------------------------------------------------------------------
/frontend/src/constants/actionType.ts:
--------------------------------------------------------------------------------
1 | // ---- AUTH CONSTANTS
2 | export const LOGIN_START = 'LOGIN_START';
3 | export const LOGIN_SUCCESS = 'LOGIN_SUCCESS';
4 | export const CHECK_SESSION = 'CHECK_SESSION';
5 | export const LOGOUT_START = 'LOGOUT_START';
6 | export const LOGOUT_SUCCESS = 'LOGOUT_SUCCESS';
7 | export const REGISTER_START = 'REGISTER_START';
8 | export const REGISTER_SUCCESS = 'REGISTER_SUCCESS';
9 |
10 | // ---- ERROR CONSTANTS
11 | export const SET_AUTH_ERR_MSG = 'SET_AUTH_ERR_MSG';
12 | export const CLEAR_AUTH_ERR_MSG = 'CLEAR_AUTH_ERR_MSG';
13 | export const SET_PROFILE_ERR_MSG = 'SET_PROFILE_ERR_MSG';
14 | export const SET_NEWSFEED_ERR_MSG = 'SET_NEWSFEED_ERR_MSG';
15 |
16 | // ---- LOADING CONSTANTS
17 | export const SET_AUTH_LOADING = 'SET_AUTH_LOADING';
18 | export const SET_CREATE_POST_LOADING = 'SET_CREATE_POST_LOADING';
19 | export const SET_GET_USER_LOADING = 'SET_GET_USER_LOADING';
20 | export const SET_GET_FEED_LOADING = 'SET_GET_FEED_LOADING';
21 |
22 | // ---- FEED CONSTANTS
23 | export const GET_FEED_START = 'GET_FEED_START';
24 | export const GET_FEED_SUCCESS = 'GET_FEED_SUCCESS';
25 | export const CREATE_POST_START = 'CREATE_POST_START';
26 | export const CREATE_POST_SUCCESS = 'CREATE_POST_SUCCESS';
27 | export const UPDATE_FEED_POST = 'UPDATE_FEED_POST';
28 | export const DELETE_FEED_POST = 'DELETE_FEED_POST';
29 | export const UPDATE_USER_POST = 'UPDATE_USER_POST';
30 | export const CLEAR_FEED = 'CLEAR_FEED';
31 | export const HAS_NEW_FEED = 'HAS_NEW_FEED';
32 | export const UPDATE_POST_LIKES = 'UPDATE_POST_LIKES';
33 |
34 | // ---- PROFILE CONSTANTS
35 | export const UPDATE_PROFILE_INFO = 'UPDATE_PROFILE_INFO';
36 | export const UPDATE_PROFILE_PICTURE = 'UPDATE_PROFILE_PICTURE';
37 | export const UPDATE_COVER_PHOTO = 'UPDATE_COVER_PHOTO';
38 | export const UPDATE_AUTH_PICTURE = 'UPDATE_AUTH_PICTURE';
39 | export const GET_USER_START = 'GET_USER_START';
40 | export const GET_USER_SUCCESS = 'GET_USER_SUCCESS';
41 |
42 | // ---- CHAT CONSTANTS
43 | export const INITIATE_CHAT = 'INITIATE_CHAT';
44 | export const MINIMIZE_CHAT = 'MINIMIZE_CHAT';
45 | export const CLOSE_CHAT = 'CLOSE_CHAT';
46 | export const CLEAR_CHAT = 'CLEAR_CHAT';
47 | export const GET_MESSAGES_SUCCESS = 'GET_MESSAGES_SUCCESS';
48 | export const NEW_MESSAGE_ARRIVED = 'NEW_MESSAGE_ARRIVED';
49 |
50 | // ---- SETTINGS CONSTANTS
51 | export const SET_THEME = 'SET_THEME';
52 |
53 | // ---- HELPERS CONSTANTS
54 | export const SET_TARGET_COMMENT = 'SET_TARGET_COMMENT_ID';
55 | export const SET_TARGET_POST = 'SET_TARGET_POST';
56 |
57 | // ---- MODAL CONSTANTS
58 | export const SHOW_MODAL = 'SHOW_MODAL';
59 | export const HIDE_MODAL = 'HIDE_MODAL';
--------------------------------------------------------------------------------
/frontend/src/redux/reducer/newsFeedReducer.ts:
--------------------------------------------------------------------------------
1 | import { CLEAR_FEED, CREATE_POST_SUCCESS, DELETE_FEED_POST, GET_FEED_SUCCESS, HAS_NEW_FEED, UPDATE_FEED_POST, UPDATE_POST_LIKES } from "~/constants/actionType";
2 | import { INewsFeed, IPost } from "~/types/types";
3 | import { TNewsFeedActionType } from "../action/feedActions";
4 |
5 | const initState: INewsFeed = {
6 | items: [],
7 | offset: 0,
8 | hasNewFeed: false
9 | };
10 |
11 | const newsFeedReducer = (state = initState, action: TNewsFeedActionType) => {
12 | switch (action.type) {
13 | case GET_FEED_SUCCESS:
14 | return {
15 | ...state,
16 | items: [...state.items, ...action.payload],
17 | offset: state.offset + 1
18 | };
19 | case CREATE_POST_SUCCESS:
20 | return {
21 | ...state,
22 | items: [action.payload, ...state.items]
23 | };
24 | case CLEAR_FEED:
25 | return initState;
26 | case UPDATE_FEED_POST:
27 | return {
28 | ...state,
29 | items: state.items.map((post: IPost) => {
30 | if (post.id === action.payload.id) {
31 | return {
32 | ...post,
33 | ...action.payload
34 | };
35 | }
36 | return post;
37 | })
38 | }
39 | case UPDATE_POST_LIKES:
40 | return {
41 | ...state,
42 | items: state.items.map((post: IPost) => {
43 | if (post.id === action.payload.postID) {
44 | return {
45 | ...post,
46 | isLiked: action.payload.state,
47 | likesCount: action.payload.likesCount
48 | };
49 | }
50 | return post;
51 | })
52 | }
53 | case DELETE_FEED_POST:
54 | return {
55 | ...state,
56 | // eslint-disable-next-line array-callback-return
57 | items: state.items.filter((post: IPost) => {
58 | if (post.id !== action.payload) {
59 | return post;
60 | }
61 | })
62 | }
63 | case HAS_NEW_FEED:
64 | return {
65 | ...state,
66 | hasNewFeed: action.payload
67 | }
68 | default:
69 | return state;
70 | }
71 | };
72 |
73 | export default newsFeedReducer;
74 |
--------------------------------------------------------------------------------
/frontend/src/components/main/Modals/ComposeMessageModal.tsx:
--------------------------------------------------------------------------------
1 | import { CloseOutlined, FormOutlined } from '@ant-design/icons';
2 | import Modal from 'react-modal';
3 | import { useDispatch } from 'react-redux';
4 | import { useHistory } from 'react-router-dom';
5 | import { SearchInput } from '~/components/shared';
6 | import { initiateChat } from '~/redux/action/chatActions';
7 | import { IUser } from '~/types/types';
8 |
9 | interface IProps {
10 | isOpen: boolean;
11 | onAfterOpen?: () => void;
12 | closeModal: () => void;
13 | openModal: () => void;
14 | userID: string;
15 | }
16 |
17 | Modal.setAppElement('#root');
18 |
19 | const ComposeMessageModal: React.FC = (props) => {
20 | const dispatch = useDispatch();
21 | const history = useHistory();
22 |
23 | const clickSearchResultCallback = (user: IUser) => {
24 | if (props.userID === user.id) return;
25 | dispatch(initiateChat(user));
26 | props.closeModal();
27 |
28 | if (window.screen.width < 800) {
29 | history.push(`/chat/${user.username}`);
30 | }
31 | }
32 |
33 | return (
34 |
43 |
44 |
48 |
49 |
50 |
51 |
52 | Compose Message
53 |
54 |
55 |
To:
56 |
62 |
63 |
35 |
39 |
40 |
41 | {props.error && (
42 |
43 | {props.error?.error?.message || 'Unable to process your request.'}
44 |
45 | )}
46 |
47 |
Confirm Logout
48 |
Are you sure you want to logout?
49 |
50 |
57 |
64 |
65 |
66 |
19 |
27 | {props.isOwnProfile && (
28 | <>
29 | {props.isUploadingCoverPhoto ?
: (
30 | <>
31 | {props.coverPhoto.imageFile.file ? (
32 |
33 |
36 |
37 |
43 |
44 |
45 |
46 | ) : (
47 |
55 |
56 | )}
57 |
58 | )}
59 |
60 | )}
61 |
62 |
57 |
58 |
59 | )}
60 | {(!isLoading && !error && post) && (
61 |
64 | )}
65 | {(!isLoading && error) && (
66 | <>
67 | {error.status_code === 404 ? (
68 |
69 | ) : (
70 |
71 |
72 | {error?.error?.message || 'Something went wrong :('}
73 |
74 |
75 | )}
76 |
77 | )}
78 | {/* ----- ALL PSOST MODALS ----- */}
79 |
83 |
84 | )
85 | };
86 |
87 | export default Post;
88 |
--------------------------------------------------------------------------------
/server/src/app.ts:
--------------------------------------------------------------------------------
1 | import cors from 'cors';
2 | import csurf from 'csurf';
3 | import createDebug from 'debug';
4 | import express from 'express';
5 | import session, { SessionOptions } from 'express-session';
6 | import helmet from 'helmet';
7 | import hpp from 'hpp';
8 | import http, { Server } from 'http';
9 | import createError from 'http-errors';
10 | import logger from 'morgan';
11 | import passport from 'passport';
12 | import config from './config/config';
13 | import initializePassport from './config/passport';
14 | import initializeSocket from './config/socket';
15 | import initializeDB from './db/db';
16 | import errorHandler from './middlewares/error.middleware';
17 | import routers from './routes/createRouter';
18 |
19 | const debug = createDebug('server:server');
20 |
21 | console.log(config);
22 |
23 | class Express {
24 | public app: express.Application;
25 | public server: Server;
26 |
27 | constructor() {
28 | this.app = express();
29 | this.server = http.createServer(this.app);
30 | initializeDB();
31 | this.initializeMiddlewares();
32 | initializeSocket(this.app, this.server);
33 | initializePassport(passport);
34 | }
35 |
36 | private initializeMiddlewares() {
37 | this.app.disable('x-powered-by');
38 | this.app.use(express.json());
39 | this.app.use(express.urlencoded({ extended: true }));
40 | this.app.use(cors(config.cors));
41 | this.app.set('trust proxy', 1);
42 | this.app.use(logger('dev'));
43 | this.app.use(helmet());
44 | this.app.use(hpp());
45 |
46 | this.app.use(session(config.session as SessionOptions));
47 | this.app.use(passport.initialize());
48 | this.app.use(passport.session());
49 | this.app.use('/api', routers);
50 |
51 | // catch 404 and forward to error handler
52 | this.app.use(function (req, res, next) {
53 | next(createError(404));
54 | });
55 |
56 | // error handler
57 | this.app.use(csurf());
58 | this.app.use(errorHandler);
59 | }
60 |
61 | public onError() {
62 | this.server.on('error', (error: NodeJS.ErrnoException) => {
63 | if (error.syscall !== 'listen') {
64 | throw error;
65 | }
66 |
67 | const bind = typeof config.server.port === 'string'
68 | ? 'Pipe ' + config.server.port
69 | : 'Port ' + config.server.port;
70 |
71 | // handle specific listen errors with friendly messages
72 | switch (error.code) {
73 | case 'EACCES':
74 | console.error(bind + ' requires elevated privileges');
75 | process.exit(1);
76 | case 'EADDRINUSE':
77 | console.error(bind + ' is already in use');
78 | process.exit(1);
79 | default:
80 | throw error;
81 | }
82 | })
83 | }
84 |
85 | public onListening() {
86 | this.server.on('listening', () => {
87 | const addr = this.server.address();
88 | const bind = typeof addr === 'string'
89 | ? 'pipe ' + addr
90 | : 'port ' + addr.port;
91 |
92 | debug('Listening on ' + bind);
93 | })
94 | }
95 |
96 | public listen() {
97 | this.server.listen(config.server.port, () => {
98 | console.log(`# Application is listening on port ${config.server.port} #`)
99 | })
100 | }
101 | }
102 |
103 | export default Express;
--------------------------------------------------------------------------------
/frontend/src/components/main/SuggestedPeople/index.tsx:
--------------------------------------------------------------------------------
1 | import { useEffect, useState } from "react";
2 | import { Link } from "react-router-dom";
3 | import { FollowButton } from "~/components/main";
4 | import { Avatar, UserLoader } from "~/components/shared";
5 | import { SUGGESTED_PEOPLE } from "~/constants/routes";
6 | import { getSuggestedPeople } from "~/services/api";
7 | import { IError, IProfile } from "~/types/types";
8 |
9 | const SuggestedPeople: React.FC = () => {
10 | const [people, setPeople] = useState([]);
11 | const [isLoading, setIsLoading] = useState(false);
12 | const [error, setError] = useState(null);
13 |
14 | useEffect(() => {
15 | (async function () {
16 | try {
17 | setIsLoading(true);
18 | const users = await getSuggestedPeople({ offset: 0, limit: 6 });
19 |
20 | setPeople(users);
21 | setIsLoading(false);
22 | } catch (e) {
23 | setIsLoading(false);
24 | setError(e);
25 | }
26 | })();
27 | }, []);
28 |
29 | return (
30 |
31 |
32 |
Suggested People
33 | See all
34 |
35 | {isLoading && (
36 |
37 |
38 |
39 |
40 |
41 |
42 | )}
43 | {(!isLoading && error) && (
44 |
45 |
46 | {(error as IError)?.error?.message || 'Something went wrong :('}
47 |
48 |
49 | )}
50 | {!error && people.map((user) => (
51 |
52 |
53 |
54 |
55 |
56 |
{user.username}
57 |
58 |
59 |
60 |
65 |
66 |
67 |
68 | ))}
69 |
17 |
18 |
Info
19 | {isOwnProfile && (
20 | history.push(`/user/${profile.username}/edit`)}
23 | >
24 | Edit
25 |
26 | )}
27 |
28 |
29 |
30 |
Full Name
31 | {profile.fullname ? (
32 | {profile.fullname}
33 | ) : (
34 | Name not set.
35 | )}
36 |
37 |
38 |
Gender
39 | {profile.info.gender ? (
40 | {profile.info.gender}
41 | ) : (
42 | Gender not set.
43 | )}
44 |
45 |
46 |
Birthday
47 | {profile.info.birthday ? (
48 | {dayjs(profile.info.birthday).format('MMM.DD, YYYY')}
49 | ) : (
50 | Birthday not set.
51 | )}
52 |
53 |
54 |
Bio
55 | {profile.info.bio ? (
56 | {profile.info.bio}
57 | ) : (
58 | Bio not set.
59 | )}
60 |
61 |
62 |
Date Joined
63 | {dayjs(profile.dateJoined).format('MMM.DD, YYYY')}
64 |
65 |
66 |
49 |
50 |
Suggested People
51 |
Follow people to see their updates
52 |
53 | {(isLoading && people.length === 0) && (
54 |
55 |
56 |
57 |
58 |
59 |
60 | )}
61 | {(!isLoading && error && people.length === 0) && (
62 |
63 |
64 | {(error as IError)?.error?.message || 'Something went wrong :('}
65 |
66 |
67 | )}
68 |
69 | }
72 | >
73 | {people.map(user => (
74 |
79 |
80 |
81 |
82 |
83 | ))}
84 |
86 | {(isLoading && people.length >= 10 && !error) && (
87 |
88 |
89 |
90 | )}
91 |
}>
58 | {(isLoading && followers.length === 0) && (
59 |
60 |
61 |
62 |
63 |
64 |
65 | )}
66 | {(!isLoading && followers.length === 0 && error) && (
67 |
68 |
{error?.error?.message || 'Something went wrong.'}
69 |
70 | )}
71 | {followers.length !== 0 && (
72 |
73 |
Followers
74 |
75 | {followers.map(user => (
76 |
81 |
82 |
83 |
84 |
85 | ))}
86 |
87 | {(followers.length !== 0 && !error && isLoading) && (
88 |
89 |
90 |
91 | )}
92 |
93 | )}
94 |
47 |
51 |
52 |
53 |
57 |
58 |
59 |
60 |
61 |
66 |
67 |
68 |
69 |
70 |
71 |
72 |
73 |
74 |
75 |
76 |
77 |
78 |
79 |
80 |
81 |
82 |
83 |
84 |
85 |