Feat/show-logs-on-profile-page (#123)

* feat: show logs from the profile screen * chore: logging the post msg process * fix: display position to scroll --------- Signed-off-by: Iuri Pereira <[email protected]>
gnoverse · Jul 26, 2024 · 6b5a564 · 6b5a564
1 parent 2f7516d
commit 6b5a564
Show file tree

Hide file tree

Showing 6 changed files with 50 additions and 128 deletions.
diff --git a/mobile/app/home/profile.tsx b/mobile/app/home/profile.tsx
@@ -11,10 +11,12 @@ import Text from "@gno/components/text";
 import { useSearch } from "@gno/hooks/use-search";
 import { useNotificationContext } from "@gno/provider/notification-provider";
 import { onboarding } from "redux/features/signupSlice";
+import { ProgressViewModal } from "@gno/components/view/progress";
 
 export default function Page() {
   const [activeAccount, setActiveAccount] = useState<KeyInfo | undefined>(undefined);
   const [loading, setLoading] = useState(false);
+  const [modalVisible, setModalVisible] = useState(false);
   const [chainID, setChainID] = useState("");
   const [remote, setRemote] = useState("");
   const [followersCount, setFollowersCount] = useState({ n_followers: 0, n_following: 0 });
@@ -114,6 +116,8 @@ export default function Page() {
             <View></View>
           </>
           <Layout.Footer>
+            <ProgressViewModal visible={modalVisible} onRequestClose={() => setModalVisible(false)} />
+            <Button.TouchableOpacity title="Logs" onPress={() => setModalVisible(true)} variant="primary" />
             <Button.TouchableOpacity title="Onboard the current user" onPress={onboard} variant="primary" />
             <Button.TouchableOpacity
               title="Register to the notification service"

diff --git a/mobile/app/post/index.tsx b/mobile/app/post/index.tsx
@@ -6,7 +6,9 @@ import TextInput from "@gno/components/textinput";
 import { useGnoNativeContext } from "@gnolang/gnonative";
 import { Stack, useNavigation, useRouter } from "expo-router";
 import { useEffect, useState } from "react";
-import { KeyboardAvoidingView, Platform, StyleSheet } from "react-native";
+import { KeyboardAvoidingView, Platform } from "react-native";
+import { addProgress } from "redux/features/signupSlice";
+import {  useAppDispatch } from "@gno/redux";
 
 export default function Search() {
   const [postContent, setPostContent] = useState("");
@@ -16,6 +18,7 @@ export default function Search() {
   const { gnonative } = useGnoNativeContext();
   const navigation = useNavigation();
   const router = useRouter();
+  const dispatch = useAppDispatch();
 
   useEffect(() => {
     const unsubscribe = navigation.addListener("focus", async () => {
@@ -33,6 +36,7 @@ export default function Search() {
   const onPost = async () => {
     setLoading(true);
     setError(undefined);
+    dispatch(addProgress(`posting a message.`))
     try {
       const gasFee = "1000000ugnot";
       const gasWanted = 10000000;
@@ -46,8 +50,10 @@ export default function Search() {
       // TODO: replace with a better way to wait for the transaction to be mined
       await new Promise((resolve) => setTimeout(resolve, 3000));
 
+      dispatch(addProgress(`done, redirecting to home page.`))
       router.push("home");
     } catch (error) {
+      dispatch(addProgress(`error on posting a message: ` + JSON.stringify(error)))
       console.error("on post screen", error);
       setError("" + error);
     } finally {

diff --git a/mobile/app/sign-up.tsx b/mobile/app/sign-up.tsx
@@ -1,4 +1,12 @@
-import { StyleSheet, Text, View, Button as RNButton, ScrollView, TextInput as RNTextInput, Alert as RNAlert } from "react-native";
+import {
+  StyleSheet,
+  View,
+  Button as RNButton,
+  ScrollView,
+  TextInput as RNTextInput,
+  Alert as RNAlert,
+  TouchableOpacity,
+} from "react-native";
 import React, { useEffect, useRef, useState } from "react";
 import { router, useNavigation } from "expo-router";
 import TextInput from "components/textinput";
@@ -19,12 +27,15 @@ import {
   signUpStateSelector,
 } from "redux/features/signupSlice";
 import { ProgressViewModal } from "@gno/components/view/progress";
+import Text from "@gno/components/text";
+import { MaterialIcons } from "@expo/vector-icons";
 
 export default function Page() {
   const [name, setName] = useState("");
   const [password, setPassword] = useState("");
   const [phrase, setPhrase] = useState<string>("");
   const [error, setError] = useState<string | undefined>(undefined);
+  const [modalVisible, setModalVisible] = useState(false);
   const [confirmPassword, setConfirmPassword] = useState("");
   const [loading, setLoading] = useState(false);
   const inputRef = useRef<RNTextInput>(null);
@@ -42,7 +53,7 @@ export default function Page() {
       setPassword("");
       setConfirmPassword("");
       setError(undefined);
-      dispatch(clearSignUpState())
+      dispatch(clearSignUpState());
       inputRef.current?.focus();
       try {
         setPhrase(await gnonative.generateRecoveryPhrase());
@@ -139,7 +150,7 @@ export default function Page() {
       <Layout.Body>
         <ScrollView>
           <View style={styles.main}>
-            <Text style={styles.title}>Create your account</Text>
+            <Text.Title style={styles.title}>Create your account</Text.Title>
             <View style={{ minWidth: 200, paddingTop: 8 }}>
               <Spacer />
               <TextInput
@@ -160,9 +171,9 @@ export default function Page() {
               />
             </View>
             <View style={{ minWidth: 200, paddingTop: 8 }}>
-              <Text>Your seed phrase:</Text>
+              <Text.Caption1>Your seed phrase:</Text.Caption1>
               <Spacer />
-              <Text>{phrase}</Text>
+              <Text.Caption1>{phrase}</Text.Caption1>
               <RNButton title="copy" onPress={copyToClipboard} />
               <Spacer />
               <Alert severity="error" message={error} />
@@ -172,8 +183,15 @@ export default function Page() {
               <Button.TouchableOpacity title="Back" onPress={() => router.back()} variant="secondary" disabled={loading} />
             </View>
           </View>
+          <Spacer space={16} />
+          <View style={styles.footer}>
+            <TouchableOpacity onPress={() => setModalVisible(true)} style={{ flexDirection: "row", alignItems: "center" }}>
+              <Text.Caption1 style={{ paddingRight: 4 }}>Show Progress</Text.Caption1>
+              <MaterialIcons name="history" size={18} />
+            </TouchableOpacity>
+          </View>
         </ScrollView>
-        <ProgressViewModal />
+        <ProgressViewModal visible={modalVisible} onRequestClose={() => setModalVisible(false)} />
       </Layout.Body>
     </Layout.Container>
   );
@@ -199,4 +217,9 @@ const styles = StyleSheet.create({
     fontSize: 36,
     color: "#38434D",
   },
+  footer: {
+    flex: 1,
+    justifyContent: "center",
+    alignItems: "center",
+  },
 });
diff --git a/mobile/components/view/progress/index.ts b/mobile/components/view/progress/index.ts
@@ -1,4 +1,3 @@
 import ProgressViewModal from "./modal";
-import ProgressView from "./view";
 
-export { ProgressViewModal, ProgressView }
+export { ProgressViewModal }
diff --git a/mobile/components/view/progress/modal.tsx b/mobile/components/view/progress/modal.tsx
@@ -1,16 +1,18 @@
-import React, { useState } from "react";
+import React from "react";
 import { View, Modal, StyleSheet, FlatList, TouchableOpacity, Share } from "react-native";
 import { useAppDispatch, useAppSelector } from "@gno/redux";
 import { colors } from "@gno/styles/colors";
 import Layout from "@gno/components/layout";
 import { clearProgress, selectProgress } from "redux/features/signupSlice";
 import Text from "@gno/components/text";
 import { EvilIcons } from "@expo/vector-icons";
-import { MaterialIcons } from "@expo/vector-icons";
 
-const ProgressViewModal = () => {
-  const [modalVisible, setModalVisible] = useState(false);
+interface Props {
+  visible: boolean;
+  onRequestClose: () => void;
+}
 
+const ProgressViewModal: React.FC<Props> = ({ visible, onRequestClose }) => {
   const dispatch = useAppDispatch();
   const progress = useAppSelector(selectProgress);
 
@@ -26,23 +28,16 @@ const ProgressViewModal = () => {
 
   return (
     <View style={styles.container}>
-      <TouchableOpacity onPress={() => setModalVisible(true)} style={{ flexDirection: "row", alignItems: "center" }}>
-        <Text.Caption1 style={{ paddingRight: 4 }}>Show Progress</Text.Caption1>
-        <MaterialIcons name="history" size={18} />
-      </TouchableOpacity>
-
       <Modal
         animationType="slide"
         transparent={true}
-        visible={modalVisible}
-        onRequestClose={() => {
-          setModalVisible(!modalVisible);
-        }}
+        visible={visible}
+        onRequestClose={onRequestClose}
       >
         <View style={styles.modalOverlay}>
           <View style={styles.transparentTop}></View>
           <View style={styles.modalContent}>
-            <Layout.Header title="Progress" onCloseHandler={() => setModalVisible(false)} style={{ marginTop: 22 }} />
+            <Layout.Header title="Progress" onCloseHandler={onRequestClose} style={{ marginTop: 22 }} />
             <FlatList
               data={progress}
               style={styles.flatList}

diff --git a/mobile/components/view/progress/view.tsx b/mobile/components/view/progress/view.tsx