fetch logs

web/src/components/Log.tsx

@@ -1,5 +1,8 @@
-import React from "react";
+import { Button } from "@material-ui/core";
+import React, { useContext, useState } from "react";
 import styled from "styled-components";
+import { useLog } from "../hooks/useLog";
+import { store } from "../store";
 
 const LogContainer = styled.div`
     background: var(--bg);
@@ -8,9 +11,36 @@ const LogContainer = styled.div`
 `;
 
 export function Log({ year, month, initialLoad = false }: { year: string, month: string, initialLoad?: boolean }) {
+    const [load, setLoad] = useState(initialLoad);
 
+    if (!load) {
+        return <LoadableLog year={year} month={month} onLoad={() => setLoad(true)} />
+    }
 
     return <LogContainer>
-        {year} {month}
+        <ContentLog year={year} month={month} />
     </LogContainer>
+}
+
+const ContentLogContainer = styled.div`
+`;
+
+function ContentLog({ year, month }: { year: string, month: string }) {
+    const {state} = useContext(store);
+
+    const logs = useLog(state.currentChannel ?? "", state.currentUsername ?? "", year, month)
+
+    return <ContentLogContainer>
+        {JSON.stringify(logs)}
+    </ContentLogContainer>
+}
+
+const LoadableLogContainer = styled.div`
+
+`;
+
+function LoadableLog({ year, month, onLoad }: { year: string, month: string, onLoad: () => void }) {
+    return <LoadableLogContainer>
+        <Button variant="contained" color="primary" size="large" onClick={onLoad}>load</Button>
+    </LoadableLogContainer>
 }

web/src/components/LogContainer.tsx

@@ -15,6 +15,6 @@ export function LogContainer() {
     const availableLogs = useAvailableLogs(state.currentChannel, state.currentUsername);
 
     return <LogContainerDiv>
-        {availableLogs.map(log => <Log year={log.year} month={log.month} />)}
+        {availableLogs.map(log => <Log key={`${log.year}:${log.month}`} year={log.year} month={log.month} />)}
     </LogContainerDiv>
 }

web/src/hooks/useAvailableLogs.ts

@@ -1,14 +1,18 @@
 import { useContext } from "react";
 import { useQuery } from "react-query";
+import { isUserId } from "../services/isUserId";
 import { store } from "../store";
 
 export type AvailableLogs = Array<{ month: string, year: string }>;
 
-export function useAvailableLogs(channel: string | null, username: string | null, channelIsId = false, usernameIsId = false): AvailableLogs {
+export function useAvailableLogs(channel: string | null, username: string | null): AvailableLogs {
     const { state } = useContext(store);
 
     const { data } = useQuery<AvailableLogs>(`${channel}:${username}`, () => {
         if (channel && username) {
+            const channelIsId = isUserId(channel);
+            const usernameIsId = isUserId(username);
+            
             const queryUrl = new URL(`${state.apiBaseUrl}/list`);
             queryUrl.searchParams.append(`channel${channelIsId ? "id" : ""}`, channel);
             queryUrl.searchParams.append(`user${usernameIsId ? "id" : ""}`, username);
@@ -26,6 +30,5 @@ export function useAvailableLogs(channel: string | null, username: string | null
         return [];
     });
 
-
     return data ?? [];
 }

web/src/hooks/useLog.ts

@@ -0,0 +1,32 @@
+import { useContext } from "react";
+import { useQuery } from "react-query";
+import { isUserId } from "../services/isUserId";
+import { store } from "../store";
+import { LogMessage, UserLogResponse } from "../types/log";
+
+
+
+export function useLog(channel: string, username: string, year: string, month: string): Array<LogMessage> {
+    const { state } = useContext(store);
+
+    const { data } = useQuery<Array<LogMessage>>(`${channel}:${username}:${year}:${month}`, () => {
+        if (channel && username) {
+            const channelIsId = isUserId(channel);
+            const usernameIsId = isUserId(username);
+
+            const queryUrl = new URL(`${state.apiBaseUrl}/channel${channelIsId ? "id" : ""}/${channel}/user${usernameIsId ? "id" : ""}/${username}/2020/11?reverse&json`);
+
+            return fetch(queryUrl.toString()).then((response) => {
+                if (response.ok) {
+                    return response;
+                }
+
+                throw Error(response.statusText);
+            }).then(response => response.json()).then((data: UserLogResponse) => data.messages);
+        }
+
+        return [];
+    });
+
+    return data ?? [];
+}

web/src/services/isUserId.ts

@@ -0,0 +1,3 @@
+export function isUserId(value: string) {
+    return value.startsWith("id:");
+}

web/src/types/log.ts

@@ -0,0 +1,13 @@
+export interface UserLogResponse {
+    messages: LogMessage[];
+}
+
+export interface LogMessage {
+    text: string;
+    username: string;
+    displayName: string;
+    channel: string;
+    timestamp: Date;
+    type: number;
+    raw: string;
+}