AnswerOverflow · RhysSullivan · Mar 15, 2023 · Mar 14, 2023 · Mar 14, 2023 · Mar 14, 2023
diff --git a/apps/discord-bot/package.json b/apps/discord-bot/package.json
@@ -60,12 +60,13 @@
 		"with-env": "dotenv -e ../../.env --",
 		"clean": "rm -rf .turbo node_modules dist coverage",
 		"watch": "tsup  --silent --format cjs --watch . --watch ../../packages/api/src/",
-		"build": "tsup --format cjs",
+		"build": "yarn build-deps && tsup --format cjs",
 		"format": "prettier --ignore-path ../../.gitignore --config ./prettierrc.cjs --write .",
 		"format:check": "prettier --ignore-path ../../.gitignore --config ./prettierrc.cjs --check .",
 		"lint": "eslint . && tsc --noEmit",
 		"lint:fix": "eslint . --fix",
-		"dev": "yarn run with-env rm -rf dist && yarn run build && run-p watch start",
+		"build-deps": "(cd ../../packages/discordjs-mock && yarn build)",
+		"dev": "yarn build-deps && yarn run with-env rm -rf dist && yarn run build && run-p watch start",
 		"start": "yarn run with-env node dist/index.js",
 		"test": "yarn run with-env jest --coverage",
 		"test:watch": "yarn run with-env jest --watch",

diff --git a/apps/nextjs/package.json b/apps/nextjs/package.json
@@ -22,6 +22,7 @@
 		"@answeroverflow/ui": "*",
 		"@next/font": "^13.1.2",
 		"@tanstack/react-query": "^4.19.0",
+		"@tanstack/react-query-devtools": "^4.26.1",
 		"@trpc/client": "^10.4.3",
 		"@trpc/next": "^10.15.0",
 		"@trpc/react-query": "^10.4.3",

diff --git a/apps/nextjs/src/pages/_app.tsx b/apps/nextjs/src/pages/_app.tsx
@@ -6,10 +6,9 @@ import { SessionProvider } from 'next-auth/react';
 import type { Session } from 'next-auth';
 import type { AppType } from 'next/app';
 import hljs from 'highlight.js';
-
-import { NextTRPC, trpc } from '@answeroverflow/ui';
-import { Footer, Navbar } from '@answeroverflow/ui';
+import { NextTRPC, PageWrapper, trpc } from '@answeroverflow/ui';
 import { useEffect } from 'react';
