feat: support feature flags

Author: typeofweb

apps/app/.env

@@ -1 +1,3 @@
 NEXT_PUBLIC_APP_URL=https://${VERCEL_URL}
+
+FLAGSMITH_SERVER_SIDE_ENVIRONMENT_KEY=

apps/app/.env.local-example

@@ -1,2 +1,4 @@
 NEXT_PUBLIC_API_URL=http://api.devfaq.localhost:3002
 NEXT_PUBLIC_APP_URL=http://app.devfaq.localhost:3000
+
+FLAGSMITH_SERVER_SIDE_ENVIRONMENT_KEY=

apps/app/package.json

@@ -20,6 +20,8 @@
 		"@tanstack/react-query-devtools": "4.20.4",
 		"client-only": "0.0.1",
 		"easymde": "2.18.0",
+		"flagsmith": "3.15.1",
+		"flagsmith-nodejs": "2.5.0",
 		"next": "13.1.1",
 		"next-mdx-remote": "4.2.0",
 		"openapi-typescript-fetch": "1.1.3",
@@ -29,6 +31,7 @@
 		"react-focus-lock": "2.9.2",
 		"rehype-prism-plus": "1.5.0",
 		"remark": "14.0.2",
+		"server-only": "0.0.1",
 		"strip-markdown": "5.0.0",
 		"tailwind-merge": "1.8.1"
 	},

apps/app/src/app/(main-layout)/questions/p/[questionId]/page.tsx

@@ -5,6 +5,7 @@ import { SingleQuestion } from "../../../../../components/SingleQuestion";
 import { serializeQuestionToMarkdown } from "../../../../../lib/question";
 import { getQuestionAnswers, getQuestionById } from "../../../../../services/questions.service";
 import { Params } from "../../../../../types";
+import { isFlagEnabled } from "../../../../../services/flagsmith.service";
 
 export default async function SingleQuestionPage({ params }: { params: Params<"questionId"> }) {
 	const questionId = Number.parseInt(params.questionId);
@@ -13,14 +14,20 @@ export default async function SingleQuestionPage({ params }: { params: Params<"q
 		return redirect("/");
 	}
 
-	const [questionData, answersData] = await Promise.all([
+	const [questionData, answersData, questionAnswersEnabled] = await Promise.all([
 		getQuestionById({
 			id: questionId,
 		}),
 		getQuestionAnswers({ id: questionId }),
+		isFlagEnabled("question_answers"),
 	]);
 
 	const question = await serializeQuestionToMarkdown(questionData.data.data);
+
+	if (!questionAnswersEnabled) {
+		return <SingleQuestion question={question} />;
+	}
+
 	const answers = await Promise.all(
 		answersData.data.data.map(async ({ content, ...rest }) => {
 			const mdxContent = await serializeSource(content);

apps/app/src/services/flagsmith.service.ts

@@ -0,0 +1,34 @@
+import "server-only";
+
+import Flagsmith from "flagsmith-nodejs";
+import { BaseFlag } from "flagsmith-nodejs/build/sdk/models";
+
+type Flag = "question_answers";
+const defaultFlags: Record<Flag, BaseFlag> = {
+	question_answers: { enabled: true, value: undefined, isDefault: true },
+};
+
+const getFlagsmith = async () => {
+	if (!process.env.FLAGSMITH_SERVER_SIDE_ENVIRONMENT_KEY) {
+		console.warn(`FLAGSMITH_SERVER_SIDE_ENVIRONMENT_KEY not provided.`);
+		return null;
+	}
+
+	const flagsmith = new Flagsmith({
+		environmentKey: process.env.FLAGSMITH_SERVER_SIDE_ENVIRONMENT_KEY,
+	});
+	const flags = await flagsmith.getEnvironmentFlags();
+	return flags;
+};
+
+const getFlag = async <F extends Flag>(flag: F) => {
+	const flagsmith = await getFlagsmith();
+	if (!flagsmith) {
+		return defaultFlags[flag];
+	}
+	return flagsmith.getFlag(flag);
+};
+
+export const isFlagEnabled = async <F extends Flag>(flag: F) => {
+	return (await getFlag(flag)).enabled;
+};