From b1de5164ca3d7791257dff90020f145f774feedc Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Atakan=20Ya=C5=9Far?= <atakany357@gmail.com>
Date: Mon, 16 Dec 2024 20:49:13 +0300
Subject: [PATCH] feat(mobile): add posting guide and preview

---
 mobile/app/question/[questionId]/answer.tsx | 20 ++-----
 mobile/app/question/new.tsx                 | 61 +++++++++++++++++----
 mobile/components/PostingGuide.tsx          | 55 +++++++++++++++++++
 3 files changed, 110 insertions(+), 26 deletions(-)
 create mode 100644 mobile/components/PostingGuide.tsx

diff --git a/mobile/app/question/[questionId]/answer.tsx b/mobile/app/question/[questionId]/answer.tsx
index 7afe6c5..6841809 100644
--- a/mobile/app/question/[questionId]/answer.tsx
+++ b/mobile/app/question/[questionId]/answer.tsx
@@ -18,14 +18,10 @@ import {
   Popover,
   PopoverBackdrop,
   PopoverContent,
-  PopoverArrow,
-  PopoverHeader,
-  PopoverCloseButton,
-  PopoverBody,
-  PopoverFooter,
 } from "@/components/ui";
 import { X, InfoIcon } from "lucide-react-native";
 import { ContentWithSnippets } from "@/components/ContentWithSnippets";