+import { ReactQueryDevtools } from '@tanstack/react-query-devtools';
 
 // eslint-disable-next-line @typescript-eslint/naming-convention
 const MyApp: AppType<{ session: Session | null }> = ({
@@ -24,12 +23,10 @@ const MyApp: AppType<{ session: Session | null }> = ({
 	}, []);
 	return (
 		<SessionProvider session={session}>
-			<Navbar />
-			<div className="mx-auto w-full max-w-screen-xl overflow-y-scroll scrollbar-hide overflow-x-hidden sm:px-4">
+			<PageWrapper>
 				<Component {...pageProps} />
-			</div>
-
-			<Footer />
+			</PageWrapper>
+			<ReactQueryDevtools initialIsOpen={false} />
 		</SessionProvider>
 	);
 };

diff --git a/apps/nextjs/src/pages/_document.tsx b/apps/nextjs/src/pages/_document.tsx
@@ -18,7 +18,6 @@ class MyDocument extends Document {
 
 	override render() {
 		return (
-			// eslint-disable-next-line tailwindcss/no-custom-classname
 			<Html className="dark">
 				<Head>
 					{/* TODO: Swap for Next font */}
@@ -27,7 +26,7 @@ class MyDocument extends Document {
 						rel="stylesheet"
 					/>
 				</Head>
-				<body className="dark:bg-neutral-800">
+				<body className="bg-ao-white dark:bg-ao-black">
 					<Main />
 					<NextScript />
 				</body>

diff --git a/apps/nextjs/src/pages/index.tsx b/apps/nextjs/src/pages/index.tsx
@@ -1,55 +1,18 @@
 import type { NextPage } from 'next';
-import Head from 'next/head';
-import { AnswerOverflowLogo, trpc } from '@answeroverflow/ui';
-import type { inferProcedureOutput } from '@trpc/server';
-import type { AppRouter } from '@answeroverflow/api';
-import { ServerInviteDriver } from '@answeroverflow/ui';
-const ServerCard: React.FC<{
-	server: Exclude<
-		inferProcedureOutput<AppRouter['auth']['getServers']>,
-		null | undefined
-	>[0];
-}> = ({ server }) => {
-	return (
-		<ServerInviteDriver
-			server={{
-				...server,
-				description: null,
-			}}
-		/>
-	);
-};
-
+import { AOHead, Home } from '@answeroverflow/ui';
 // eslint-disable-next-line @typescript-eslint/naming-convention
-const Home: NextPage = () => {
+const HomePage: NextPage = () => {
 	return (
 		<>
-			<Head>
-				<title>Answer Overflow</title>
-				<meta name="description" content="Generated by create-t3-app" />
-				<link rel="icon" href="/favicon.ico" />
-			</Head>
-			<main className="flex h-screen flex-col items-center  text-white">
-				<div className="container flex flex-col items-center justify-center gap-12 px-4 py-8">
-					<AnswerOverflowLogo />
-					<AuthShowcase />
-				</div>
-			</main>
+			<AOHead
+				description=""
+				path="/"
+				title="Answer Overflow"
+				addPrefix={false}
+			/>
+			<Home />
 		</>
 	);
 };
 
-export default Home;
-
-const AuthShowcase: React.FC = () => {
-	const { data: servers } = trpc.auth.getServers.useQuery();
-	return (
-		<div className="flex flex-col items-center justify-center gap-4">
-			<div className="grid max-h-[70vh] grid-cols-4 gap-4 overflow-y-scroll">
-				{servers?.map((server) => {
-					return <ServerCard server={server} key={server.id} />;
-				})}
-			</div>
-		</div>
-	);
-};
+export default HomePage;
diff --git a/apps/nextjs/src/pages/m/[messageId].tsx b/apps/nextjs/src/pages/m/[messageId].tsx
@@ -18,7 +18,7 @@ export default function MessageResult(
 
 	const isUserInServer = useIsUserInServer(serverId);
 	const shouldFetchPrivateMessages = isUserInServer && !areAllMessagesPublic;
-	const { data } = trpc.messagePage.threadFromMessageId.useQuery(messageId, {
+	const { data } = trpc.messages.threadFromMessageId.useQuery(messageId, {
 		// For authenticated users that are in the server, we fetch the messages incase any of them are private
 		enabled: shouldFetchPrivateMessages,
 		// If we're doing SSG, then we don't change the queryHash so we can access the data, otherwise we set it to change with the auth state
@@ -77,8 +77,9 @@ export async function getStaticProps(
 
 	// prefetch `post.byId`
 	try {
-		const { server, messages } =
-			await ssg.messagePage.threadFromMessageId.fetch(context.params.messageId);
+		const { server, messages } = await ssg.messages.threadFromMessageId.fetch(
+			context.params.messageId,
+		);
 		const areAllMessagesPublic = messages.every((message) => message.public);
 		return {
 			props: {

diff --git a/apps/nextjs/src/pages/search.tsx b/apps/nextjs/src/pages/search.tsx
@@ -0,0 +1,48 @@
+import { AOHead, SearchPage, trpc } from '@answeroverflow/ui';
+import { useRouter } from 'next/router';
+import { useEffect, useState } from 'react';
+
+export default function Search() {
+	// get the query from the url in the q param
+	const router = useRouter();
+	const routerQuery = typeof router.query.q === 'string' ? router.query.q : '';
+	const [query, setQuery] = useState<string>(routerQuery);
+	const results = trpc.messages.search.useQuery(
+		{
+			query,
+		},
+		{
+			enabled: query.length > 0,
+			refetchOnMount: false,
+			refetchOnReconnect: false,
+			refetchOnWindowFocus: false,
+		},
+	);
+
+	useEffect(() => {
+		// if the query in the url changes, set the query in the state
+		setQuery(routerQuery);
+	}, [routerQuery]);
+
+	return (
+		<>
+			<AOHead
+				description="Search Discord servers indexed on answer overflow"
+				path="/search"
+				title="Search"
+			/>
+			<SearchPage
+				results={results.data ?? []}
+				isLoading={results.isLoading && query.length > 0}
+				onSearch={async (query: string) => {
+					// set the query in the url
+					await router.push(`/search?q=${query}`, undefined, {
+						shallow: true,
+					});
+					// set the query in the state
+					// setQuery(query);
+				}}
+			/>
+		</>
+	);
+}
diff --git a/packages/api/src/router/channel/channel.test.ts b/packages/api/src/router/channel/channel.test.ts
@@ -27,7 +27,11 @@ import {
 	SOLVED_LABEL_ALREADY_UNSELECTED_ERROR_MESSAGE,
 	zChannelWithServerCreate,
 } from './channel';
-import { mockChannel, mockServer } from '@answeroverflow/db-mock';
+import {
+	mockChannel,
+	mockChannelWithFlags,
+	mockServer,
+} from '@answeroverflow/db-mock';
 import { pickPublicChannelData } from '~api/test/public-data';
 import type { z } from 'zod';
 import { getRandomId } from '@answeroverflow/utils';
@@ -123,7 +127,9 @@ describe('Channel Operations', () => {
 					return {
 						data,
 						privateDataFormat: data,
-						publicDataFormat: pickPublicChannelData(data),
+						publicDataFormat: pickPublicChannelData(
+							mockChannelWithFlags(server, channel),
+						),
 					};
 				},
 			});

diff --git a/packages/api/src/router/index.ts b/packages/api/src/router/index.ts
@@ -23,7 +23,7 @@ export const appRouter = router({
 	channels: channelRouter,
 	discordAccounts: discordAccountRouter,
 	userServerSettings: userServerSettingsRouter,
-	messagePage: messagesRouter,
+	messages: messagesRouter,
 
 	// Other:
 	users: userRouter,