@messenger-box/platform-mobile 0.0.1-alpha.174

package/src/screens/inbox/containers/Dialogs.tsx

@@ -0,0 +1,62 @@
+import { FlatList, ScrollView, Text, View } from 'native-base';
+import { IChannel, useGetAllChannelQuery, useGetAllUsersQuery } from '@messenger-box/platform-client';
+import { useSelector } from 'react-redux';
+import React, { useCallback, useMemo, useState } from 'react';
+import { keyBy } from 'lodash';
+import { useNavigation } from '@react-navigation/native';
+
+import { DialogsListItem } from '../components/DialogsListItem';
+
+export function Dialogs() {
+    const users$ = useGetAllUsersQuery();
+    const navigation: any = useNavigation();
+    const channels$ = useGetAllChannelQuery();
+    const [rk, setRk] = useState(Math.random()); 
+    const userId = useSelector((state: any) => state.user.auth0UserId);
+
+    /**
+     * TODO: add ability to check channel members
+     * HostChannels: channel.members[0].user !== userId
+     * GuestChannels: channel.members[0].user == userId
+     */
+    const filter = useCallback(
+        (channel) =>
+            channel.type === 'DIRECT' 
+            && channel?.displayName !== 'surveybot'
+            && channel?.displayName !== 'admin (you)',
+        [userId],
+    );
+
+    const users = useMemo(() => keyBy(users$.data?.getUsers, 'id'), [users$.data?.getUsers]);
+
+    // Filter all channles
+    const list = useMemo(() => 
+        channels$.data?.channels?.filter(filter) || [], [filter, channels$.data?.channels]);
+
+    // Assign users to channel item
+    const channels = useMemo(
+        () => list.map((channel) => ({ ...channel, users: channel?.members?.map((record) => users[record?.user!]) }))
+        , [list, users$.data?.getUsers, userId]);
+
+    const onRefresh = async () => {
+        await users$.refetch();
+        await channels$.refetch();
+        return setRk(Math.random());
+    };
+
+    const isRefreshing = channels$.loading || users$.loading;
+
+    const onOpen = (channel: IChannel, options: { title: string }) => 
+        navigation.navigate("Inbox.DialogMessages" as any, { ...options, channel, hideTabBar: true });
+
+    return (
+        <FlatList
+            data={channels}
+            onRefresh={onRefresh}
+            refreshing={isRefreshing}
+            contentContainerStyle={{ minHeight: '100%' }}
+            ItemSeparatorComponent={() => <View height="0.5" backgroundColor="gray.200" marginY="0.5" />}
+            renderItem={({ item: channel }) => <DialogsListItem refreshKey={rk} onOpen={onOpen} currentUserId={userId} channel={channel} />} 
+        />
+    );
+}

package/src/screens/index.ts

@@ -0,0 +1 @@
+export * from './inbox';

package/tsconfig.json

@@ -0,0 +1,18 @@
+{
+  "extends": "../../../tsconfig.json",
+  "compilerOptions": {
+    "allowSyntheticDefaultImports": true,
+    "experimentalDecorators": true,
+    "esModuleInterop": true,
+    "skipLibCheck": true,
+    "rootDir": "./src",
+    "outDir": "../lib",
+    "declarationDir": "lib"
+  },
+  "exclude": [
+    "node_modules",
+    "lib",
+    "dist",
+    "webpack.config.js"
+  ]
+}

package/webpack.config.js

@@ -0,0 +1,58 @@
+const nodeExternals = require('webpack-node-externals');
+const webpack = require('webpack');
+const path = require('path');
+const fs = require('fs');
+
+const webpackOpts = {
+    mode: 'development',
+    entry: './src/index.ts',
+    target: 'node',
+    output: {
+        path: path.join(__dirname, 'lib'),
+        filename: 'index.js',
+        libraryTarget: 'commonjs2',
+    },
+    node: {
+        __dirname: false,
+    },
+    resolve: {
+        extensions: ['.ts', '.tsx', '.graphql', '.gql'],
+    },
+    plugins: [
+        new webpack.LoaderOptionsPlugin({
+            options: {
+                test: /\.tsx?$/,
+                ts: {
+                    compiler: 'typescript',
+                    configFile: 'tsconfig.json',
+                },
+                tslint: {
+                    emitErrors: true,
+                    failOnHint: true,
+                },
+            },
+        }),
+    ],
+    devtool: 'source-map',
+    module: {
+        rules: [
+            {
+                test: /\.tsx?$/,
+                loaders: 'ts-loader',
+            },
+            {
+                test: /\.graphql?/,
+                exclude: /node_modules/,
+                use: 'raw-loader',
+            },
+            {
+                test: /\.(gql)$/,
+                exclude: /node_modules/,
+                use: ['graphql-tag/loader'],
+            },
+        ],
+    },
+    externals: [nodeExternals({ modulesDir: '../../../node_modules' }), nodeExternals()],
+};
+
+module.exports = webpackOpts;