+import { PostingGuide } from "@/components/PostingGuide";
 
 export default function NewAnswerPage() {
   const { questionId } = useLocalSearchParams<{ questionId: string }>();
@@ -88,17 +84,10 @@ export default function NewAnswerPage() {
               </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 className="w-full max-w-sm p-4 rounded-lg bg-white shadow-lg">
+            <PostingGuide />
           </PopoverContent>
         </Popover>
       </HStack>
@@ -106,6 +95,9 @@ export default function NewAnswerPage() {
         <Button onPress={() => setPreview(!preview)} variant="outline" size="sm">
           <ButtonText>{preview ? "Edit" : "Preview"}</ButtonText>
         </Button>
+        <Button onPress={() => setContent(content + "```javascript-exec\n```\n")} variant="outline" size="sm">
+          <ButtonText>Add Code</ButtonText>
+        </Button>
       </HStack>
       {preview ? ( 
         <ContentWithSnippets content={content} />
diff --git a/mobile/app/question/new.tsx b/mobile/app/question/new.tsx
index 72fd442..ea86572 100644
--- a/mobile/app/question/new.tsx
+++ b/mobile/app/question/new.tsx
@@ -1,10 +1,15 @@
+import { ContentWithSnippets } from "@/components/ContentWithSnippets";
 import ErrorAlert from "@/components/ErrorAlert";
 import { FullscreenLoading } from "@/components/FullscreenLoading";
+import { PostingGuide } from "@/components/PostingGuide";
 import {
   Button,
   ButtonText,
   HStack,
   Icon,
+  Popover,
+  PopoverBackdrop,
+  PopoverContent,
   ScrollView,
   Text,
   Textarea,
@@ -23,7 +28,7 @@ import {
 } from "@/services/api/programmingForumSchemas";
 import useAuthStore from "@/services/auth";
 import { useLocalSearchParams, useRouter } from "expo-router";
-import { X } from "lucide-react-native";
+import { InfoIcon, X } from "lucide-react-native";
 import { useState } from "react";
 
 export default function NewQuestionPage() {
@@ -33,6 +38,7 @@ export default function NewQuestionPage() {
 
   const [title, setTitle] = useState("");
   const [content, setContent] = useState("");
+  const [preview, setPreview] = useState(false);
   const contentLength = content.length;
   const [searchQuery, setSearchQuery] = useState("");
   const [selectedTags, setSelectedTags] = useState<TagSummary[]>([]);
@@ -145,18 +151,49 @@ export default function NewQuestionPage() {
 
         {/* Content Input */}
         <VStack style={{ gap: 8, flex: 1 }}>
-          <Text style={{ fontSize: 16 }}>Content</Text>
-          <Textarea>
-            <TextareaInput
-              placeholder="Describe your question"
-              value={content}
-              onChangeText={setContent}
-              size="md"
-              style={{
-                textAlignVertical: "top",
+          <HStack className="flex items-center justify-between">
+            <Text style={{ fontSize: 16 }}>Content</Text>
+            <Popover
+              trigger={(triggerProps) => {
+                return (
+                  <Button {...triggerProps} size="sm" variant="outline">
+                    <Icon as={InfoIcon} />
+                  </Button>
+                )
               }}
-            />
-          </Textarea>
+              onOpen={() => console.log("Popover opened")}
+            >
+              <PopoverBackdrop />
+              <PopoverContent className="w-full max-w-sm p-4 rounded-lg bg-white shadow-lg">
+                <PostingGuide />
+              </PopoverContent>
+            </Popover>
+          </HStack>
+          <HStack className="flex items-center gap-4">
+            <Button onPress={() => setPreview(!preview)} variant="outline" size="sm">
+              <ButtonText>{preview ? "Edit" : "Preview"}</ButtonText>
+            </Button>
+            <Button onPress={() => setContent(content + "```javascript-exec\n```\n")} variant="outline" size="sm">
+              <ButtonText>Add Code</ButtonText>
+            </Button>
+          </HStack>
+
+          { preview ? (
+            <ContentWithSnippets content={content} />
+          ) : (
+            <Textarea>
+              <TextareaInput
+                placeholder="Describe your question"
+                value={content}
+                onChangeText={setContent}
+                size="md"
+                style={{
+                  textAlignVertical: "top",
+                }}
+              />
+            </Textarea>
+          )}
+          
           <Text style={{ fontSize: 12, color: "#888" }}>
             {contentLength} characters
           </Text>
diff --git a/mobile/components/PostingGuide.tsx b/mobile/components/PostingGuide.tsx
new file mode 100644
index 0000000..3017808
--- /dev/null
+++ b/mobile/components/PostingGuide.tsx
@@ -0,0 +1,55 @@
+import {
+  Text,
+  View,
+  ScrollView,
+} from "@/components/ui";
+import { openURL } from "expo-linking";
+
+export const PostingGuide = () => {
+  return (
+    <View className="w-11/12 max-h-96 bg-white rounded-lg p-4 shadow-md">
+      <ScrollView contentContainerStyle={{ paddingBottom: 16 }}>
+        {/* Writing Answers Section */}
+        <Text className="text-lg font-bold mb-2">Writing Answers</Text>
+        <Text className="text-sm text-gray-600 mb-4">
+          We use Markdown for formatting answers. You can use standard Markdown
+          syntax for headers, lists, links, etc. For a basic reference, you can
+          check{" "}
+          <Text
+            className="text-blue-500 underline"
+            onPress={() => openURL("https://commonmark.org/help/")}
+          >
+            CommonMark
+          </Text>
+          .
+        </Text>
+
+        {/* Code Execution Section */}
+        <Text className="text-lg font-bold mb-2">Code Execution</Text>
+        <Text className="text-sm text-gray-600 mb-2">
+          To create executable code blocks, use triple backticks with
+          language-exec:
+        </Text>
+        <ScrollView horizontal className="bg-gray-100 rounded-md p-3 mb-4">
+          <Text className="font-mono text-sm text-gray-800">
+            {`\`\`\`javascript-exec\nconsole.log("Hello, world!, This is executable!");\`\`\``}
+          </Text>
+        </ScrollView>
+
+        {/* Linking Section */}
+        <Text className="text-lg font-bold mb-2">Linking</Text>
+        <Text className="text-sm text-gray-600">
+          Link to tags using:{" "}
+          <Text className="bg-gray-100 rounded px-1 font-mono">
+            [tag name](#tag-123)
+          </Text>
+          {"\n"}
+          Link to questions using:{" "}
+          <Text className="bg-gray-100 rounded px-1 font-mono">
+            [question title](#q-456)
+          </Text>
+        </Text>
+      </ScrollView>
+    </View>
+  );
+};