Refresh Look on posts

components/Post.js

@@ -11,6 +11,7 @@ import Moment from 'moment';
 import { useSnapshot } from 'valtio';
 import GlobalState from '../contexts/GlobalState.js';
 import i18n from "../i18nMessages.js";
+import ProfilePhotoCircle from './ProfilePhotoCircle.js';
 
 
 let Post = (props) => {
@@ -21,7 +22,7 @@ let Post = (props) => {
     let [likes, changeLikes] = useState(Object.keys(post.reactions).length);
     let [bookmarked, changeBookmarked] = useState(post.bookmarks && post.bookmarks.includes(viewer._id));
     let toProfileText = post.toProfile && post.toProfile !== post.profileid ?
-        <Text> {">"} <UserName profileid={post.toProfile} /></Text> : undefined;
+        <ProfilePhotoCircle profileid={post.toProfile} small={true} /> : undefined;
     let cleanContent = post.content.replace(/@[A-z]+:.+\w/g, '');
     //cleanContent = convertLinks(cleanContent);
     const newComentAdded = (commentData) => {
@@ -63,15 +64,17 @@ let Post = (props) => {
                 <Hyperlink linkDefault={true} linkStyle={{ color: '#2980b9' }}>
                     {!post.nonOrganicType ?
                         <View>
-                            <Text style={styles.userName}>
+                            <ProfilePhotoCircle profileid={post.profileid} />
-                                <UserName profileid={post.profileid}/>
+                            <View style={{ flexDirection: 'row', alignItems: 'center', margin:0,  marginLeft: 35, top: -5 }}>
                                 {toProfileText}
                                 <Text style={{ fontWeight: 'normal', fontSize: 12 }}>
                                     {" " + Moment(post.createdAt).fromNow()}
                                 </Text>
-                            </Text>
+                            </View>
-                            <Text style={{ fontSize: 16, paddingBottom:5 }}>{cleanContent}</Text>
+                            <Text style={{ fontSize: 15, padding: 0 }}>{cleanContent}</Text>
+                            <View style={{paddingTop: 5}}>
                             <Media  content={post.content} postId={post._id} post={post} />
+                            </View>
                         </View> :
                         <View>
                             <Chip icon="new-releases" style={{ width: 100 }} >{i18n.t("message.news")}</Chip>
@@ -81,17 +84,25 @@ let Post = (props) => {
                     }
                 </Hyperlink>
             </Card.Content>
-            <Card.Actions style={{ flexDirection: "row", flow: 4, justifyContent: 'space-evenly', fontSize: 18 }}>
+            <Card.Actions style={{ flexDirection: "row", flow: 4, fontSize: 16 }}>
                 <Button
                     icon={post.reactions[viewer._id] ? "favorite" : "favorite-border"}
-                    labelStyle={{ fontSize: 18 }}
+                    labelStyle={{ fontSize: 16 }}
                     style={{ flow: 1 }}
                     onPress={newPostReaction}
+                    color="#555"
                 >
                     {likes}
                 </Button>
-                <Button icon="forum" labelStyle={{ fontSize: 18 }} style={{ flow: 1 }} onPress={() => { changeshowCommentsB(!showCommentsB) }} >{post.comments.length}</Button>
+                <Button icon="forum" labelStyle={{ fontSize: 16 }} style={{ flow: 1 }}
-                <Button icon="ios-share" style={{ flow: 1 }} labelStyle={{ fontSize: 18 }} onPress={()=>{
+                    onPress={() => { changeshowCommentsB(!showCommentsB) }}
+                    color="#555"
+                >
+                    {post.comments.length}
+                </Button>
+                <Button icon="ios-share" style={{ flow: 1 }} labelStyle={{ fontSize: 16 }}
+                    color="#555"
+                    onPress={() => {
                         Share.share({
                             //message: "https://social.emmint.com/post/" + props.post._id,
                             url: "https://social.emmint.com/feed/post/" + props.post._id
@@ -100,8 +111,9 @@ let Post = (props) => {
                 <Button
                     icon={!bookmarked ? "bookmark-outline" : "bookmark"}
                     style={{ flow: 1 }}
-                    labelStyle={{ fontSize: 18 }}
+                    labelStyle={{ fontSize: 16 }}
                     onPress={newPostBookmark}
+                    color="#555"
                 >
                 </Button>
             </Card.Actions>
@@ -129,9 +141,10 @@ const styles = StyleSheet.create({
         fontSize: 17,
     },
     card: {
-        margin: 8,
+        margin: 0,
-        backgroundColor: "#FFFFFF",
+        backgroundColor: "#FFFAFA",
-        borderRadius: 5,
+        borderRadius: 0,
+        marginBottom: 2
     },
     comment: {
         margin: 8,

components/ProfilePhotoCircle.js

@@ -0,0 +1,60 @@
+import React, { useState, useEffect } from 'react';
+import { Avatar } from 'react-native-paper';
+import { View, StyleSheet, Text } from 'react-native';
+import API from './../API.js';
+
+const DefaultPhoto = "https://social.emmint.com/uploads/e6f9be6d665dc43417701bf16a90122c.png";
+
+const ProfileHeader = ({ profileid, withName = false, small = false }) => {
+    let [profile, setProfile] = useState({});
+
+    useEffect(() => {
+        let subscribed = true;
+        let getData = async () => {
+            let p = await API.getUserProfile(profileid).catch(() => { return {} });
+            if (subscribed)
+                setProfile(p);
+        }
+        getData();
+        return () => {
+            subscribed = false;
+        };
+    }, [profileid]);
+    let photoUrl = profile.profile && profile.profile.photo ? 'https://social.emmint.com/' + profile.profile.photo : DefaultPhoto;
+    const fullName = " " + profile.profile?.firstName + " " + profile.profile?.lastName;
+    console.log(photoUrl);
+    return (
+        <View style={styles.container}>
+            <View style={styles.avatarContainer}>
+                <Avatar.Image size={small ? 20 : 30} source={{ uri: photoUrl }} />
+            </View>
+            <View style={styles.textContainer}>
+                <Text style={small ? styles.smallProfileName : styles.profileName}>{fullName}</Text>
+            </View>
+        </View>
+    );
+
+}
+
+const styles = StyleSheet.create({
+    container: {
+        flexDirection: 'row',
+        alignItems: 'center',
+    },
+    avatarContainer: {
+        marginRight: 5,
+    },
+    textContainer: {
+        alignItems: 'center',
+    },
+    profileName: {
+        fontSize: 16,
+        fontWeight: 'bold',
+    },
+    smallProfileName: {
+        fontSize: 14,
+        fontWeight: 'bold',
+    },
+});
+
+export default React.memo(ProfileHeader);

i18nMessages.js

@@ -3,6 +3,8 @@ import { I18n } from 'i18n-js';
 import moment from 'moment'
 import 'moment/min/locales'
 
+I18n.enableFallback = true;
+
 const messages = {
     en: {
         message: {
@@ -78,75 +80,219 @@ const messages = {
     },
     es: {
         message: {
-            feed: 'Mural',
+            feed: 'Inicio',
-            events: "Eventos",
+            events: 'Eventos',
-            livestream: "En Vivo",
+            livestream: 'Transmisión en vivo',
-            search: 'Busqueda',
+            search: 'Buscar',
-            invite: "Invitaciones",
+            invite: 'Invitar',
             groups: 'Grupos',
             courses: 'Cursos',
-            giving: "Ofrendas",
+            giving: 'Donaciones',
-            profile: "Perfil",
+            profile: 'Perfil',
-            settings: 'Configuraciones',
+            settings: 'Configuración',
-            logout: "Cerrar Sesión",
+            logout: 'Cerrar sesión',
-            about: 'Acerca',
+            about: 'Acerca de',
-            statusUpdate: "Publicación Nueva",
+            statusUpdate: 'Nueva publicación',
-            newsPost: "Noticias?",
+            newsPost: 'Publicación de noticias',
-            post: "Publica",
+            post: 'Publicar',
-            add: 'Añade',
+            add: 'Agregar',
-            whatIsNew: "Que hay de nuevo?",
+            whatIsNew: '¿Qué hay de nuevo?',
-            saySomethingTo: "Publica algo para ",
+            saySomethingTo: 'Di algo a ',
-            follow: "Seguir",
+            follow: 'Seguir',
-            unfollow: "Dejar",
+            unfollow: 'Dejar de seguir',
-            subscribe: "Subscribirse",
+            subscribe: 'Suscribirse',
-            unsubscribe: 'Abandonar',
+            unsubscribe: 'Cancelar suscripción',
-            pending: "Pendiente",
+            pending: 'Pendiente',
-            subscribers: "Subscriptores",
+            subscribers: 'Suscriptores',
-            loading: "Cargando",
+            loading: 'Cargando',
-            login: 'Inicia Sesión',
+            login: 'Iniciar sesión',
-            email: "Correo Electronico",
+            email: 'Correo electrónico',
-            cancel: "Cancelar",
+            cancel: 'Cancelar',
-            password: "Contraseña",
+            password: 'Contraseña',
-            rpassword: "Confirma tu Contraseña",
+            rpassword: 'Repetir contraseña',
-            resetPassword: "Recuperar Contraseña",
+            resetPassword: 'Restablecer contraseña',
-            register: "Registrate",
+            register: 'Registrarse',
             name: 'Nombre',
-            lastName: "Apeido",
+            lastName: 'Apellido',
-            describeYourself: 'Describete en unas cuantas palabras',
+            describeYourself: 'Describirse',
-            continueWatching: "Continua viendo",
+            continueWatching: 'Continuar viendo',
-            createCourse: "Crea tu propio curso!",
+            createCourse: '¡Crea tu propio curso nuevo!',
-            createGroup: "Crea un grupo nuevo!",
+            createGroup: '¡Crea tu propio grupo nuevo!',
-            title: "Titulo",
+            title: 'Título',
-            subtitle: "Subtitulo",
+            subtitle: 'Subtítulo',
-            recentlyAdded: "Recientemente añadido",
+            recentlyAdded: 'Agregado recientemente',
-            popularCourses: "Cursos populares",
+            popularCourses: 'Cursos populares',
-            privateGroup: "Grupo privado",
+            privateGroup: 'Grupo privado',
-            tithesAndOfferings: "Diezmos y Ofrendas",
+            tithesAndOfferings: 'Diezmos y Ofrendas',
-            type: "Tipo",
+            type: 'Tipo',
-            description: "Descripción",
+            description: 'Descripción',
-            amount: "Cantidad",
+            amount: 'Monto',
-            tithes: "Diezmos",
+            tithes: 'Diezmos',
-            offerings: "Ofrendas",
+            offerings: 'Ofrendas',
-            event: "Evento",
+            event: 'Evento',
-            proceedToPayment: "Continuar con el pago",
+            proceedToPayment: 'Continuar al pago',
-            minimumAmount: "La cantidad mínima es de ",
+            minimumAmount: 'El monto mínimo es ',
-            notifications: "Notificaciones",
+            notifications: 'Notificaciones',
-            searchUsers: "Busca Usuarios",
+            searchUsers: 'Buscar usuarios',
-            searchCourses: "Busca Cursos",
+            searchCourses: 'Buscar cursos',
-            news: "Noticias",
+            news: 'Noticias',
-            wrongInformation: "Por favor revisa la información introducida.",
+            wrongInformation: 'Por favor, revisa la información.',
-            submit: "Ingresar",
+            submit: 'Enviar',
-            IKnowThisPerson: "Conozco a esta persona",
+            IKnowThisPerson: 'Conozco a esta persona',
-            update: "Actualizar",
+            update: 'Actualizar',
-            invalidEmail: "El correo electronico es invalido!",
+            invalidEmail: '¡La dirección de correo electrónico no es válida!',
-            reviewPassword: "Revisa la constraseña introducida.",
+            reviewPassword: 'Por favor, revisa tu contraseña.',
-            updatePhoto: "Nueva foto",
+            updatePhoto: 'Actualizar foto',
-            optional: "Opcional",
+            optional: 'Opcional',
-            birthday: "Cumpleaños",
+            birthday: 'Cumpleaños',
-            localMinistry: "Ministerio Local",
+            localMinistry: 'Ministerio local',
-            ocupation: "Ocupación",
+            ocupation: 'Ocupación',
-            country: 'Pais',
+            country: 'País',
+        }
     },
+    fr: {
+        message: {
+            feed: 'Fil d\'actualité',
+            events: 'Événements',
+            livestream: 'Diffusion en direct',
+            search: 'Rechercher',
+            invite: 'Inviter',
+            groups: 'Groupes',
+            courses: 'Cours',
+            giving: 'Don',
+            profile: 'Profil',
+            settings: 'Paramètres',
+            logout: 'Se déconnecter',
+            about: 'À propos',
+            statusUpdate: 'Nouvelle publication',
+            newsPost: 'Publication de nouvelles',
+            post: 'Publier',
+            add: 'Ajouter',
+            whatIsNew: 'Quoi de neuf ?',
+            saySomethingTo: 'Dire quelque chose à ',
+            follow: 'Suivre',
+            unfollow: 'Ne plus suivre',
+            subscribe: 'S\'abonner',
+            unsubscribe: 'Se désabonner',
+            pending: 'En attente',
+            subscribers: 'Abonnés',
+            loading: 'Chargement',
+            login: 'Connexion',
+            email: 'Email',
+            cancel: 'Annuler',
+            password: 'Mot de passe',
+            rpassword: 'Répéter le mot de passe',
+            resetPassword: 'Réinitialiser le mot de passe',
+            register: 'S\'inscrire',
+            name: 'Nom',
+            lastName: 'Nom de famille',
+            describeYourself: 'Décrivez-vous',
+            continueWatching: 'Continuer à regarder',
+            createCourse: 'Créer votre propre nouveau cours !',
+            createGroup: 'Créer votre propre nouveau groupe !',
+            title: 'Titre',
+            subtitle: 'Sous-titre',
+            recentlyAdded: 'Récemment ajouté',
+            popularCourses: 'Cours populaires',
+            privateGroup: 'Groupe privé',
+            tithesAndOfferings: 'Dîmes et offrandes',
+            type: 'Type',
+            description: 'Description',
+            amount: 'Montant',
+            tithes: 'Dîmes',
+            offerings: 'Offrandes',
+            event: 'Événement',
+            proceedToPayment: 'Procéder au paiement',
+            minimumAmount: 'Le montant minimum est de ',
+            notifications: 'Notifications',
+            searchUsers: 'Rechercher des utilisateurs',
+            searchCourses: 'Rechercher des cours',
+            news: 'Actualités',
+            wrongInformation: 'Veuillez vérifier les informations.',
+            submit: 'Soumettre',
+            IKnowThisPerson: 'Je connais cette personne',
+            update: 'Mettre à jour',
+            invalidEmail: 'L\'adresse email est invalide !',
+            reviewPassword: 'Veuillez vérifier votre mot de passe.',
+            updatePhoto: 'Mettre à jour la photo',
+            optional: 'Facultatif',
+            birthday: 'Date de naissance',
+            localMinistry: 'Ministère local',
+            ocupation: 'Occupation',
+            country: 'Pays',
+        }
+    },
+    da: {
+        message: {
+            feed: 'Feed',
+            events: "Begivenheder",
+            livestream: "Live stream",
+            search: 'Søg',
+            invite: 'Inviter',
+            groups: 'Grupper',
+            courses: "Kurser",
+            giving: "Donation",
+            profile: "Profil",
+            settings: 'Indstillinger',
+            logout: "Log ud",
+            about: 'Om',
+            statusUpdate: "Ny opdatering",
+            newsPost: "Nyhedsopslag",
+            post: "Indlæg",
+            add: 'Tilføj',
+            whatIsNew: "Hvad er nyt?",
+            saySomethingTo: "Sig noget til ",
+            follow: "Følg",
+            unfollow: "Følg ikke",
+            subscribe: "Abonnér",
+            unsubscribe: 'Afmeld',
+            pending: "Afventer",
+            subscribers: "Abonnenter",
+            loading: "Indlæser",
+            login: 'Log ind',
+            email: "E-mail",
+            cancel: "Annuller",
+            password: "Adgangskode",
+            rpassword: "Gentag adgangskode",
+            resetPassword: "Nulstil adgangskode",
+            register: "Registrer",
+            name: "Navn",
+            lastName: "Efternavn",
+            describeYourself: 'Beskriv dig selv',
+            continueWatching: "Fortsæt med at se",
+            createCourse: "Opret din egen nye kursus!",
+            createGroup: "Opret din egen nye gruppe!",
+            title: "Titel",
+            subtitle: "Undertitel",
+            recentlyAdded: "Nyligt tilføjet",
+            popularCourses: "Populære kurser",
+            privateGroup: "Privat gruppe",
+            tithesAndOfferings: "Tiende og offer",
+            type: "Type",
+            description: "Beskrivelse",
+            amount: "Beløb",
+            tithes: "Tiende",
+            offerings: "Offergaver",
+            event: "Begivenhed",
+            proceedToPayment: "Fortsæt til betaling",
+            minimumAmount: "Det mindste beløb er ",
+            notifications: "Notifikationer",
+            searchUsers: "Søg efter brugere",
+            searchCourses: "Søg efter kurser",
+            news: "Nyheder",
+            wrongInformation: "Gennemse venligst oplysningerne.",
+            submit: "Indsend",
+            IKnowThisPerson: "Jeg kender denne person",
+            update: "Opdater",
+            invalidEmail: "E-mailadressen er ugyldig!",
+            reviewPassword: "Gennemse venligst din adgangskode.",
+            updatePhoto: "Opdater foto",
+            optional: "Valgfrit",
+            birthday: "Fødselsdag",
+            localMinistry: "Lokalt ministerium",
+            ocupation: "Beskæftigelse",
+            country: 'Land',
+        }
     }
 }