Merge pull request #569 from bounswe/feature/506-create-answer-page

mobile/app/question/[questionId].tsx

@@ -22,12 +22,13 @@ import {
   useUpvoteQuestion,
 } from "@/services/api/programmingForumComponents";
 import useAuthStore from "@/services/auth";
-import { Link, useLocalSearchParams } from "expo-router";
+import { Link, useLocalSearchParams, useRouter } from "expo-router";
 import { Flag, MessageSquare, ThumbsUp, Trash } from "lucide-react-native";
 import { useState } from "react";
 import { ScrollView, View } from "react-native";
 export default function QuestionPage() {
   const { questionId } = useLocalSearchParams();
+  const router = useRouter();
 
   const toast = useToast();
   const {
@@ -230,6 +231,15 @@ export default function QuestionPage() {
       </View>
 
       <Text className="text-2xl font-bold">Answers</Text>
+
+      <Button
+        onPress={() => {
+          router.push(`/question/${question.id}/answer`);
+        }}
+      >
+        <ButtonText>Write a new answer</ButtonText>
+      </Button>
+
       {questionId && <Answers questionId={Number(questionId)} />}
     </ScrollView>
   );

mobile/app/question/[questionId]/answer.tsx

@@ -0,0 +1,87 @@
+import { Input, InputField } from "@/components/ui/input";
+import { FullscreenLoading } from "@/components/FullscreenLoading";
+import ErrorAlert from "@/components/ErrorAlert";
+import { useCreateAnswer, useCreateQuestion, useSearchTags } from "@/services/api/programmingForumComponents";
+import { useLocalSearchParams, useRouter } from "expo-router";
+import useAuthStore from "@/services/auth";
+import { useState } from "react";
+import {
+  Button,
+  ButtonText,
+  HStack,
+  Text,
+  View,
+  VStack,
+  Icon,
+  Textarea,
+  TextareaInput,
+} from "@/components/ui";
+import { X } from "lucide-react-native";
+
+export default function NewAnswerPage() {
+  const { questionId } = useLocalSearchParams<{ questionId: string }>();
+  const { mutateAsync: createAnswer, status, error } = useCreateAnswer();
+  const router = useRouter();
+
+  const [content, setContent] = useState("");
+  const contentLength = content.length;
+  const token = useAuthStore((state) => state.token);
+
+  if (!token) {
+    return (
+      <ErrorAlert
+        error={{
+          status: 403,
+          payload: { message: "You must be logged in to create an answer." },
+        }}
+      />
+    );
+  }
+
+  const handleSubmit = async () => {
+    const response = await createAnswer({
+      body: {
+        content,
+      },
+      pathParams: {
+        questionId: Number(questionId),
+      },
+    });
+
+    if (response.status === 201) {
+      console.log("Answer created successfully");
+      router.push(`/question/${questionId}`);
+    } else {
+      console.error("Failed to create answer");
+      console.error(response);
+    }
+
+  };
+
+  if (status === "pending") {
+    return <FullscreenLoading overlay />;
+  }
+
+  return (
+    <VStack style={{ gap: 16, flex: 1, padding: 32, marginVertical: 24 }}>
+      <Button onPress={() => router.back()} style={{ alignSelf: "flex-start" }} variant={"outline"} size="sm">
+        <Icon as={X} />
+      </Button>
+      <View style={{ gap: 16 }} />
+      <Text style={{ fontSize: 20 }}>Write your answer</Text>
+      <Textarea>
+        <TextareaInput
+          value={content}
+          onChangeText={setContent}
+          placeholder="Write your answer here..."
+          maxLength={1000}
+        />
+      </Textarea>
+      <Text>{contentLength} / 1000</Text>
+      <Button onPress={handleSubmit} disabled={contentLength === 0} style={{ alignSelf: "flex-end" }}>
+        <ButtonText>Submit</ButtonText>
+      </Button>
+    </VStack>
+  );
+
+}

mobile/components/ContentWithSnippets.tsx

@@ -2,6 +2,7 @@ import React from "react";
 import { View } from "react-native";
 import { CodeSnippet } from "./CodeSnippet";
 import { Text } from "./ui";
+
 interface ContentWithSnippetsProps {
   content: string;
 }
@@ -51,12 +52,14 @@ export const ContentWithSnippets: React.FC<ContentWithSnippetsProps> = ({
           <CodeSnippet key={index} code={part.code} language={part.language} />
         );
       }
-      return (
-        <Text className="font-mono" key={index}>
-          {part.code}
-        </Text>
-      );
-      return <Text key={index}>{part.content}</Text>;
+      if (part.type === "text") {
+        return (
+          <Text key={index} className="font-mono">
+            {part.content}
+          </Text>
+        );
+      }
+      return null;
     });
   }, [content]);