Skip to content

Commit

Permalink
🔨 refactor:将页面模块封装
Browse files Browse the repository at this point in the history
  • Loading branch information
BlackishGreen33 committed Jul 11, 2024
1 parent e63d04c commit 291edd4
Show file tree
Hide file tree
Showing 8 changed files with 281 additions and 227 deletions.
Original file line number Diff line number Diff line change
@@ -1,13 +1,6 @@
import { redirectToSignIn } from '@clerk/nextjs/server';
import { ChannelType } from '@prisma/client';
import { redirect } from 'next/navigation';
import { NextPage } from 'next';

import { ChatHeader } from '@/common/components/chat/chat-header';
import { ChatInput } from '@/common/components/chat/chat-input';
import { ChatMessages } from '@/common/components/chat/chat-messages';
import { MediaRoom } from '@/common/components/elements/media-room';
import { currentProfile } from '@/common/libs/current-profile';
import { db } from '@/common/libs/db';
import Channels from '@/modules/Channels';

interface ChannelIdPageProps {
params: {
Expand All @@ -16,72 +9,12 @@ interface ChannelIdPageProps {
};
}

const ChannelIdPage = async ({ params }: ChannelIdPageProps) => {
const profile = await currentProfile();

if (!profile) {
return redirectToSignIn();
}

const channel = await db.channel.findUnique({
where: {
id: params.channelId,
},
});

const member = await db.member.findFirst({
where: {
serverId: params.serverId,
profileId: profile.id,
},
});

if (!channel || !member) {
redirect('/');
}

const Page: NextPage<ChannelIdPageProps> = ({ params }) => {
return (
<div className="flex h-full flex-col bg-white dark:bg-[#313338]">
<ChatHeader
name={channel.name}
serverId={channel.serverId}
type="channel"
/>
{channel.type === ChannelType.TEXT && (
<>
<ChatMessages
member={member}
name={channel.name}
chatId={channel.id}
type="channel"
apiUrl="/api/messages"
socketUrl="/api/socket/messages"
socketQuery={{
channelId: channel.id,
serverId: channel.serverId,
}}
paramKey="channelId"
paramValue={channel.id}
/>
<ChatInput
name={channel.name}
type="channel"
apiUrl="/api/socket/messages"
query={{
channelId: channel.id,
serverId: channel.serverId,
}}
/>
</>
)}
{channel.type === ChannelType.AUDIO && (
<MediaRoom chatId={channel.id} video={false} audio={true} />
)}
{channel.type === ChannelType.VIDEO && (
<MediaRoom chatId={channel.id} video={true} audio={true} />
)}
</div>
<>
<Channels serverId={params.serverId} channelId={params.channelId} />
</>
);
};

export default ChannelIdPage;
export default Page;
Original file line number Diff line number Diff line change
@@ -1,13 +1,6 @@
import { redirectToSignIn } from '@clerk/nextjs/server';
import { redirect } from 'next/navigation';
import { NextPage } from 'next';

import { ChatHeader } from '@/common/components/chat/chat-header';
import { ChatInput } from '@/common/components/chat/chat-input';
import { ChatMessages } from '@/common/components/chat/chat-messages';
import { MediaRoom } from '@/common/components/elements/media-room';
import { getOrCreateConversation } from '@/common/libs/conversation';
import { currentProfile } from '@/common/libs/current-profile';
import { db } from '@/common/libs/db';
import Conversations from '@/modules/Conversations';

interface MemberIdPageProps {
params: {
Expand All @@ -19,79 +12,16 @@ interface MemberIdPageProps {
};
}

const MemberIdPage = async ({ params, searchParams }: MemberIdPageProps) => {
const profile = await currentProfile();

if (!profile) {
return redirectToSignIn();
}

const currentMember = await db.member.findFirst({
where: {
serverId: params.serverId,
profileId: profile.id,
},
include: {
profile: true,
},
});

if (!currentMember) {
return redirect('/');
}

const conversation = await getOrCreateConversation(
currentMember.id,
params.memberId
);

if (!conversation) {
return redirect(`/servers/${params.serverId}`);
}

const { memberOne, memberTwo } = conversation;

const otherMember =
memberOne.profileId === profile.id ? memberTwo : memberOne;

const Page: NextPage<MemberIdPageProps> = ({ params, searchParams }) => {
return (
<div className="flex h-full flex-col bg-white dark:bg-[#313338]">
<ChatHeader
imageUrl={otherMember.profile.imageUrl}
name={otherMember.profile.name}
<>
<Conversations
memberId={params.memberId}
serverId={params.serverId}
type="conversation"
video={searchParams.video}
/>
{searchParams.video && (
<MediaRoom chatId={conversation.id} video={true} audio={true} />
)}
{!searchParams.video && (
<>
<ChatMessages
member={currentMember}
name={otherMember.profile.name}
chatId={conversation.id}
type="conversation"
apiUrl="/api/direct-messages"
paramKey="conversationId"
paramValue={conversation.id}
socketUrl="/api/socket/direct-messages"
socketQuery={{
conversationId: conversation.id,
}}
/>
<ChatInput
name={otherMember.profile.name}
type="conversation"
apiUrl="/api/socket/direct-messages"
query={{
conversationId: conversation.id,
}}
/>
</>
)}
</div>
</>
);
};

export default MemberIdPage;
export default Page;
49 changes: 9 additions & 40 deletions src/app/(main)/(routes)/servers/[serverId]/page.tsx
Original file line number Diff line number Diff line change
@@ -1,50 +1,19 @@
import { redirectToSignIn } from '@clerk/nextjs/server';
import { redirect } from 'next/navigation';
import { NextPage } from 'next';

import { currentProfile } from '@/common/libs/current-profile';
import { db } from '@/common/libs/db';
import Servers from '@/modules/Servers';

interface ServerIdPageProps {
params: {
serverId: string;
};
}

const ServerIdPage = async ({ params }: ServerIdPageProps) => {
const profile = await currentProfile();

if (!profile) {
return redirectToSignIn();
}

const server = await db.server.findUnique({
where: {
id: params.serverId,
members: {
some: {
profileId: profile.id,
},
},
},
include: {
channels: {
where: {
name: '一般频道',
},
orderBy: {
createdAt: 'asc',
},
},
},
});

const initialChannel = server?.channels[0];

if (initialChannel?.name !== '一般频道') {
return null;
}

return redirect(`/servers/${params.serverId}/channels/${initialChannel?.id}`);
const Page: NextPage<ServerIdPageProps> = ({ params }) => {
return (
<>
<Servers serverId={params.serverId} />
</>
);
};

export default ServerIdPage;
export default Page;
36 changes: 14 additions & 22 deletions src/app/(setup)/page.tsx
Original file line number Diff line number Diff line change
@@ -1,27 +1,19 @@
import { redirect } from 'next/navigation';
import { NextPage } from 'next';

import { InitialModal } from '@/common/components/modals/initial-modal';
import { db } from '@/common/libs/db';
import { initialProfile } from '@/common/libs/initial-profile';
import SetUp from '@/modules/SetUp';

const SetupPage = async () => {
const profile = await initialProfile();
interface InviteCodePageProps {
params: {
inviteCode: string;
};
}

const server = await db.server.findFirst({
where: {
members: {
some: {
profileId: profile.id,
},
},
},
});

if (server) {
return redirect(`/servers/${server.id}`);
}

return <InitialModal />;
const Page: NextPage<InviteCodePageProps> = ({ params }) => {
return (
<>
<SetUp />
</>
);
};

export default SetupPage;
export default Page;
84 changes: 81 additions & 3 deletions src/modules/Channels/components/Channels.tsx
Original file line number Diff line number Diff line change
@@ -1,7 +1,85 @@
import { SignIn as ClerkSignIn } from '@clerk/nextjs';
import { redirectToSignIn } from '@clerk/nextjs/server';
import { ChannelType } from '@prisma/client';
import { redirect } from 'next/navigation';

const Channels: React.FC = () => {
return <ClerkSignIn />;
import { ChatHeader } from '@/common/components/chat/chat-header';
import { ChatInput } from '@/common/components/chat/chat-input';
import { ChatMessages } from '@/common/components/chat/chat-messages';
import { MediaRoom } from '@/common/components/elements/media-room';
import { currentProfile } from '@/common/libs/current-profile';
import { db } from '@/common/libs/db';

interface ChannelProps {
serverId: string;
channelId: string;
}

const Channels: React.FC<ChannelProps> = async ({ serverId, channelId }) => {
const profile = await currentProfile();

if (!profile) {
return redirectToSignIn();
}

const channel = await db.channel.findUnique({
where: {
id: channelId,
},
});

const member = await db.member.findFirst({
where: {
serverId: serverId,
profileId: profile.id,
},
});

if (!channel || !member) {
redirect('/');
}

return (
<div className="flex h-full flex-col bg-white dark:bg-[#313338]">
<ChatHeader
name={channel.name}
serverId={channel.serverId}
type="channel"
/>
{channel.type === ChannelType.TEXT && (
<>
<ChatMessages
member={member}
name={channel.name}
chatId={channel.id}
type="channel"
apiUrl="/api/messages"
socketUrl="/api/socket/messages"
socketQuery={{
channelId: channel.id,
serverId: channel.serverId,
}}
paramKey="channelId"
paramValue={channel.id}
/>
<ChatInput
name={channel.name}
type="channel"
apiUrl="/api/socket/messages"
query={{
channelId: channel.id,
serverId: channel.serverId,
}}
/>
</>
)}
{channel.type === ChannelType.AUDIO && (
<MediaRoom chatId={channel.id} video={false} audio={true} />
)}
{channel.type === ChannelType.VIDEO && (
<MediaRoom chatId={channel.id} video={true} audio={true} />
)}
</div>
);
};

export default Channels;
Loading

0 comments on commit 291edd4

Please sign in to comment.