+
+
Page not found
-
-
+
+
+
- ![]()
+
-
+
-
- - -
-
-
-
-
-
-
-
-
-
-
-
- - - -
-
-
- Preview
- -
- 
-
-
- - {title} -
-- {des} -
-
-
- Project Title
- - -- Short description about your project -
- - - -- {characterLimit - (des ?? '').length} characters left -
- -- Topics - (Helps in searching and ranking your project post) -
- -
-
- {tags?.map((tag, i) => {
- return
- - {tagLimit - (tags ?? []).length} Tags left -
- - -
-
- );
+const Tags = () => {
+ return - {tag} -
- -Tags Component
;
};
-export default Tag;
+export default Tags;
diff --git a/client/src/modules/editor/components/text-editor.tsx b/client/src/modules/editor/components/text-editor.tsx
new file mode 100644
index 000000000..8487d3c62
--- /dev/null
+++ b/client/src/modules/editor/components/text-editor.tsx
@@ -0,0 +1,80 @@
+import { Box } from '@mui/material';
+import { useEffect, useRef } from 'react';
+import EditorJS, { EditorConfig } from '@editorjs/editorjs';
+import { tools } from './tools';
+import { useAtomValue, useSetAtom } from 'jotai';
+import { EditorContentAtom, TextEditorAtom } from '../states';
+
+const A2ZTextEditor = () => {
+ const editorContent = useAtomValue(EditorContentAtom);
+ const setTextEditor = useSetAtom(TextEditorAtom);
+
+ const editorJSRef = useRef
- {[...Array(count)].map((_, idx) => (
-
- );
-};
-
-export default LatestProjectsSkeleton;
diff --git a/client/src/modules/home/components/no-banner-project.tsx b/client/src/modules/home/components/no-banner-project.tsx
new file mode 100644
index 000000000..9320d94c0
--- /dev/null
+++ b/client/src/modules/home/components/no-banner-project.tsx
@@ -0,0 +1,93 @@
+import { Link } from 'react-router-dom';
+import { Avatar, Box, Typography, Stack, useTheme } from '@mui/material';
+import { getTrendingProjectsResponse } from '../../../infra/rest/apis/project/typing';
+import { getDay } from '../../../shared/utils/date';
+
+interface NoBannerProjectCardProps {
+ project: getTrendingProjectsResponse;
+ index: number;
+}
+
+const NoBannerProjectCard = ({ project, index }: NoBannerProjectCardProps) => {
+ const theme = useTheme();
+
+ const {
+ _id,
+ title,
+ personal_info: { fullname, username, profile_img },
+ publishedAt,
+ } = project;
+
+ return (
+
-
- ))}
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- - {index < 10 ? '0' + (index + 1) : index} -
-
-
-
- );
-};
-
-export default MinimalProjectPost;
diff --git a/client/src/modules/home/components/trendingProjectsSkeleton.tsx b/client/src/modules/home/components/trendingProjectsSkeleton.tsx
deleted file mode 100644
index e98bccc27..000000000
--- a/client/src/modules/home/components/trendingProjectsSkeleton.tsx
+++ /dev/null
@@ -1,25 +0,0 @@
-const TrendingProjectsSkeleton = ({ count }: { count: number }) => {
- return (
-
- 
-
-
- - {fullname} @{username} -
-{getDay(publishedAt)}
-{title}
-
- {[...Array(count)].map((_, idx) => (
-
- );
-};
-
-export default TrendingProjectsSkeleton;
diff --git a/client/src/modules/home/constants/index.ts b/client/src/modules/home/constants/index.ts
index 6ac5e4adc..6a41aa71c 100644
--- a/client/src/modules/home/constants/index.ts
+++ b/client/src/modules/home/constants/index.ts
@@ -1,4 +1,5 @@
export const categories = [
+ // REPLACE ME WITH POPULAR TAGS
'web',
'data science',
'game development',
diff --git a/client/src/modules/home/hooks/index.ts b/client/src/modules/home/hooks/index.ts
new file mode 100644
index 000000000..b4172c297
--- /dev/null
+++ b/client/src/modules/home/hooks/index.ts
@@ -0,0 +1,62 @@
+import { useSetAtom } from 'jotai';
+import { HomePageProjectsAtom, HomePageTrendingProjectsAtom } from '../states';
+import {
+ getAllProjects,
+ getTrendingProjects,
+ searchProjects,
+} from '../../../infra/rest/apis/project';
+
+const useHome = () => {
+ const setProjects = useSetAtom(HomePageProjectsAtom);
+ const setTrending = useSetAtom(HomePageTrendingProjectsAtom);
+
+ const fetchLatestProjects = async (page = 1) => {
+ const response = await getAllProjects(page);
+ if (response.data) {
+ setProjects(response.data);
+ }
+ };
+
+ const fetchTrendingProjects = async () => {
+ const response = await getTrendingProjects();
+ if (response.data) {
+ setTrending(response.data);
+ }
+ };
+
+ const fetchProjectsByCategory = async ({
+ tag,
+ query,
+ user_id,
+ page = 1,
+ limit = 10,
+ rmv_project_by_id,
+ }: {
+ tag?: string;
+ query?: string;
+ user_id?: string;
+ page?: number;
+ limit?: number;
+ rmv_project_by_id?: string;
+ }) => {
+ const response = await searchProjects({
+ tag,
+ query,
+ user_id,
+ page,
+ limit,
+ rmv_project_by_id,
+ });
+ if (response.data) {
+ setProjects(response.data);
+ }
+ };
+
+ return {
+ fetchLatestProjects,
+ fetchTrendingProjects,
+ fetchProjectsByCategory,
+ };
+};
+
+export default useHome;
diff --git a/client/src/modules/home/hooks/useHomeProjects.ts b/client/src/modules/home/hooks/useHomeProjects.ts
deleted file mode 100644
index b210cf301..000000000
--- a/client/src/modules/home/hooks/useHomeProjects.ts
+++ /dev/null
@@ -1,83 +0,0 @@
-import { useCallback } from 'react';
-import { useAtom } from 'jotai';
-import { filterPaginationData } from '../../../shared/requests/filter-pagination-data';
-import {
- AllProjectsAtom,
- TrendingProjectAtom,
-} from '../../../shared/states/project';
-import { useNotifications } from '../../../shared/hooks/use-notification';
-import {
- getAllLatestProjects,
- getTrendingProjects,
- searchProjectByCategory,
-} from '../requests';
-import type { Project, AllProjectsData } from '../../../infra/rest/typings';
-
-export const useHomeProjects = (pageState: string) => {
- const [projects, setProjects] = useAtom(AllProjectsAtom);
- const [trendingProjects, setTrendingProjects] = useAtom(TrendingProjectAtom);
- const { addNotification } = useNotifications();
-
- const fetchLatestProjects = useCallback(
- async ({ page = 1 }) => {
- const response = await getAllLatestProjects(page);
- if (response.projects.length > 0) {
- const formattedData = await filterPaginationData
-
- ))}
-
-
-
-
-
-
-
-
-
-
-
+
+ );
+};
+
+export default ManageDraftProjectPost;
diff --git a/client/src/modules/project/manage-projects/components/manageProjectCard.tsx b/client/src/modules/manage-projects/components/publish-projects.tsx
similarity index 77%
rename from client/src/modules/project/manage-projects/components/manageProjectCard.tsx
rename to client/src/modules/manage-projects/components/publish-projects.tsx
index f6398d2e5..bcdbfa931 100644
--- a/client/src/modules/project/manage-projects/components/manageProjectCard.tsx
+++ b/client/src/modules/manage-projects/components/publish-projects.tsx
@@ -114,11 +114,7 @@ const deleteProject = (
});
};
-export const ManagePublishedProjectCard = ({
- project,
-}: {
- project: Project;
-}) => {
+const ManagePublishedProjectCard = ({ project }: { project: Project }) => {
const { banner, project_id, title, publishedAt, activity } = project;
const [user] = useAtom(UserAtom);
@@ -184,50 +180,4 @@ export const ManagePublishedProjectCard = ({
);
};
-export const ManageDraftProjectPost = ({ project }: { project: Project }) => {
- const { title, des } = project;
- let { index = 0 } = project;
-
- index++;
-
- return (
- + {index < 10 ? '0' + index : index} +
+ +
+
+
+ {title}
+ ++ {des?.length ? des : 'No Description'} +
+ +
+
+ Edit
+
+
+
+
+
+
+
+
-
- );
-};
+export default ManagePublishedProjectCard;
diff --git a/client/src/modules/manage-projects/hooks/index.ts b/client/src/modules/manage-projects/hooks/index.ts
new file mode 100644
index 000000000..e69de29bb
diff --git a/client/src/modules/project/manage-projects/index.tsx b/client/src/modules/manage-projects/index.tsx
similarity index 72%
rename from client/src/modules/project/manage-projects/index.tsx
rename to client/src/modules/manage-projects/index.tsx
index 392b03244..80b68dd12 100644
--- a/client/src/modules/project/manage-projects/index.tsx
+++ b/client/src/modules/manage-projects/index.tsx
@@ -1,23 +1,10 @@
+import { useAtom, useAtomValue } from 'jotai';
import { useEffect, useState, useCallback } from 'react';
-import { filterPaginationData } from '../../../shared/requests/filter-pagination-data';
-import InPageNavigation from '../../../shared/components/molecules/page-navigation';
-import Loader from '../../../shared/components/atoms/loader';
-import NoDataMessage from '../../../shared/components/atoms/no-data-msg';
-import AnimationWrapper from '../../../shared/components/atoms/page-animation';
-import {
- ManagePublishedProjectCard,
- ManageDraftProjectPost,
-} from './components/manageProjectCard';
-import LoadMoreDataBtn from '../../../shared/components/molecules/load-more-data';
import { useSearchParams } from 'react-router-dom';
-import { useAtom, useAtomValue } from 'jotai';
-import {
- DraftProjectAtom,
- AllProjectsAtom,
-} from '../../../shared/states/project';
-import { UserAtom } from '../../../shared/states/user';
-import { userWrittenProjects } from '../requests';
-import { AllProjectsData } from '../../../infra/rest/typings';
+import InPageNavigation from '../../shared/components/molecules/page-navigation';
+import NoDataMessageBox from '../../shared/components/atoms/no-data-msg';
+import ManagePublishedProjectCard from './components/publish-projects';
+import ManageDraftProjectPost from './components/draft-projects';
const ManageProjects = () => {
const [projects, setProjects] = useAtom(AllProjectsAtom);
@@ -122,15 +109,14 @@ const ManageProjects = () => {
<>
{projects.results.map((project, i) => {
return (
- - {index < 10 ? '0' + index : index} -
- -
-
-
- {title}
- -- {des?.length ? des : 'No Description'} -
- -
-
- Edit
-
-
-
-
-
-
-
-
-
- );
-};
-
-export default AboutUser;
diff --git a/client/src/modules/profile/hooks/index.ts b/client/src/modules/profile/hooks/index.ts
new file mode 100644
index 000000000..46f724ce7
--- /dev/null
+++ b/client/src/modules/profile/hooks/index.ts
@@ -0,0 +1,27 @@
+import { useCallback } from 'react';
+import { userProfile } from '../../../infra/rest/apis/user';
+import { useParams } from 'react-router-dom';
+import { useSetAtom } from 'jotai';
+import { ProfileAtom } from '../states';
+import useHome from '../../home/hooks';
+
+const useProfile = () => {
+ const { username } = useParams();
+ const setProfile = useSetAtom(ProfileAtom);
+ const { fetchProjectsByCategory } = useHome();
+
+ const fetchUserProfile = useCallback(async () => {
+ if (!username) return;
+ const response = await userProfile(username);
+ if (response.data) {
+ setProfile(response.data);
+ await fetchProjectsByCategory({ user_id: response.data._id });
+ }
+ }, [username, setProfile, fetchProjectsByCategory]);
+
+ return {
+ fetchUserProfile,
+ };
+};
+
+export default useProfile;
diff --git a/client/src/modules/profile/index.tsx b/client/src/modules/profile/index.tsx
index a14812150..13b3775a5 100644
--- a/client/src/modules/profile/index.tsx
+++ b/client/src/modules/profile/index.tsx
@@ -1,188 +1,162 @@
-import { useEffect, useState, useCallback } from 'react';
-import { Link, useParams } from 'react-router-dom';
-import AnimationWrapper from '../../shared/components/atoms/page-animation';
-import Loader from '../../shared/components/atoms/loader';
-import AboutUser from './components/aboutUser';
-import { filterPaginationData } from '../../shared/requests/filter-pagination-data';
+import { useEffect } from 'react';
+import { useParams } from 'react-router-dom';
import InPageNavigation from '../../shared/components/molecules/page-navigation';
-import ProjectPostCard from '../../shared/components/molecules/project-card';
import NoDataMessage from '../../shared/components/atoms/no-data-msg';
-import LoadMoreDataBtn from '../../shared/components/molecules/load-more-data';
-import PageNotFound from '../404';
import { useAtom, useAtomValue } from 'jotai';
-import { ProfileAtom } from '../../shared/states/profile';
-import { UserAtom } from '../../shared/states/user';
-import { AllProjectsAtom } from '../../shared/states/project';
-import { AllProjectsData } from '../../infra/rest/typings/project';
-import { emptyProfileState } from '../../shared/states/emptyStates/profile';
-import { searchProjectByCategory } from '../home/requests';
-import { getUserProfile } from './requests';
+import { HomePageProjectsAtom } from '../home/states';
+import BannerProjectCard from '../home/components/banner-project-card';
+import { ProfileAtom } from './states';
+import { Virtuoso } from 'react-virtuoso';
+import { BannerSkeleton } from '../../shared/components/atoms/skeleton';
+import { UserAtom } from '../../infra/states/user';
+import { Avatar, Box, CircularProgress } from '@mui/material';
+import useHome from '../home/hooks';
+import AboutUser from './components/about-user';
+import A2ZTypography from '../../shared/components/atoms/typography';
+import Button from '../../shared/components/atoms/button';
+import useProfile from './hooks';
const Profile = () => {
- const { id: profileId } = useParams();
+ const { username } = useParams();
const user = useAtomValue(UserAtom);
- const [profile, setProfile] = useAtom(ProfileAtom);
- const [projects, setProjects] = useAtom(AllProjectsAtom);
-
- const [loading, setLoading] = useState(true);
- const [profileLoaded, setProfileLoaded] = useState('');
-
- const resetState = useCallback(() => {
- setProfile(emptyProfileState);
- setLoading(true);
- setProfileLoaded('');
- }, [setProfile]);
-
- const getProjects = useCallback(
- async (params: Record- {bio.length ? bio : 'Nothing to read here'} -
- -
- {Object.keys(social_links).map(key => {
- const link = social_links[key];
- return link ? (
-
-
-
- ) : (
- ''
- );
- })}
-
-
- - Joined on {getFullDay(joinedAt)} -
-
- 
-
- {
+ const nextPage = Math.floor(projects.length / 10) + 1; // Assuming page size of 10
+ fetchProjectsByCategory({
+ page: nextPage,
+ user_id: profile._id,
+ });
+ }}
+ components={{
+ Footer: () =>
+ !projects || projects.length === 0 ? (
+
-
- - @{profile.personal_info.username} -
-- {profile.personal_info.fullname} -
- -- {profile.account_info.total_posts.toLocaleString()} Projects -{' '} - {profile.account_info.total_reads.toLocaleString()} Reads -
- -
- {profileId === user.username ? (
-
- Edit Profile
-
- ) : (
- ''
+
+ {/* Right Column (Profile Info) */}
+ ({ md: `1px solid ${theme.palette.divider}` }),
+ }}
+ >
+
+
+
+
+ {/* Left Column (Projects + About Tabs) */}
+
+
+ {projects.length ? (
+ (
+
-
-
-
- <>
- {projects === null ? (
-
-
- );
- })
- ) : (
-
-
-
-
- );
-};
-
-export default CommentCard;
diff --git a/client/src/modules/project/components/commentField.tsx b/client/src/modules/project/components/commentField.tsx
deleted file mode 100644
index 80645b0f7..000000000
--- a/client/src/modules/project/components/commentField.tsx
+++ /dev/null
@@ -1,142 +0,0 @@
-import { useAtom, useAtomValue, useSetAtom } from 'jotai';
-import { useState } from 'react';
-import { UserAtom } from '../../../shared/states/user';
-import { useNotifications } from '../../../shared/hooks/use-notification';
-import { commentNotification } from '../requests';
-import { ProjectAtom } from '../../../shared/states/project';
-import { TotalParentCommentsLoadedAtom } from '../states';
-import { Comment } from '../../../infra/rest/typings';
-
-const CommentField = ({
- action,
- index = undefined,
- replyingTo = undefined,
- setReplying,
-}: {
- action: string;
- index?: number;
- replyingTo?: string;
- setReplying: (value: boolean) => void;
-}) => {
- const user = useAtomValue(UserAtom);
- const [project, setProject] = useAtom(ProjectAtom);
- const setTotalParentCommentsLoaded = useSetAtom(
- TotalParentCommentsLoadedAtom
- );
- const { addNotification } = useNotifications();
-
- const [comment, setComment] = useState('');
-
- const handleComment = async () => {
- if (!user?.access_token) {
- return addNotification({
- message: 'Please login to comment',
- type: 'error',
- });
- }
- if (!comment.length) {
- return addNotification({
- message: 'Write something to leave a comment...',
- type: 'error',
- });
- }
- if (!project || !project._id) {
- return addNotification({
- message: 'Project not found',
- type: 'error',
- });
- }
-
- try {
- const response = await commentNotification({
- _id: project._id,
- comment,
- project_author: project.author._id || '',
- replying_to: replyingTo,
- });
-
- if (response._id) {
- setComment('');
-
- // Add user info to the response
- const commentWithUser = {
- ...response,
- commented_by: {
- personal_info: {
- username: user.username || '',
- fullname: user.fullname || '',
- profile_img: user.profile_img || '',
- },
- },
- };
-
- const currentComments = project.comments?.results || [];
- let newCommentArr: Comment[];
-
- if (replyingTo && index !== undefined) {
- // Handle reply
- const parentComment = currentComments[index];
- if (parentComment) {
- parentComment.children.push(response._id);
- commentWithUser.childrenLevel =
- (parentComment.childrenLevel || 0) + 1;
- commentWithUser.parentIndex = index;
- (parentComment as Comment).isReplyLoaded = true;
-
- newCommentArr = [...currentComments];
- newCommentArr.splice(index + 1, 0, commentWithUser);
- } else {
- newCommentArr = currentComments;
- }
- setReplying(false);
- } else {
- // Handle new comment
- commentWithUser.childrenLevel = 0;
- newCommentArr = [commentWithUser, ...currentComments];
- }
-
- setProject({
- ...project,
- comments: {
- ...project.comments,
- results: newCommentArr,
- },
- activity: {
- ...project.activity,
- total_comments: (project.activity.total_comments || 0) + 1,
- total_parent_comments:
- (project.activity.total_parent_comments || 0) +
- (replyingTo ? 0 : 1),
- },
- });
-
- setTotalParentCommentsLoaded(prevVal => prevVal + (replyingTo ? 0 : 1));
- }
- } catch (error) {
- addNotification({
- message: 'Failed to post comment',
- type: 'error',
- });
- console.error('Comment error:', error);
- }
- };
-
- return (
- <>
-
-
-
-
-
-
-
-
- - {commented_by_fullname} @{commented_by_username} -
-{getDay(commentedAt)}
-{comment}
- -
- {isReplyLoaded ? (
-
- ) : (
-
- )}
-
-
-
- {(user?.username === commented_by_username ||
- user?.username === project?.author.personal_info.username) && (
-
- )}
-
-
- {isReplying && (
-
-
- )}
-