8 |
10 | ))}
11 |
12 | );
13 | };
14 |
15 | export default ShimmerChatList;
16 |
--------------------------------------------------------------------------------
/src/features/auth/utils/loginValidation.ts:
--------------------------------------------------------------------------------
1 | import { t } from "i18next";
2 | import { z } from "zod";
3 |
4 | export const loginValidationSchema = z.object({
5 | email: z.string().email({
6 | message: t("validationMessages.validEmail"),
7 | }),
8 | password: z
9 | .string()
10 | .min(1, { message: t("validationMessages.requirePassword") }),
11 | });
12 |
13 | export type LoginValidationSchema = z.infer10 | {content} 11 |
12 | ); 13 | }; 14 | 15 | export default GradientText; 16 | -------------------------------------------------------------------------------- /src/stores/refetchSlice.ts: -------------------------------------------------------------------------------- 1 | import { createSlice, PayloadAction } from "@reduxjs/toolkit"; 2 | 3 | export type Refetch = ({}: object) => void; 4 | 5 | const initialState: { refetch: Refetch } = { refetch: () => {} }; 6 | 7 | export const refetchSlice = createSlice({ 8 | name: "refetch", 9 | initialState, 10 | reducers: { 11 | addRefetch: (state, action: PayloadAction
10 |
16 | );
17 | };
18 |
19 | export default LandingPage;
20 |
--------------------------------------------------------------------------------
/src/features/user/api/getUser.ts:
--------------------------------------------------------------------------------
1 | import { useQuery } from "@tanstack/react-query";
2 | import { Author } from "features/posts/types/postType";
3 | import { ResponseType } from "types/responseType";
4 | import { axios } from "../../../services/apiClient";
5 |
6 | const getUser = () => {
7 | const getUserProfile = () => {
8 | return axios.get
12 |
17 |
18 | );
19 | };
20 |
--------------------------------------------------------------------------------
/src/components/Shared/AnimatedPage.tsx:
--------------------------------------------------------------------------------
1 | import { motion } from "framer-motion";
2 | import { ReactNode } from "react";
3 |
4 | const animations = {
5 | initial: { opacity: 0, x: 100 },
6 | animate: { opacity: 1, x: 0 },
7 | exit: { opacity: 0, x: -100 },
8 | };
9 |
10 | const AnimatedPage = ({ children }: { children: ReactNode }) => {
11 | return (
12 |
13 |
15 | {title}
14 |{children}
16 |
5 | {new Array(3).fill(1).map((dot, index) => (
6 |
12 | ))}
13 |
14 | );
15 | };
16 |
17 | export default TypingChat;
18 |
--------------------------------------------------------------------------------
/src/components/Shimmer/ShimmerChat.tsx:
--------------------------------------------------------------------------------
1 | import React from "react";
2 | import ShimmerChatList from "./ShimmerChatList";
3 | import ShimmerChatSection from "./ShimmerChatSection";
4 |
5 | const ShimmerChat = () => {
6 | return (
7 |
8 |
15 | );
16 | };
17 |
18 | export default ShimmerChat;
19 |
--------------------------------------------------------------------------------
/src/config/constants.ts:
--------------------------------------------------------------------------------
1 | export const JWT_SECRET = "123456" as string;
2 | export const onboardingThresholdSeconds = 60 * 60 * 24; // 1 day
3 | export const CONNECTED_EVENT = "connected";
4 | export const DISCONNECT_EVENT = "disconnect";
5 | export const JOIN_CHAT_EVENT = "joinChat";
6 | export const NEW_CHAT_EVENT = "newChat";
7 | export const TYPING_EVENT = "typing";
8 | export const STOP_TYPING_EVENT = "stopTyping";
9 | export const MESSAGE_RECEIVED_EVENT = "messageReceived";
10 | export const LEAVE_CHAT_EVENT = "leaveChat";
11 | export const UPDATE_GROUP_NAME_EVENT = "updateGroupName";
12 | export const TOTAL_TAGS = 10;
13 | export const TOTAL_UPLOADABLE_IMAGES = 6;
14 |
--------------------------------------------------------------------------------
/src/features/user/Components/Settings.tsx:
--------------------------------------------------------------------------------
1 | import { useSelector } from "react-redux";
2 | import { Navigate, useParams } from "react-router-dom";
3 | import { RootState } from "stores/store";
4 | import { Author } from "../../posts/types/postType";
5 | import UserDetails from "./UserDetails";
6 |
7 | const Settings = () => {
8 | const user = useSelector
9 |
11 |
12 |
14 |
6 |
16 | );
17 | };
18 |
19 | export default ShimmerCreatePost;
20 |
--------------------------------------------------------------------------------
/src/components/Shimmer/ShimmerChatSection.tsx:
--------------------------------------------------------------------------------
1 | import ShimmerComment from "./ShimmerComment";
2 |
3 | const ShimmerChatSection = () => {
4 | return (
5 | <>
6 | {new Array(10).fill(1).map((value, index) => (
7 |
7 |
8 |
9 |
10 |
11 |
12 |
13 |
14 |
15 |
8 |
18 | ))}
19 |
20 | );
21 | };
22 |
23 | export default ShimmerChatSection;
24 |
--------------------------------------------------------------------------------
/src/features/chat/api/getAllUser.ts:
--------------------------------------------------------------------------------
1 | import { useQuery, useQueryClient } from "@tanstack/react-query";
2 | import { ChatUser } from "features/posts/types/postType";
3 | import { ResponseType } from "types/responseType";
4 | import { axios } from "../../../services/apiClient";
5 |
6 | const getAllUsers = (showUsers: boolean) => {
7 | const queryClient = useQueryClient();
8 | const getAllUserData = () => {
9 | return axios.get
7 |
18 | );
19 | };
20 |
21 | export default Footer;
22 |
--------------------------------------------------------------------------------
/src/features/user/api/getUserByUsername.ts:
--------------------------------------------------------------------------------
1 | import { UserProfile } from ".../../features/posts/types/postType";
2 | import { useQuery } from "@tanstack/react-query";
3 | import { ResponseType } from "types/responseType";
4 | import { axios } from "../../../services/apiClient";
5 |
6 | const getUserByUsername = (userName: string | undefined) => {
7 | const getUserProfile = () => {
8 | return axios.get
8 |
10 |
11 |
17 | 12 | {t("landingPage.copyright")} © {new Date().getFullYear()} Polobolo 13 | LLC. 14 |
15 |{t("landingPage.rights")}
16 |
7 |
19 | );
20 | };
21 |
22 | export default ShimmerPosts;
23 |
--------------------------------------------------------------------------------
/src/utils/index.ts:
--------------------------------------------------------------------------------
1 | export const isBrowser = typeof window !== undefined;
2 | export class LocalStorage {
3 | static get(key: string) {
4 | if (!isBrowser) return;
5 | const value = localStorage.getItem(key);
6 | if (value) {
7 | try {
8 | return JSON.parse(value);
9 | } catch (err) {
10 | return null;
11 | }
12 | }
13 | return null;
14 | }
15 |
16 | static set(key: string, value: any) {
17 | if (!isBrowser) return;
18 | localStorage.setItem(key, JSON.stringify(value));
19 | }
20 |
21 | static remove(key: string) {
22 | if (!isBrowser) return;
23 | localStorage.removeItem(key);
24 | }
25 |
26 | static clear() {
27 | if (!isBrowser) return;
28 | localStorage.clear();
29 | }
30 | }
31 |
--------------------------------------------------------------------------------
/src/features/posts/Components/PostsByTag.tsx:
--------------------------------------------------------------------------------
1 | import { ErrorBoundary } from "react-error-boundary";
2 | import { useParams } from "react-router-dom";
3 | import { FallbackErrorBoundary } from "../../../components/Shared/FallbackErrorBoundary";
4 | import Posts from "./Posts";
5 |
6 | const PostsByTag = () => {
7 | const { tag } = useParams();
8 | return (
9 |
8 |
10 | {new Array(6).fill(1).map((value, index) => (
11 |
15 |
17 | ))}
18 |
10 | {}}
16 | >
17 |
19 |
20 | );
21 | };
22 |
23 | export default PostsByTag;
24 |
--------------------------------------------------------------------------------
/src/hooks/useAuthCheck.ts:
--------------------------------------------------------------------------------
1 | import { useEffect, useState } from "react";
2 | import { useNavigate } from "react-router-dom";
3 | import { LocalStorage } from "../utils";
4 | import { useSelector } from "react-redux";
5 | import { RootState } from "stores/store";
6 | import { Author } from "features/posts/types/postType";
7 | import { QueryClient } from "@tanstack/react-query";
8 |
9 | const queryClient = new QueryClient();
10 | const useAuthCheck = () => {
11 | const user = queryClient.getQueryData(["user"]);
12 | const userData = useSelector11 | Explore #{tag} Posts 12 |
13 |
18 |
19 |
21 | );
22 | };
23 |
24 | export default Bookmarks;
25 |
--------------------------------------------------------------------------------
/src/features/chat/api/getChatMessages.ts:
--------------------------------------------------------------------------------
1 | import { useQuery } from "@tanstack/react-query";
2 | import { JOIN_CHAT_EVENT } from "../../../config/constants";
3 | import { useSocket } from "../../../context/SocketContext";
4 | import { axios } from "../../../services/apiClient";
5 |
6 | const getChatMessages = (chatId: string | undefined) => {
7 | const { socket } = useSocket();
8 | const getUserChatMessages = () => {
9 | return axios.get(`/chat-app/messages/${chatId}`);
10 | };
11 | return useQuery({
12 | queryKey: ["chats", "messages", chatId],
13 | useErrorBoundary: true,
14 | queryFn: getUserChatMessages,
15 | staleTime: 1000 * 60 * 60,
16 | onSuccess: (data) => {
17 | socket?.emit(JOIN_CHAT_EVENT, chatId);
18 | },
19 | });
20 | };
21 |
22 | export default getChatMessages;
23 |
--------------------------------------------------------------------------------
/src/features/posts/Components/PostAuthor.tsx:
--------------------------------------------------------------------------------
1 | import { ReactNode } from "react";
2 | import AuthorProfile from "../../user/Components/AuthorProfile";
3 | import { PostCardProp } from "../types/postType";
4 |
5 | type PostAuthor = {
6 | className?: string;
7 | children: ReactNode;
8 | };
9 | const PostAuthor = ({
10 | post,
11 | className,
12 | children,
13 | }: PostCardProp & PostAuthor) => {
14 | return (
15 |
16 |
26 | );
27 | };
28 |
29 | export default PostAuthor;
30 |
--------------------------------------------------------------------------------
/src/types/index.d.ts:
--------------------------------------------------------------------------------
1 | import axios from "axios";
2 |
3 | declare module "axios" {
4 | export interface AxiosInstance {
5 | request
8 |
18 | );
19 | };
20 |
21 | export default MarketingFuture;
22 |
--------------------------------------------------------------------------------
/src/features/posts/utils/settingSchema.ts:
--------------------------------------------------------------------------------
1 | import { t } from "i18next";
2 | import { z } from "zod";
3 |
4 | export const settingsValidationSchema = z.object({
5 | firstName: z
6 | .string()
7 | .min(3, { message: t("validationMessages.firstName") })
8 | .max(255, { message: t("validationMessages.maxFirstName") }),
9 | lastName: z
10 | .string()
11 | .min(3, { message: t("validationMessages.lastName") })
12 | .max(255, { message: t("validationMessages.maxLastName") }),
13 | bio: z
14 | .string()
15 | .min(10, { message: t("validationMessages.bio") })
16 | .max(255, { message: t("validationMessages.maxBio") }),
17 | location: z.string().max(100).min(1),
18 | dob: z.string(),
19 | phoneNumber: z.string().regex(/^\d{9,15}$/),
20 | });
21 |
22 | export type SettingsValidationSchema = z.infer
9 |
14 | 10 | {t("landingPage.marketingFuture")} 11 |
12 |
15 | 
16 |
17 |
9 | {post.tags.map((currentTag, index) => (
10 |
11 |
18 | #{currentTag}
19 |
20 |
21 | ))}
22 |
23 |
24 | );
25 | };
26 |
27 | export default Tags;
28 |
--------------------------------------------------------------------------------
/src/assets/images/w-linkedin.svg:
--------------------------------------------------------------------------------
1 |
4 |
--------------------------------------------------------------------------------
/src/components/Form/InputFieldForm.tsx:
--------------------------------------------------------------------------------
1 | import clsx from "clsx";
2 | import { UseFormRegisterReturn } from "react-hook-form";
3 |
4 | import { FieldWrapper, FieldWrapperPassThroughProps } from "./FieldWrapper";
5 |
6 | type InputFieldProps = FieldWrapperPassThroughProps & {
7 | type?: "text" | "email" | "password";
8 | className?: string;
9 | registration: Partial
12 |
30 | );
31 | };
32 |
33 | export default ShimmerComment;
34 |
--------------------------------------------------------------------------------
/src/features/posts/api/postBookmark.ts:
--------------------------------------------------------------------------------
1 | import { useMutation } from "@tanstack/react-query";
2 | import { useTranslation } from "react-i18next";
3 | import { axios } from "../../../services/apiClient";
4 | import { addNotification } from "../../../stores/notificationSlice";
5 | import store from "../../../stores/store";
6 |
7 | const postBookmark = (postId: string | undefined) => {
8 | const { t } = useTranslation();
9 | const postData = () => {
10 | return axios.post(`/social-media/bookmarks/${postId}`);
11 | };
12 | return useMutation({
13 | mutationFn: postData,
14 | onError: () => {},
15 | onSuccess: (response) => {
16 | const { dispatch } = store;
17 |
18 | dispatch(
19 | addNotification({
20 | type: "success",
21 | title: t("notification.success"),
22 | message: t("notificationMessages.bookmarkPost"),
23 | })
24 | );
25 | },
26 | });
27 | };
28 |
29 | export default postBookmark;
30 |
--------------------------------------------------------------------------------
/src/components/Elements/CloseModal.tsx:
--------------------------------------------------------------------------------
1 | import { faTimes } from "@fortawesome/free-solid-svg-icons";
2 | import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
3 | import { Button } from "./Button";
4 |
5 | type CloseModalProps = {
6 | closeModal: () => void;
7 | closeComment?: boolean;
8 | variant?: string;
9 | };
10 | const CloseModal = ({ closeModal, closeComment, variant }: CloseModalProps) => {
11 | return (
12 |
24 | );
25 | };
26 |
27 | export default CloseModal;
28 |
--------------------------------------------------------------------------------
/src/components/Shared/Bookmark.tsx:
--------------------------------------------------------------------------------
1 | import { faBookmark } from "@fortawesome/free-solid-svg-icons";
2 | import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
3 | import { useState } from "react";
4 |
5 | type BookmarkProps = {
6 | className?: string;
7 | handleBookmarkPost: () => void;
8 | isBookmarkedPost: boolean;
9 | };
10 | const Bookmark = ({
11 | className,
12 | handleBookmarkPost,
13 | isBookmarkedPost,
14 | }: BookmarkProps) => {
15 | const [isBookmarked, setIsBookmarked] = useState(isBookmarkedPost);
16 | return (
17 |
28 | );
29 | };
30 |
31 | export default Bookmark;
32 |
--------------------------------------------------------------------------------
/src/features/landing/Components/MailingList.tsx:
--------------------------------------------------------------------------------
1 | import { useRef } from "react";
2 | import { useTranslation } from "react-i18next";
3 | import { useNavigate } from "react-router-dom";
4 | import { Button } from "../../../components/Elements/Button";
5 |
6 | const MailingList = () => {
7 | const { t } = useTranslation();
8 | const navigate = useNavigate();
9 | const mailingInputRef = useRef
13 |
14 |
19 | {!isChat ? (
20 |
21 | ) : null}
22 |
23 |
24 |
29 |
11 |
24 | );
25 | };
26 |
27 | export default Container;
28 |
--------------------------------------------------------------------------------
/src/components/Form/FieldWrapper.tsx:
--------------------------------------------------------------------------------
1 | import clsx from "clsx";
2 | import * as React from "react";
3 | import { FieldError } from "react-hook-form";
4 |
5 | type FieldWrapperProps = {
6 | label?: string;
7 | className?: string;
8 | children: React.ReactNode;
9 | error?: FieldError | undefined;
10 | description?: string;
11 | };
12 |
13 | export type FieldWrapperPassThroughProps = Omit<
14 | FieldWrapperProps,
15 | "className" | "children"
16 | >;
17 |
18 | export const FieldWrapper = (props: FieldWrapperProps) => {
19 | const { label, className, error, children } = props;
20 | return (
21 |
12 |
20 |
13 |
19 |
21 | {children}
22 |
23 |
22 |
28 | {error?.message && (
29 |
38 | );
39 | };
40 |
--------------------------------------------------------------------------------
/src/stores/notificationSlice.ts:
--------------------------------------------------------------------------------
1 | import { createSlice, PayloadAction } from "@reduxjs/toolkit";
2 | import { nanoid } from "nanoid";
3 |
4 | export type Notification = {
5 | id: string;
6 | type: "info" | "warning" | "success" | "error";
7 | title: string;
8 | message?: string;
9 | };
10 |
11 | const initialState: { notifications: Notification[] } = {
12 | notifications: [],
13 | };
14 |
15 | export const notificationSlice = createSlice({
16 | name: "notification",
17 | initialState,
18 | reducers: {
19 | addNotification: (
20 | state,
21 | action: PayloadAction
34 | {error.message}
35 |
36 | )}
37 |
20 | {notifications.map((notification) => {
21 | return (
22 | handleDismissNotification(notification)}
26 | />
27 | );
28 | })}
29 |
30 | );
31 | };
32 |
--------------------------------------------------------------------------------
/src/features/auth/Components/__tests__/login.test.tsx:
--------------------------------------------------------------------------------
1 | import "@testing-library/jest-dom";
2 | import { render } from "@testing-library/react";
3 | import App from "../../../../App";
4 | import Login from "../Login";
5 | import * as ReactDOM from "react-dom";
6 | test("demo", () => {
7 | expect(true).toBe(true);
8 | });
9 |
10 | test("Renders the main page", () => {
11 | // render(
25 |
26 |
28 |
30 |
31 |
32 |
33 |
35 |
36 | 37 |
38 |
40 |
41 | );
42 | };
43 |
44 | export default TestErrorBoundary;
45 |
--------------------------------------------------------------------------------
/src/features/auth/api/registerUser.tsx:
--------------------------------------------------------------------------------
1 | import { useMutation } from "@tanstack/react-query";
2 | import { useTranslation } from "react-i18next";
3 | import { useNavigate } from "react-router-dom";
4 | import { axios } from "../../../services/apiClient";
5 | import { addNotification } from "../../../stores/notificationSlice";
6 | import store from "../../../stores/store";
7 |
8 | export interface SignupData {
9 | email: string;
10 | password: string;
11 | role: string;
12 | username: string;
13 | }
14 | const useRegisterUser = () => {
15 | const navigate = useNavigate();
16 | const { t } = useTranslation();
17 | const registerUser = (signupData: SignupData) => {
18 | return axios.post("/users/register", signupData);
19 | };
20 | return useMutation({
21 | mutationKey: ["register"],
22 | mutationFn: registerUser,
23 | onSuccess: () => {
24 | const { dispatch } = store;
25 | dispatch(
26 | addNotification({
27 | type: "success",
28 | title: t("notification.success"),
29 | message: t("notificationMessages.signupUser"),
30 | })
31 | );
32 | navigate("/login");
33 | },
34 | });
35 | };
36 |
37 | export default useRegisterUser;
38 |
--------------------------------------------------------------------------------
/src/components/Shimmer/ShimmerAvatar.tsx:
--------------------------------------------------------------------------------
1 | import React, { ReactNode } from "react";
2 | type ShimmerAvatarProps = {
3 | children?: ReactNode;
4 | className?: string;
5 | };
6 | const ShimmerAvatar = ({ children, className }: ShimmerAvatarProps) => {
7 | return (
8 | 28 |
32 |
36 | 37 |
9 |
27 | );
28 | };
29 |
30 | export default ShimmerAvatar;
31 |
32 | export const ShimmerAvatars = () => (
33 | <>
34 | {new Array(6).fill(1).map((profile, index) => (
35 |
10 |
11 |
12 |
13 |
19 |
24 | {children}
25 |
26 |
24 |
31 |
10 |
14 | {t("authPage.forgot")}
15 |
16 |
17 |
18 | {formType === "login"
19 | ? t("authPage.oldAccount")
20 | : t("authPage.newAccount")}{" "}
21 |
22 |
26 | {t(`landingPage.${formType}`)} !
27 |
28 |
29 | 33 | {t(`userPages.returnHome`)}{" "} 34 | 35 |
36 |
37 | );
38 | };
39 | export default AuthFormEnhancements;
40 |
--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
1 | # React + TypeScript + Vite
2 |
3 | This template provides a minimal setup to get React working in Vite with HMR and some ESLint rules.
4 |
5 | Currently, two official plugins are available:
6 |
7 | - [@vitejs/plugin-react](https://github.com/vitejs/vite-plugin-react/blob/main/packages/plugin-react/README.md) uses [Babel](https://babeljs.io/) for Fast Refresh
8 | - [@vitejs/plugin-react-swc](https://github.com/vitejs/vite-plugin-react-swc) uses [SWC](https://swc.rs/) for Fast Refresh
9 |
10 | ## Expanding the ESLint configuration
11 |
12 | If you are developing a production application, we recommend updating the configuration to enable type aware lint rules:
13 |
14 | - Configure the top-level `parserOptions` property like this:
15 |
16 | ```js
17 | parserOptions: {
18 | ecmaVersion: 'latest',
19 | sourceType: 'module',
20 | project: ['./tsconfig.json', './tsconfig.node.json'],
21 | tsconfigRootDir: __dirname,
22 | },
23 | ```
24 |
25 | - Replace `plugin:@typescript-eslint/recommended` to `plugin:@typescript-eslint/recommended-type-checked` or `plugin:@typescript-eslint/strict-type-checked`
26 | - Optionally add `plugin:@typescript-eslint/stylistic-type-checked`
27 | - Install [eslint-plugin-react](https://github.com/jsx-eslint/eslint-plugin-react) and add `plugin:react/recommended` & `plugin:react/jsx-runtime` to the `extends` list
28 |
--------------------------------------------------------------------------------
/src/components/Elements/Toggle.tsx:
--------------------------------------------------------------------------------
1 | import { Switch } from "@headlessui/react";
2 | type ToggleProps = {
3 | enabled: boolean;
4 | setEnabled: React.Dispatch29 | 33 | {t(`userPages.returnHome`)}{" "} 34 | 35 |
14 |
24 | Use setting
25 |
30 |
31 |
32 | );
33 | };
34 |
35 | export default Toggle;
36 |
--------------------------------------------------------------------------------
/src/features/posts/Components/CreateTags.tsx:
--------------------------------------------------------------------------------
1 | import { faTimes } from "@fortawesome/free-solid-svg-icons";
2 | import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
3 | import { useDisclosure } from "../../../hooks/useDisclosure";
4 |
5 | type CreateTagsProps = {
6 | tag: string;
7 | removeTag: () => void;
8 | };
9 | const CreateTags = ({ tag, removeTag }: CreateTagsProps) => {
10 | const {
11 | isOpen: isHovered,
12 | open: openHover,
13 | close: closeHover,
14 | } = useDisclosure(false);
15 |
16 | return (
17 |
22 |
27 | #{tag}
28 |
29 | {isHovered && (
30 |
37 | )}
38 |
39 | );
40 | };
41 |
42 | export default CreateTags;
43 |
--------------------------------------------------------------------------------
/src/features/user/api/getFollowersList.ts:
--------------------------------------------------------------------------------
1 | import { useInfiniteQuery } from "@tanstack/react-query";
2 | import { useParams } from "react-router-dom";
3 | import { axios } from "../../../services/apiClient";
4 |
5 | const getFollowersList = (followers: boolean) => {
6 | const { username } = useParams();
7 | const limit = 10;
8 | const getUserProfile = (pageParam: number) => {
9 | const params = { page: pageParam, limit };
10 | if (followers) {
11 | return axios.get(`/social-media/follow/list/followers/${username}`, {
12 | params: params,
13 | });
14 | }
15 | return axios.get(`/social-media/follow/list/following/${username}`, {
16 | params: params,
17 | });
18 | };
19 | return useInfiniteQuery({
20 | queryKey: [followers ? "followers" : "following", username],
21 | queryFn: ({ pageParam = 1 }) => getUserProfile(pageParam),
22 | getNextPageParam: (lastFollower, allFollowers) => {
23 | if (
24 | followers &&
25 | allFollowers.length * limit < lastFollower.data.totalFollowers
26 | ) {
27 | return allFollowers.length + 1;
28 | }
29 | if (
30 | !followers &&
31 | allFollowers.length * limit < lastFollower.data.totalFollowing
32 | ) {
33 | return allFollowers.length + 1;
34 | }
35 | return null;
36 | },
37 | });
38 | };
39 |
40 | export default getFollowersList;
41 |
--------------------------------------------------------------------------------
/src/features/landing/Components/Title.tsx:
--------------------------------------------------------------------------------
1 | import { useTranslation } from "react-i18next";
2 | import AppStore from "../../../assets/images/app-store.svg";
3 | import GooglePlay from "../../../assets/images/google-play.svg";
4 | import GraphImage from "../../../assets/images/png/graph-visual.png";
5 | import LoadImage from "../../../components/Elements/LoadImage";
6 | import MailingList from "./MailingList";
7 | const Title = () => {
8 | const { t } = useTranslation();
9 | return (
10 |
11 |
12 |
13 | {t("landingPage.tagline")}
14 |
16 |
25 |
33 | );
34 | };
35 |
36 | export default Title;
37 |
--------------------------------------------------------------------------------
/public/vite.svg:
--------------------------------------------------------------------------------
1 |
--------------------------------------------------------------------------------
/src/components/Elements/Spinner.tsx:
--------------------------------------------------------------------------------
1 | import clsx from "clsx";
2 |
3 | const sizes = {
4 | xs: "h-2 w-2",
5 | sm: "h-4 w-4",
6 | md: "h-8 w-8",
7 | lg: "h-16 w-16",
8 | xl: "h-24 w-24",
9 | };
10 |
11 | const variants = {
12 | light: "text-white",
13 | primary: "text-teal-600",
14 | };
15 |
16 | export type SpinnerProps = {
17 | size?: keyof typeof sizes;
18 | variant?: keyof typeof variants;
19 | className?: string;
20 | };
21 |
22 | export const Spinner = ({
23 | size = "md",
24 | variant = "primary",
25 | className = "",
26 | }: SpinnerProps) => {
27 | return (
28 | <>
29 |
55 | Loading
56 |
57 | );
58 | };
59 |
--------------------------------------------------------------------------------
/src/components/Shimmer/Shimmer.tsx:
--------------------------------------------------------------------------------
1 | import ShimmerAvatar from "./ShimmerAvatar";
2 |
3 | const Shimmer = () => {
4 | return (
5 |
13 | {t("landingPage.tagline")}
14 | PoloBolo
15 |
16 | 17 | {t("landingPage.heroText")} 18 |
19 |
21 |
24 |
26 |
32 |
6 |
27 |
28 | );
29 | };
30 |
31 | export default Shimmer;
32 |
--------------------------------------------------------------------------------
/src/features/posts/Components/CreatePostTags.tsx:
--------------------------------------------------------------------------------
1 | import React, { KeyboardEvent } from "react";
2 | import { useTranslation } from "react-i18next";
3 | import { TOTAL_TAGS } from "../../../config/constants";
4 | import CreateTags from "./CreateTags";
5 |
6 | type CreatePostProps = {
7 | tags: string[];
8 | removeTag: (tag: string) => void;
9 | handleTotalAllowedTags: () => void;
10 | tagRef: React.RefObject
23 |
43 | );
44 | };
45 |
46 | export default CreatePostTags;
47 |
--------------------------------------------------------------------------------
/src/components/Form/SelectField.tsx:
--------------------------------------------------------------------------------
1 | import clsx from "clsx";
2 | import * as React from "react";
3 | import { UseFormRegisterReturn } from "react-hook-form";
4 |
5 | import { FieldWrapper, FieldWrapperPassThroughProps } from "./FieldWrapper";
6 |
7 | type Option = {
8 | label: React.ReactNode;
9 | value: string | number | string[];
10 | };
11 |
12 | type SelectFieldProps = FieldWrapperPassThroughProps & {
13 | options: Option[];
14 | className?: string;
15 | defaultValue?: string;
16 | placeholder?: string;
17 | registration: Partial
24 | {tags.map((tag, index) => (
25 | removeTag(tag)}
29 | />
30 | ))}
31 |
32 | onKeyDownTag(e)}
39 | disabled={tags.length >= TOTAL_TAGS}
40 | onChange={handleTotalAllowedTags}
41 | />
42 |
28 |
47 | );
48 | };
49 |
50 | export default Highlights;
51 |
--------------------------------------------------------------------------------
/src/stores/userSlice.ts:
--------------------------------------------------------------------------------
1 | import { createSlice, PayloadAction } from "@reduxjs/toolkit";
2 | import { Author } from "../features/posts/types/postType";
3 |
4 | const initialState: {
5 | user: Author | undefined;
6 | isLoggedIn: boolean;
7 | isEmailVerified: boolean;
8 | isInitialLogin: boolean;
9 | updatedProfilePicURL: string | undefined;
10 | } = {
11 | user: undefined,
12 | isLoggedIn: false,
13 | isEmailVerified: false,
14 | isInitialLogin: true,
15 | updatedProfilePicURL: undefined,
16 | };
17 |
18 | export const userSlice = createSlice({
19 | name: "user",
20 | initialState,
21 | reducers: {
22 | addUser: (state, action: PayloadAction29 | {t("landingPage.highlights")} 30 |
31 |
32 | {analytics.map((analytic) => {
33 | return (
34 |
46 |
38 |
43 | );
44 | })}
45 |
39 | 
40 |
41 | {analytic?.text}
42 |
31 | 
38 | {!fileDataURL.includes("http://") && isHovered && (
39 |
48 | )}
49 |
50 | );
51 | };
52 |
53 | export default UploadImage;
54 |
--------------------------------------------------------------------------------
/src/features/user/Components/AuthorProfile.tsx:
--------------------------------------------------------------------------------
1 | import { Link } from "react-router-dom";
2 | import Avatar from "./Avatar";
3 |
4 | type AuthorProfileProps = {
5 | username: string;
6 | url: string;
7 | firstName: string;
8 | lastName: string;
9 | bio: string;
10 | className?: string;
11 | closeModal?: () => void;
12 | isChat?: boolean;
13 | createChat?: () => void;
14 | isGroupChat?: boolean;
15 | };
16 |
17 | const AuthorProfile = ({
18 | username,
19 | url,
20 | firstName,
21 | lastName,
22 | bio,
23 | className,
24 | closeModal,
25 | isChat,
26 | createChat,
27 | isGroupChat,
28 | }: AuthorProfileProps) => {
29 | const handleClick = () => {
30 | closeModal && closeModal();
31 | createChat && createChat();
32 | };
33 |
34 | const commonContent = (
35 |
36 |
41 | );
42 |
43 | return (
44 | 37 | {firstName} {lastName} 38 |
39 |{bio}
40 |
50 |
67 | );
68 | };
69 |
70 | export default AuthorProfile;
71 |
--------------------------------------------------------------------------------
/src/features/chat/api/addDeleteMembers.ts:
--------------------------------------------------------------------------------
1 | import { useMutation, useQueryClient } from "@tanstack/react-query";
2 | import { useTranslation } from "react-i18next";
3 | import { useNavigate } from "react-router-dom";
4 | import { JOIN_CHAT_EVENT } from "../../../config/constants";
5 | import { useSocket } from "../../../context/SocketContext";
6 | import { Chat } from "../../../features/posts/types/postType";
7 | import { axios } from "../../../services/apiClient";
8 | import { addNotification } from "../../../stores/notificationSlice";
9 | import store from "../../../stores/store";
10 | import { ResponseType } from "../../../types/responseType";
11 |
12 | const addChatMember = () => {
13 | const queryClient = useQueryClient();
14 | const navigate = useNavigate();
15 | const { t } = useTranslation();
16 | const { socket } = useSocket();
17 | const postAddChatMember = ({
18 | chatId,
19 | participantId,
20 | }: {
21 | participantId: string;
22 | chatId: string;
23 | }) => {
24 | return axios.post
51 |
66 |
21 | {
27 | navigate(".");
28 | }}
29 | >
30 |
49 |
50 | );
51 | };
52 |
53 | export default Chat;
54 |
--------------------------------------------------------------------------------
/src/components/Shared/ErrorRouteElement.tsx:
--------------------------------------------------------------------------------
1 | import {
2 | Link,
3 | Navigate,
4 | isRouteErrorResponse,
5 | useRouteError,
6 | } from "react-router-dom";
7 | import LoadImage from "../../components/Elements/LoadImage";
8 | import useAuthCheck from "../../hooks/useAuthCheck";
9 | import GradientText from "./GradientText";
10 |
11 | const ErrorRouteElement = () => {
12 | const error = useRouteError();
13 | const isLoggedIn = useAuthCheck();
14 | if (!isLoggedIn) {
15 | return
22 |
24 |
31 | {!chatId ? (
32 |
48 | 33 | No chat selected. 34 |
35 | ) : isScreenSmall ? ( 36 | 44 | ) : ( 45 |
20 |
51 | );
52 | };
53 |
54 | export default ErrorRouteElement;
55 |
--------------------------------------------------------------------------------
/src/components/Shared/FallbackErrorBoundary.tsx:
--------------------------------------------------------------------------------
1 | import { Link } from "react-router-dom";
2 | import { Button } from "../../components/Elements/Button";
3 | import LoadImage from "../../components/Elements/LoadImage";
4 | import GradientText from "./GradientText";
5 |
6 | type FallbackErrorBoundaryProps = {
7 | error: Error;
8 | resetErrorBoundary: () => void;
9 | };
10 | export function FallbackErrorBoundary({
11 | error,
12 | resetErrorBoundary,
13 | }: FallbackErrorBoundaryProps) {
14 | return (
15 |
21 |
50 |
22 |
42 | 24 | Sorry we couldn't find the page you're looking for 25 |
26 |
30 |
41 | 31 | 32 | {isRouteErrorResponse(error) 33 | ? error.error?.message || error.statusText 34 | : "Unknown error message"} 35 | 36 |
37 | 38 | Return Home 39 | 40 |
43 |
49 |
16 |
48 | );
49 | }
50 |
--------------------------------------------------------------------------------
/src/features/comments/Components/CommentContent.tsx:
--------------------------------------------------------------------------------
1 | import {
2 | faAngleDoubleLeft,
3 | faAngleDoubleRight,
4 | } from "@fortawesome/free-solid-svg-icons";
5 | import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
6 | import { useEffect, useState } from "react";
7 | import { useDisclosure } from "../../../hooks/useDisclosure";
8 | type CommentContentProps = {
9 | content: string;
10 | };
11 |
12 | function getMaxLength(windowSize: number) {
13 | if (windowSize < 400) {
14 | return 50;
15 | } else if (windowSize < 720) {
16 | return 100;
17 | } else if (windowSize < 1024) {
18 | return 150;
19 | }
20 | return 200;
21 | }
22 |
23 | const CommentContent = ({ content }: CommentContentProps) => {
24 | const { isOpen: showMore, toggle: toggleShowMore } = useDisclosure(false);
25 | const [windowSize, setWindowSize] = useState(window.innerWidth);
26 | const updateWindowSize = () => {
27 | setWindowSize(window.innerWidth);
28 | };
29 |
30 | useEffect(() => {
31 | window.addEventListener("resize", updateWindowSize);
32 |
33 | return () => window.removeEventListener("resize", updateWindowSize);
34 | }, []);
35 | const maxLength = getMaxLength(windowSize);
36 | const isToggleRequired = content.length > maxLength;
37 |
38 | return (
39 |
17 |
47 |
18 |
39 | 20 | Sorry we couldn't find the page you're looking for 21 |
22 |{error.message}
23 | 24 | 30 | 31 | 37 | 38 |
40 |
46 |
40 | {showMore ? (
41 | {content}
42 | ) : (
43 |
44 | {isToggleRequired ? `${content.substring(0, maxLength)}...` : content}
45 |
46 | )}
47 |
48 | {isToggleRequired && (
49 |
59 | )}
60 |
61 | );
62 | };
63 |
64 | export default CommentContent;
65 |
--------------------------------------------------------------------------------
/src/features/chat/api/createOnetoOneChat.ts:
--------------------------------------------------------------------------------
1 | import { useMutation, useQueryClient } from "@tanstack/react-query";
2 | import { useTranslation } from "react-i18next";
3 | import { useNavigate } from "react-router-dom";
4 | import { JOIN_CHAT_EVENT } from "../../../config/constants";
5 | import { useSocket } from "../../../context/SocketContext";
6 | import { Chat } from "../../../features/posts/types/postType";
7 | import { axios } from "../../../services/apiClient";
8 | import { addNotification } from "../../../stores/notificationSlice";
9 | import store from "../../../stores/store";
10 | import { ResponseType } from "../../../types/responseType";
11 | export type CreateChatProps = {
12 | receiverIds: string[];
13 | name: string;
14 | isGroup: boolean;
15 | };
16 | const createChat = () => {
17 | const queryClient = useQueryClient();
18 | const navigate = useNavigate();
19 | const { socket } = useSocket();
20 | const { t } = useTranslation();
21 | const postCreateChat = ({ receiverIds, isGroup, name }: CreateChatProps) => {
22 | if (isGroup) {
23 | const groupChatData = { name: name, participants: receiverIds };
24 | return axios.post
23 |
57 | );
58 | };
59 |
60 | export default Carousel;
61 |
--------------------------------------------------------------------------------
/src/features/posts/api/getPosts.ts:
--------------------------------------------------------------------------------
1 | import { useInfiniteQuery } from "@tanstack/react-query";
2 | import { ResponseType } from "types/responseType";
3 | import { axios } from "../../../services/apiClient";
4 | import { Pagination, Posts } from "../types/postType";
5 |
6 | const getPosts = (
7 | username: string | undefined,
8 | tag: string | undefined = undefined,
9 | bookmarks: boolean | undefined = undefined
10 | ) => {
11 | let limit: number;
12 | if (tag) {
13 | limit = 3;
14 | } else {
15 | limit = 10;
16 | }
17 | const getPosts = (pageParam: number) => {
18 | const params = { page: pageParam, limit };
19 | if (tag) {
20 | return axios.get
24 |
41 |
42 |
49 |
56 |
25 | {images.map((image, index) => (
26 |
40 |
32 |
38 | ))}
39 |
17 |
57 | );
58 | };
59 |
60 | export default CreatePostDisplay;
61 |
--------------------------------------------------------------------------------
/src/components/Elements/Dialog.tsx:
--------------------------------------------------------------------------------
1 | import { Transition, Dialog as UIDialog } from "@headlessui/react";
2 | import * as React from "react";
3 | import { Fragment } from "react";
4 |
5 | type DialogProps = {
6 | isOpen: boolean;
7 | closeModal: () => void;
8 | children: React.ReactNode;
9 | initialFocus?: React.MutableRefObject
18 |
43 |
19 |
42 |
20 |
26 | {
29 | openModal();
30 | }}
31 | >
32 | {
35 | openModal();
36 | }}
37 | value=""
38 | className="self-center w-full px-3 py-2 text-sm leading-tight text-gray-700 transition-all duration-300 border rounded-full outline-none hover:border-teal-200"
39 | />
40 |
41 |
44 |
47 |
50 |
51 |
47 |
69 |
50 |
59 |
64 | {children}
65 |
66 |
67 |
68 | {}}
38 | className="flex justify-between "
39 | >
40 | {}}
49 | createChat={
50 | isChat && !isGroupChatEnabled
51 | ? () =>
52 | mutate({
53 | isGroup: false,
54 | receiverIds: [user._id],
55 | name: user.username,
56 | })
57 | : addParticipant
58 | ? () => addParticipant(user._id)
59 | : () => {}
60 | }
61 | />
62 |
63 | }
64 | {selected ? (
65 |
70 |
71 |
72 | ) : null}
73 |
74 | )}
75 |
4 |
45 | );
46 | };
47 |
48 | export default ShimmerProfile;
49 |
--------------------------------------------------------------------------------
/src/features/comments/api/postLikeComment.ts:
--------------------------------------------------------------------------------
1 | import {
2 | InfiniteData,
3 | useMutation,
4 | useQueryClient,
5 | } from "@tanstack/react-query";
6 | import { useContext } from "react";
7 | import { useTranslation } from "react-i18next";
8 | import { axios } from "../../../services/apiClient";
9 | import { addNotification } from "../../../stores/notificationSlice";
10 | import store from "../../../stores/store";
11 | import { ResponseType } from "../../../types/responseType";
12 | import { CommentRefetchContext } from "../../posts/context/CommentContext";
13 | import { PostRefetchContext } from "../../posts/context/PostContext";
14 | import { Comments, Pagination } from "../../posts/types/postType";
15 |
16 | const postLikeComment = (commentId: string, isLiked: boolean) => {
17 | const { postId } = useContext(PostRefetchContext);
18 | const { refetch, page } = useContext(CommentRefetchContext);
19 |
20 | const postUserLikeComment = () => {
21 | return axios.post(`/social-media/like/comment/${commentId}`);
22 | };
23 | const queryClient = useQueryClient();
24 | const { t } = useTranslation();
25 | return useMutation({
26 | mutationFn: postUserLikeComment,
27 | onMutate: async (pageParam) => {
28 | await queryClient.cancelQueries({ queryKey: ["comments", postId] });
29 |
30 | const previousLikes = queryClient.getQueryData(["comments", postId]);
31 | queryClient.setQueryData<
32 | InfiniteData
5 |
44 |
6 |
13 |
7 |
8 |
9 |
10 |
11 |
12 |
14 |
15 |
16 |
17 |
18 |
19 |
43 |
20 |
21 |
22 |
23 |
24 |
25 |
42 |
26 |
41 |
27 |
34 |
28 |
29 |
30 |
31 |
32 |
33 |
35 |
36 |
37 |
38 |
39 |
40 |
10 | {
13 | setLanguage(language);
14 | changeLanguage(language);
15 | }}
16 | >
17 |
68 |
69 | );
70 | }
71 |
--------------------------------------------------------------------------------
/src/components/Notifications/Notification.tsx:
--------------------------------------------------------------------------------
1 | import { Transition } from "@headlessui/react";
2 | import {
3 | CheckCircleIcon,
4 | ExclamationCircleIcon,
5 | InformationCircleIcon,
6 | XCircleIcon,
7 | } from "@heroicons/react/outline";
8 | import { XIcon } from "@heroicons/react/solid";
9 | import { Fragment, useEffect } from "react";
10 | import { Notification } from "stores/notificationSlice";
11 |
12 | const icons = {
13 | info: (
14 |
18 | ),
19 | success: (
20 |
21 | ),
22 | warning: (
23 |
27 | ),
28 | error: ,
29 | };
30 |
31 | export type NotificationProps = {
32 | notification: Notification;
33 | onDismiss: () => void;
34 | };
35 |
36 | const notificationStyles = {
37 | success: "bg-green-500 text-white",
38 | info: "bg-blue-500 text-white",
39 | warning: "bg-yellow-500 text-black",
40 | error: "bg-red-500 text-white",
41 | };
42 |
43 | export const SingleNotification = ({
44 | notification: { id, type, title, message },
45 | onDismiss,
46 | }: NotificationProps) => {
47 | useEffect(() => {
48 | let interval = setTimeout(() => {
49 | onDismiss();
50 | }, 3000);
51 | return () => clearInterval(interval);
52 | }, []);
53 | return (
54 |
18 |
19 |
20 | {language.nativeName}
21 |
22 |
23 |
27 |
28 |
29 |
35 |
36 | {languages.map((lng, languageIdx) => (
37 |
40 | `relative cursor-pointer select-none py-2 pl-10 pr-4 ${
41 | active ? "bg-teal-100 text-teal-900" : "text-gray-900"
42 | }`
43 | }
44 | value={lng}
45 | >
46 | {({ selected }) => (
47 | <>
48 |
53 | {lng.nativeName}
54 |
55 | {selected ? (
56 |
57 |
58 |
59 | ) : null}
60 |
61 | )}
62 |
63 | ))}
64 |
65 |
66 |
67 |
55 |
65 |
89 |
90 | );
91 | };
92 |
--------------------------------------------------------------------------------
/src/components/Elements/Drawer.tsx:
--------------------------------------------------------------------------------
1 | import { Dialog, Transition } from "@headlessui/react";
2 | import { XIcon } from "@heroicons/react/outline";
3 | import clsx from "clsx";
4 | import * as React from "react";
5 |
6 | const sizes = {
7 | sm: "max-w-md",
8 | md: "max-w-xl",
9 | lg: "max-w-3xl",
10 | xl: "max-w-7xl",
11 | full: "max-w-full",
12 | };
13 |
14 | export type DrawerProps = {
15 | isOpen: boolean;
16 | onClose: () => void;
17 | title: string;
18 | children: React.ReactNode;
19 | renderFooter: () => React.ReactNode;
20 | size?: keyof typeof sizes;
21 | };
22 |
23 | export const Drawer = ({
24 | title,
25 | children,
26 | isOpen,
27 | onClose,
28 | renderFooter,
29 | size = "md",
30 | }: DrawerProps) => {
31 | return (
32 |
66 |
88 |
67 |
84 |
87 |
68 |
83 | {icons[type]}
69 |
70 |
73 | {title}
71 |{message}
72 |
74 |
81 |
82 |
46 | {isChatSection ? (
47 |
98 |
99 | );
100 | };
101 |
102 | export default ChatAuthorProfile;
103 |
--------------------------------------------------------------------------------
/src/components/Elements/ConfirmationDialog.tsx:
--------------------------------------------------------------------------------
1 | import {
2 | ExclamationIcon,
3 | InformationCircleIcon,
4 | } from "@heroicons/react/outline";
5 | import * as React from "react";
6 |
7 | import { Button } from "components/Elements/Button";
8 | import { Dialog, DialogTitle } from "components/Elements/Dialog";
9 | import { useDisclosure } from "hooks/useDisclosure";
10 |
11 | export type ConfirmationDialogProps = {
12 | triggerButton: React.ReactElement;
13 | confirmButton: React.ReactElement;
14 | title: string;
15 | body?: string;
16 | cancelButtonText?: string;
17 | icon?: "danger" | "info";
18 | isDone?: boolean;
19 | };
20 |
21 | export const ConfirmationDialog = ({
22 | triggerButton,
23 | confirmButton,
24 | title,
25 | body = "",
26 | cancelButtonText = "Cancel",
27 | icon = "danger",
28 | isDone = false,
29 | }: ConfirmationDialogProps) => {
30 | const { close, open, isOpen } = useDisclosure();
31 |
32 | const cancelButtonRef = React.useRef(null);
33 |
34 | React.useEffect(() => {
35 | if (isDone) {
36 | close();
37 | }
38 | }, [isDone, close]);
39 |
40 | const trigger = React.cloneElement(triggerButton, {
41 | onClick: open,
42 | });
43 |
44 | return (
45 | <>
46 | {trigger}
47 |
95 |
96 | );
97 | };
98 |
--------------------------------------------------------------------------------
/src/features/comments/Components/CreateComment.tsx:
--------------------------------------------------------------------------------
1 | import { faPaperPlane } from "@fortawesome/free-solid-svg-icons";
2 | import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
3 | import { zodResolver } from "@hookform/resolvers/zod";
4 | import { useEffect, useRef } from "react";
5 | import { SubmitHandler, useForm } from "react-hook-form";
6 | import { useTranslation } from "react-i18next";
7 | import { Button } from "../../../components/Elements/Button";
8 | import TextArea from "../../../components/Form/TextArea";
9 | import {
10 | CommentValidationSchema,
11 | commentValidationSchema,
12 | } from "../../posts/Components/PostEngagements";
13 | import { Comment } from "../../posts/types/postType";
14 | import postComment from "../api/postComments";
15 |
16 | type CreateCommentProps = {
17 | showComments: boolean;
18 | handleShowComments: () => void;
19 | handleRefetch: () => void;
20 | postId: string;
21 | comment?: Comment;
22 | closeModal?: () => void;
23 | };
24 | const CreateComment = ({
25 | showComments,
26 | handleShowComments,
27 | handleRefetch,
28 | postId,
29 | comment,
30 | closeModal,
31 | }: CreateCommentProps) => {
32 | const commentRef = useRef
69 | {!isChatSection && (
70 |
97 | {username}
71 | )} 72 |
77 |
96 | 92 | {lastMessage} 93 |
94 | {getTimeAgoMessage(sentTime)} 95 | (isUserAdmin ? openImageUpload() : closeImageUpload())}
42 | >
43 | {isCover && url?.includes("placeholder") ? (
44 |
77 | {isImageUploadOpen && (
78 | 45 | {isCover ? coverTitle ?? "" : ""} 46 |
47 | ) : ( 48 |
66 |
75 | )}
76 |
53 |
94 | );
95 | };
96 |
97 | export default Login;
98 |
--------------------------------------------------------------------------------
/src/components/Form/TextArea.tsx:
--------------------------------------------------------------------------------
1 | import { ForwardedRef, forwardRef } from "react";
2 | import { Controller } from "react-hook-form";
3 | export const inputFieldStyle = `
4 | w-full px-3 py-2 text-sm leading-tight transition-all duration-300 hover:border-teal-200 outline-none text-gray-700 border
5 | `;
6 |
7 | interface TextAreaProps
54 |
93 |
55 |
92 | 56 | {t("authPage.welcome")} 57 |
58 | 91 |
57 |
63 |
99 | );
100 | }
101 | );
102 |
103 | export default TextArea as
64 | (
68 |
89 | )}
90 | />
91 | {children}
92 |
93 | {errors[name] && (
94 | 95 | {errors[name]?.message} 96 |
97 | )} 98 |
25 |
97 | );
98 | };
99 |
100 | export default UserProfileAbout;
101 |
--------------------------------------------------------------------------------
/src/features/posts/Components/Posts.tsx:
--------------------------------------------------------------------------------
1 | import { useSelector } from "react-redux";
2 | import { useParams } from "react-router-dom";
3 | import { RootState } from "stores/store";
4 | import Shimmer from "../../../components/Shimmer/Shimmer";
5 | import ShimmerPosts from "../../../components/Shimmer/ShimmerPosts";
6 | import useInfiniteScroll from "../../../hooks/useInfiniteScroll";
7 | import usePreviousPage from "../../user/hooks/usePreviousPage";
8 | import getPosts from "../api/getPosts";
9 | import { PostRefetchContext } from "../context/PostContext";
10 | import { Author } from "../types/postType";
11 | import CreatePostDisplay from "./CreatePostDisplay";
12 | import PostCard from "./Post";
13 |
14 | type PostsProps = {
15 | tag?: string;
16 | bookmarks?: boolean;
17 | };
18 | const InfiniteShimmerPosts = () => (
19 |
26 |
81 | {isFollowersOpen && (
82 |
27 |
54 |
29 | user && user?.followersCount > 0 && openFollowersModal()
30 | }
31 | className={
32 | user && user?.followersCount > 0
33 | ? "cursor-pointer"
34 | : "cursor-default"
35 | }
36 | >
37 |
40 | {user?.followersCount}
38 |{t("userPages.followers")} 🚀
39 |
42 | user && user?.followingCount > 0 && openFollowingModal()
43 | }
44 | className={
45 | user && user?.followingCount > 0
46 | ? "cursor-pointer"
47 | : "cursor-default"
48 | }
49 | >
50 |
53 | {user?.followingCount}
51 |{t("userPages.following")} 👥
52 |
55 |
80 | 56 | Username: {user?.account?.username} 📛 57 |
58 |59 | {t("userPages.dob")}:{" "} 60 | {(user?.dob && formatDateStringToBirthday(user?.dob)) || 61 | "Not provided"}{" "} 62 | 🎂 63 |
64 |65 | {t("userPages.location")}:{" "} 66 | {user?.location || t("userPages.notProvided")} 🌍 67 |
68 |69 | {t("authPage.email")}:{" "} 70 | 71 | {user?.account?.email}{" "} 72 | 73 | 📧 74 |
75 |76 | {t("userPages.phoneNumber")}:{" "} 77 | {user?.phoneNumber || t("userPages.notProvided")} 📞 78 |
79 |
20 | {new Array(6).fill(1).map((value, index) => (
21 |
29 | );
30 |
31 | const Posts = ({ tag, bookmarks }: PostsProps) => {
32 | const { username } = useParams();
33 | const { isLoading, error, data, fetchNextPage, isFetchingNextPage, refetch } =
34 | getPosts(username, tag, bookmarks);
35 | const user = useSelector
25 |
27 | ))}
28 |
50 |
68 | );
69 | }
70 |
71 | return (
72 | <>
73 |
51 | {bookmarks ? (
52 |
53 | No bookmarked posts😞.
54 |
56 | ) : (
57 | <>
58 |
67 |
53 | No bookmarked posts😞.
54 |
Bookmark your first Post📑.
55 |
56 | ) : (
57 | <>
58 | 60 | {username === user?.account.username 61 | ? "👋 Create your first Post!" 62 | : "No Posts Available. 😞"} 63 |
64 | 65 | )} 66 |
74 |
97 | {isFetchingNextPage ?
75 | {(!username || username === user?.account.username) &&
76 | !tag &&
77 | !bookmarks &&
91 |
93 | ));
94 | })}
95 |
96 |