Merge pull request #705 from bounswe/feature/704-posting-guide

Enhance New Question and New Answer Screens
bounswe · Dec 16, 2024 · 4139649 · 4139649
2 parents ecb3764 + b1de516
commit 4139649
Show file tree

Hide file tree

Showing 3 changed files with 110 additions and 26 deletions.
diff --git 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,24 +84,20 @@ 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>
       <HStack style={{ gap: 16 }}>
         <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
@@ -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
@@ -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>
+  );
+};