[done] feat/user-app

englishSphere/src/components/Button.tsx

@@ -143,7 +143,7 @@ const $baseViewStyle: ViewStyle = {
 
 const $baseTextStyle: TextStyle = {
   fontSize: 16,
-  lineHeight: 20,
+  lineHeight: 25,
   fontFamily: typography.primary.medium,
   textAlign: "center",
   flexShrink: 1,

englishSphere/src/components/Camera/useCamera.ts

@@ -4,6 +4,7 @@ import Toast from "react-native-toast-message"
 import { blobToBase64, uriToBlob } from "src/utils/uriToBlob"
 import Config from "src/config"
 import { InitUser } from "src/models/UserStore"
+import { UserApi } from "src/services/api/user"
 
 interface IUseCamera {
   cameraType: "front" | "back"
@@ -45,7 +46,7 @@ export function useCamera({ setIsClosed, cameraType, setUser }: IUseCamera) {
         const photo = await camera.current.takeSnapshot({
           skipMetadata: true,
           flash: "off",
-          quality: 80,
+          quality: 90,
         })
 
         setImageSource(photo.path)
@@ -62,24 +63,34 @@ export function useCamera({ setIsClosed, cameraType, setUser }: IUseCamera) {
           body: data,
         })
         const json = await upload.json()
-
-        // update local state
-        setUser(
+        const imageExactUrl =
           cameraType === "back"
             ? { coverUrl: json.data?.display_url }
-            : { imageUrl: json.data?.display_url },
-        )
-
-        // Todo: update backend
+            : { imageUrl: json.data?.display_url }
 
-        Toast.show({
-          type: "success",
-          text1: "Your image uploaded successfully!",
-          onHide: () => {
-            // stop camera screen
-            setIsClosed(true)
-          },
-        })
+        UserApi.updateUserInfo(imageExactUrl)
+          .then(() =>
+            Toast.show({
+              type: "success",
+              text1: "Your image uploaded successfully!",
+              onHide: () => {
+                // update local state
+                setUser(imageExactUrl)
+                // stop camera screen
+                setIsClosed(true)
+              },
+            }),
+          )
+          .catch(() =>
+            Toast.show({
+              type: "error",
+              text1: "Your image uploaded failed!",
+              onHide: () => {
+                // stop camera screen
+                setIsClosed(true)
+              },
+            }),
+          )
       } catch {
         Toast.show({
           type: "error",

englishSphere/src/components/Icon.tsx

@@ -108,6 +108,10 @@ export const iconRegistry = {
   ban: require("../../assets/icons/ban.png"),
   eng: require("../../assets/icons/eng.png"),
   google: require("../../assets/icons/google.png"),
+  guard: require("../../assets/icons/guard.png"),
+  diamond: require("../../assets/icons/diamond.png"),
+  gold: require("../../assets/icons/gold.png"),
+  silver: require("../../assets/icons/silver.png"),
 }
 
 const $imageStyle: ImageStyle = {

englishSphere/src/components/MaterialCard.tsx

@@ -14,18 +14,20 @@ import { FastImage, FastImageStyle } from "./FastImage"
 
 export interface MaterialCardProps extends TouchableOpacityProps {
   style?: StyleProp<FastImageStyle>
+  title: string
+  thumbnail: string
 }
 
 export const MaterialCard = observer(function MaterialCard(props: MaterialCardProps) {
-  const { style, ...others } = props
+  const { style, title, thumbnail, ...others } = props
   const $styles = [$container, style]
 
   return (
     <TouchableOpacity activeOpacity={0.8} style={$touchableContainer} {...others}>
-      <FastImage style={$styles} uri="https://i.pravatar.cc/300" priority="high">
+      <FastImage style={$styles} uri={thumbnail} priority="high">
         <View style={$textContainer}>
           <Text numberOfLines={1} preset="subheading" style={$text}>
-            English for Web developers
+            {title}
           </Text>
         </View>
       </FastImage>

englishSphere/src/components/Modal.tsx

@@ -3,6 +3,7 @@ import { StyleProp, ViewStyle, Modal as RNModal, View, ViewProps, ScrollView } f
 import { observer } from "mobx-react-lite"
 import { Icon } from "./Icon"
 import { colors, spacing } from "src/theme"
+import Toast from "react-native-toast-message"
 
 export type ModalProps = ViewProps & {
   style?: StyleProp<ViewStyle>
@@ -34,6 +35,7 @@ export const Modal = observer(function Modal(props: ModalProps) {
         </View>
         <ScrollView showsVerticalScrollIndicator={false}>{children}</ScrollView>
       </View>
+      <Toast />
     </RNModal>
   )
 })

englishSphere/src/components/TextField.tsx

@@ -1,5 +1,14 @@
-import React, { ComponentType, forwardRef, Ref, useImperativeHandle, useRef } from "react"
+import React, {
+  ComponentType,
+  forwardRef,
+  Ref,
+  useImperativeHandle,
+  useRef,
+  useState,
+  Fragment,
+} from "react"
 import {
+  ScrollView,
   StyleProp,
   TextInput,
   TextInputProps,
@@ -95,6 +104,9 @@ export interface TextFieldProps extends Omit<TextInputProps, "ref"> {
    * Note: It is a good idea to memoize this.
    */
   LeftAccessory?: ComponentType<TextFieldAccessoryProps>
+  preset?: "select" | "input"
+  selectOptions?: { value: string }[]
+  onSelect?: (v: string) => void
 }
 
 /**
@@ -121,11 +133,22 @@ export const TextField = forwardRef(function TextField(props: TextFieldProps, re
     style: $inputStyleOverride,
     containerStyle: $containerStyleOverride,
     inputWrapperStyle: $inputWrapperStyleOverride,
+    preset = "input",
+    selectOptions,
+    onSelect,
     ...TextInputProps
   } = props
+
+  const [isSelectOpen, setIsSelectOpen] = useState(false)
+
+  const onSelectPress = (v: string) => {
+    setIsSelectOpen((prev) => !prev)
+    onSelect && onSelect(v)
+  }
+
   const input = useRef<TextInput>()
 
-  const disabled = TextInputProps.editable === false || status === "disabled"
+  const disabled = TextInputProps.editable === false || status === "disabled" || preset === "select"
 
   const placeholderContent = placeholderTx
     ? translate(placeholderTx, placeholderTxOptions)
@@ -167,66 +190,83 @@ export const TextField = forwardRef(function TextField(props: TextFieldProps, re
   useImperativeHandle(ref, () => input.current as TextInput)
 
   return (
-    <TouchableOpacity
-      activeOpacity={1}
-      style={$containerStyles}
-      onPress={focusInput}
-      accessibilityState={{ disabled }}
-    >
-      {!!(label || labelTx) && (
-        <Text
-          preset="formLabel"
-          text={label}
-          tx={labelTx}
-          txOptions={labelTxOptions}
-          {...LabelTextProps}
-          style={$labelStyles}
-        />
-      )}
-
-      <View style={$inputWrapperStyles}>
-        {!!LeftAccessory && (
-          <LeftAccessory
-            style={$leftAccessoryStyle}
-            status={status}
-            editable={!disabled}
-            multiline={!!TextInputProps.multiline}
+    <>
+      <TouchableOpacity
+        activeOpacity={1}
+        style={$containerStyles}
+        onPress={preset === "select" ? () => setIsSelectOpen((prev) => !prev) : focusInput}
+        accessibilityState={preset === "select" ? undefined : { disabled }}
+      >
+        {!!(label || labelTx) && (
+          <Text
+            preset="formLabel"
+            text={label}
+            tx={labelTx}
+            txOptions={labelTxOptions}
+            {...LabelTextProps}
+            style={$labelStyles}
           />
         )}
 
-        <TextInput
-          ref={input as any}
-          underlineColorAndroid={colors.transparent}
-          textAlignVertical="top"
-          placeholder={placeholderContent}
-          placeholderTextColor={colors.palette.neutral400}
-          {...TextInputProps}
-          editable={!disabled}
-          style={$inputStyles as any}
-          selectionColor={colors.palette.gray} // cursor color
-        />
+        <View style={$inputWrapperStyles}>
+          {!!LeftAccessory && (
+            <LeftAccessory
+              style={$leftAccessoryStyle}
+              status={status}
+              editable={!disabled}
+              multiline={!!TextInputProps.multiline}
+            />
+          )}
 
-        {!!RightAccessory && (
-          <RightAccessory
-            style={$rightAccessoryStyle}
-            status={status}
+          <TextInput
+            ref={input as any}
+            underlineColorAndroid={colors.transparent}
+            textAlignVertical="top"
+            placeholder={placeholderContent}
+            placeholderTextColor={colors.palette.neutral400}
+            {...TextInputProps}
             editable={!disabled}
-            multiline={!!TextInputProps.multiline}
+            style={$inputStyles as any}
+            selectionColor={colors.palette.gray} // cursor color
           />
-        )}
-      </View>
 
-      {!!(helper || helperTx) && (
-        <Text
-          preset="formHelper"
-          text={helper}
-          tx={helperTx}
-          txOptions={helperTxOptions}
-          {...HelperTextProps}
-          style={$helperStyles}
-        />
+          {!!RightAccessory && (
+            <RightAccessory
+              style={$rightAccessoryStyle}
+              status={status}
+              editable={!disabled}
+              multiline={!!TextInputProps.multiline}
+            />
+          )}
+        </View>
+
+        {!!(helper || helperTx) && (
+          <Text
+            preset="formHelper"
+            text={helper}
+            tx={helperTx}
+            txOptions={helperTxOptions}
+            {...HelperTextProps}
+            style={$helperStyles}
+          />
+        )}
+      </TouchableOpacity>
+      {preset === "select" && isSelectOpen && (
+        <ScrollView style={$optionsContainer}>
+          {selectOptions?.map((item, index) => (
+            <Fragment key={item.value}>
+              <Text
+                onPress={() => onSelectPress(item.value)}
+                preset="subheading"
+                text={item.value}
+                style={{ paddingHorizontal: spacing.md, paddingVertical: spacing.xxs }}
+              />
+              {index !== selectOptions.length - 1 && <View style={$optionsDivider} />}
+            </Fragment>
+          ))}
+        </ScrollView>
       )}
-    </TouchableOpacity>
+    </>
   )
 })
 
@@ -274,3 +314,15 @@ const $leftAccessoryStyle: ViewStyle = {
   justifyContent: "center",
   alignItems: "center",
 }
+
+const $optionsContainer: ViewStyle = {
+  backgroundColor: colors.palette.white,
+  position: "absolute",
+  bottom: -10,
+  left: 10,
+  zIndex: 9999,
+  borderRadius: 5,
+  elevation: 3,
+}
+
+const $optionsDivider: ViewStyle = { height: 2, backgroundColor: colors.background }

englishSphere/src/config/config.dev.ts

@@ -7,7 +7,7 @@
  */
 export default {
   // API_URL: "http://192.168.0.108:5000/api/v1",
-  API_URL: "http://192.168.0.108:5000/api/v1",
+  API_URL: "http://192.168.0.103:5000/api/v1",
   IMG_API_URL: "https://api.imgbb.com/1/upload?key=4ee92500539aec53d74737b7e5955151",
   GOOGLE_CLIENT_ID: "780892283384-rk6kf97p0q3uvr02refo3cefrjgv431j.apps.googleusercontent.com",
   API_KEY: "changeitlaterwithsuperpowerfullkey",

englishSphere/src/models/MaterialStore.ts

@@ -1,20 +1,20 @@
 import { Instance, SnapshotOut, types } from "mobx-state-tree"
 
 const Material = types.model("Material", {
-  fullName: types.string,
-  imageUrl: types.string,
+  title: types.string,
+  thumbnail: types.string,
 })
 
 export interface InitMaterial extends Instance<typeof Material> {}
 
 export const MaterialStoreModel = types
   .model("MaterialStore")
   .props({
-    material: types.array(Material),
+    materialSections: types.array(Material),
   })
   .actions((store) => ({
-    setAuthTokenWithMaterial(materials: InitMaterial[]) {
-      store.material = materials as any
+    setMaterialSections(materials: InitMaterial[]) {
+      store.materialSections = materials as any
     },
   }))
 

englishSphere/src/models/UserStore.ts

@@ -28,8 +28,8 @@ export const UserStoreModel = types
     user: types.maybe(User),
     lang: loadString("lang") || "en",
     badges: types.array(types.string),
-    upVotes: types.maybe(types.number),
-    downVotes: types.maybe(types.number),
+    upVotes: 0,
+    downVotes: 0,
   })
   .views((store) => ({
     get isAuthenticated() {
@@ -46,7 +46,9 @@ export const UserStoreModel = types
     },
     setUserInterest(value: string) {
       if (store.user) {
-        store.user.interests.push(value)
+        if (!store.user.interests.find((i) => i !== value)) {
+          store.user.interests.push(value)
+        }
       }
     },
     setUserFcmToken(value: FcmToken) {

englishSphere/src/screens/AccountScreen/components/Cover/index.tsx

@@ -113,9 +113,6 @@ const Cover = observer(function Cover() {
 export default Cover
 
 const $coverContainer: ImageStyle = {
-  flexBasis: "17.6%",
-  flexGrow: 0,
-  flexShrink: 0,
   height: 150,
   flexDirection: "row",
   justifyContent: "space-between",