Show author (#796)

src/appwrite.ts

@@ -2,6 +2,7 @@ import {
   Account,
   Client,
   Databases,
+  Functions,
   Storage,
 } from 'appwrite';
 import { fetchEnv } from './utils/env';
@@ -15,10 +16,12 @@ client
 const account = new Account(client);
 const databases = new Databases(client);
 const storage = new Storage(client);
+const functions = new Functions(client);
 
 export {
   client,
   account,
   databases,
   storage,
+  functions,
 };

src/hooks/useDb.ts

@@ -6,7 +6,10 @@ import {
   Query,
   Role,
 } from 'appwrite';
-import { databases } from '../appwrite';
+import {
+  databases,
+  functions,
+} from '../appwrite';
 import {
   TuneDbData,
   UsersBucket,
@@ -131,6 +134,9 @@ const useDb = () => {
     getTune: (tuneId: string): Promise<TuneDbDocument | null> => getTune(tuneId),
     searchTunes: (search?: string): Promise<Models.DocumentList<TuneDbDocument>> => searchTunes(search),
     getBucketId: (userId: string): Promise<string> => getBucketId(userId),
+    // TODO: refactor those executions
+    getUser: (userId: string) => functions.createExecution('getUser', JSON.stringify({ userId })),
+    listUsers: (userIds: string[]) => functions.createExecution('listUsers', JSON.stringify({ userIds })),
   };
 };
 

src/pages/Hub.tsx

@@ -12,6 +12,7 @@ import {
   CopyOutlined,
   StarOutlined,
   ArrowRightOutlined,
+  LoadingOutlined,
 } from '@ant-design/icons';
 import {
   useCallback,
@@ -37,13 +38,20 @@ import {
 const { useBreakpoint } = Grid;
 const { Text, Title } = Typography;
 
+interface ListUsersResponse {
+  users: [{
+    id: string;
+    name: string;
+  }];
+}
+
 const tunePath = (tuneId: string) => generatePath(Routes.TUNE_TUNE, { tuneId });
 
 const Hub = () => {
   const { xs } = useBreakpoint();
-  const { searchTunes } = useDb();
+  const { searchTunes, listUsers } = useDb();
   const navigate = useNavigate();
-  const [dataSource, setDataSource] = useState<any>([]);
+  const [dataSource, setDataSource] = useState<{}[]>([]); // TODO: fix this type
   const [isLoading, setIsLoading] = useState(true);
   const searchRef = useRef<InputRef | null>(null);
 
@@ -52,17 +60,26 @@ const Hub = () => {
     const list = await searchTunes(searchText);
     // TODO: create `unpublishedTunes` collection for this
     const filtered = list.documents.filter((tune) => !!tune.vehicleName);
+
+    // set initial list
     setDataSource(filtered.map((tune) => ({
       ...tune,
       key: tune.tuneId,
       year: tune.year,
-      author: 'John Doe',
+      author: <LoadingOutlined spin />,
       displacement: `${tune.displacement}l`,
       aspiration: aspirationMapper[tune.aspiration],
       publishedAt: new Date(tune.$updatedAt).toLocaleString(),
       stars: 0,
     })));
     setIsLoading(false);
+
+    // update list with users
+    const userList: ListUsersResponse = JSON.parse((await listUsers(filtered.map((tune) => tune.userId))).response);
+    setDataSource((prev) => prev.map((item: any) => ({
+      ...item,
+      author: userList.users.find((el) => el.id === item.userId)?.name,
+    })));
   }, 300);
 
   const debounceLoadData = useCallback((value: string) => loadData(value), [loadData]);
@@ -80,7 +97,7 @@ const Hub = () => {
         <>
           <Title level={5}>{tune.vehicleName}</Title>
           <Space direction="vertical">
-            <Text type="secondary">John Doe, {tune.publishedAt}</Text>
+            <Text type="secondary">{tune.author}, {tune.publishedAt}</Text>
             <Text>{tune.engineMake}, {tune.engineCode}, {tune.displacement}, {tune.cylindersCount} cylinders, {tune.aspiration}</Text>
             <Text code>{tune.signature}</Text>
           </Space>

src/pages/Info.tsx

@@ -1,3 +1,7 @@
+import {
+  useEffect,
+  useState,
+} from 'react';
 import { connect } from 'react-redux';
 import ReactMarkdown from 'react-markdown';
 import {
@@ -21,6 +25,7 @@ import {
 import Loader from '../components/Loader';
 import { Routes } from '../routes';
 import { useAuth } from '../contexts/AuthContext';
+import useDb from '../hooks/useDb';
 
 const { Item } = Form;
 const rowProps = { gutter: 10 };
@@ -30,14 +35,34 @@ const mapStateToProps = (state: AppState) => ({
   tuneData: state.tuneData,
 });
 
+interface GetUserResponse {
+  id: string;
+  name: string;
+  tunes: [];
+}
+
 const Info = ({ tuneData }: { tuneData: TuneDataState }) => {
   const navigate = useNavigate();
   const { currentUser } = useAuth();
+  const { getUser } = useDb();
+  const [author, setAuthor] = useState<string>();
 
   const goToEdit = () => navigate(generatePath(Routes.UPLOAD_WITH_TUNE_ID, {
     tuneId: tuneData.tuneId,
   }));
 
+  const loadData = async () => {
+    const authorData: GetUserResponse = JSON.parse((await getUser(tuneData.userId)).response);
+    setAuthor(authorData.name);
+  };
+
+  useEffect(() => {
+    if (tuneData?.userId) {
+      loadData();
+    }
+  // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [tuneData]);
+
   const canManage = tuneData?.userId === currentUser?.$id;
 
   const manageSection = (
@@ -66,6 +91,13 @@ const Info = ({ tuneData }: { tuneData: TuneDataState }) => {
     <div className="small-container">
       <Divider>Details</Divider>
       <Form>
+        <Row {...rowProps}>
+          <Col span={24} sm={24}>
+            <Item>
+              <Input value={author || 'loading...'} addonBefore="Author" />
+            </Item>
+          </Col>
+        </Row>
         <Row {...rowProps}>
           <Col span={24} sm={24}>
             <Item>