feat(mobile): add content snippets

bounswe · Dec 16, 2024 · 01bb3f1 · 01bb3f1
1 parent 01ab69e
commit 01bb3f1
Show file tree

Hide file tree

Showing 2 changed files with 56 additions and 11 deletions.
diff --git a/mobile/app/question/[questionId].tsx b/mobile/app/question/[questionId].tsx
@@ -38,6 +38,7 @@ import {
 import { useEffect, useState } from "react";
 import { ScrollView, View } from "react-native";
 import placeholderProfile from "@/assets/images/placeholder_profile.png";
+import { ContentWithSnippets } from "@/components/ContentWithSnippets";
 
 export default function QuestionPage() {
   const { questionId } = useLocalSearchParams();
@@ -329,7 +330,7 @@ export default function QuestionPage() {
         </View>
 
         <View className="rounded-lg bg-neutral-100 p-4">
-          <Text className="whitespace-pre-wrap">{question.content}</Text>
+          <ContentWithSnippets content={question.content} />
         </View>
 
         <Text className="text-2xl font-bold">Answers</Text>

diff --git a/mobile/app/question/[questionId]/answer.tsx b/mobile/app/question/[questionId]/answer.tsx
@@ -15,15 +15,25 @@ import {
   Icon,
   Textarea,
   TextareaInput,
+  Popover,
+  PopoverBackdrop,
+  PopoverContent,
+  PopoverArrow,
+  PopoverHeader,
+  PopoverCloseButton,
+  PopoverBody,
+  PopoverFooter,
 } from "@/components/ui";
-import { X } from "lucide-react-native";
+import { X, InfoIcon } from "lucide-react-native";
+import { ContentWithSnippets } from "@/components/ContentWithSnippets";
 
 export default function NewAnswerPage() {
   const { questionId } = useLocalSearchParams<{ questionId: string }>();
   const { mutateAsync: createAnswer, status, error } = useCreateAnswer();
   const router = useRouter();
 
   const [content, setContent] = useState("");
+  const [preview, setPreview] = useState(false);
   const contentLength = content.length;
   const token = useAuthStore((state) => state.token);
 
@@ -68,15 +78,49 @@ export default function NewAnswerPage() {
         <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>
+      <HStack className="flex items-center justify-between">
+        <Text style={{ fontSize: 20 }}>Write your answer</Text>
+        <Popover
+          trigger={(triggerProps) => {
+            return (
+              <Button {...triggerProps} size="sm" variant="outline">
+                <Icon as={InfoIcon} />
+              </Button>
+            )
+          }}
+          onOpen={() => console.log("Popover opened")}
+        >
+          <PopoverBackdrop />
+          <PopoverContent>
+            <PopoverHeader>
+              <PopoverCloseButton />
+            </PopoverHeader>
+            <PopoverBody>
+              <ContentWithSnippets content="Writing Questions: We use Markdown for formatting questions. You can use standard Markdown syntax for headers, lists, links, etc. For a basic reference, you can check CommonMark." /> 
+            </PopoverBody>
+            <PopoverFooter />
+          </PopoverContent>
+        </Popover>
+      </HStack>
+      <HStack style={{ gap: 16 }}>
+        <Button onPress={() => setPreview(!preview)} variant="outline" size="sm">
+          <ButtonText>{preview ? "Edit" : "Preview"}</ButtonText>
+        </Button>
+      </HStack>
+      {preview ? ( 
+        <ContentWithSnippets content={content} />
+        ) : (
+          <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>