Profile page + other fixes (#91)

* fixes * Hacked together a profile page * Style fixes
kiancross · Nov 18, 2020 · 46dfd67 · 46dfd67
1 parent 6aecff9
commit 46dfd67
Show file tree

Hide file tree

Showing 2 changed files with 127 additions and 43 deletions.
diff --git a/packages/frontend/src/components/SearchInput.tsx b/packages/frontend/src/components/SearchInput.tsx
@@ -3,7 +3,7 @@
  */
 
 import React from "react";
-import { Redirect } from "react-router-dom";
+import { useHistory } from "react-router-dom";
 import { useDebounce } from "use-debounce";
 import Autocomplete from "@material-ui/lab/Autocomplete";
 import Paper from "@material-ui/core/Paper";
@@ -36,6 +36,7 @@ const SearchInput = (): JSX.Element => {
     }
   `;
 
+  const history = useHistory();
   const [open, setOpen] = React.useState(false);
   const [host, setHost] = React.useState("");
   const [selectedCommunity, setSelectedCommunity] = React.useState<Community | null>(null);
@@ -99,46 +100,42 @@ const SearchInput = (): JSX.Element => {
   const loadingText = showSpinner ? "Searching..." : "No communities found";
 
   if (selectedCommunity) {
-    return (
-      <Redirect
-        to={`/instances/${selectedCommunity.host}/communities/${selectedCommunity.id}/posts`}
-      />
-    );
-  } else {
-    return (
-      <Paper className={styles.searchRoot}>
-        <Autocomplete
-          freeSolo
-          disableClearable
-          className={styles.autocomplete}
-          open={open}
-          onOpen={() => setOpen(true)}
-          onClose={onOpen}
-          getOptionLabel={getOptionLabel}
-          filterOptions={optionsFilter}
-          options={options}
-          loading={openLoader}
-          loadingText={loadingText}
-          onChange={onSelectChange}
-          onInputChange={onInputChange}
-          renderInput={(params) => (
-            <InputBase
-              ref={params.InputProps.ref}
-              placeholder="Find a community"
-              className={styles.autocompleteInput}
-              inputProps={params.inputProps}
-              endAdornment={
-                <React.Fragment>
-                  {showSpinner ? <CircularProgress color="inherit" size={20} /> : null}
-                  {params.InputProps.endAdornment}
-                </React.Fragment>
-              }
-            />
-          )}
-        />
-      </Paper>
-    );
+    history.push(`/instances/${selectedCommunity.host}/communities/${selectedCommunity.id}/posts`);
   }
+
+  return (
+    <Paper className={styles.searchRoot}>
+      <Autocomplete
+        freeSolo
+        disableClearable
+        className={styles.autocomplete}
+        open={open}
+        onOpen={() => setOpen(true)}
+        onClose={onOpen}
+        getOptionLabel={getOptionLabel}
+        filterOptions={optionsFilter}
+        options={options}
+        loading={openLoader}
+        loadingText={loadingText}
+        onChange={onSelectChange}
+        onInputChange={onInputChange}
+        renderInput={(params) => (
+          <InputBase
+            ref={params.InputProps.ref}
+            placeholder="Find a community"
+            className={styles.autocompleteInput}
+            inputProps={params.inputProps}
+            endAdornment={
+              <React.Fragment>
+                {showSpinner ? <CircularProgress color="inherit" size={20} /> : null}
+                {params.InputProps.endAdornment}
+              </React.Fragment>
+            }
+          />
+        )}
+      />
+    </Paper>
+  );
 };
 
 export default SearchInput;
diff --git a/packages/frontend/src/pages/PublicUserProfile.tsx b/packages/frontend/src/pages/PublicUserProfile.tsx
@@ -3,20 +3,107 @@ import { Container, Grid } from "@material-ui/core";
 import UserInfoCard from "./../components/UserInfoCard";
 import { useParams } from "react-router-dom";
 import PostPreview from "../components/PostPreview";
+import { gql, useQuery } from "@apollo/client";
+import LoadingPage from "../components/LoadingPage";
 
 interface PublicUserProfileParams {
   username: string;
 }
 
 const PublicUserProfile = (): JSX.Element => {
+  const GET_POSTS = gql`
+    query($community: String!, $host: String!) {
+      getPosts(community: { id: $community, host: $host }) {
+        id
+        title
+        host
+        author {
+          id
+        }
+      }
+    }
+  `;
+
+  const general = useQuery(GET_POSTS, {
+    variables: {
+      community: "general",
+      host: window.location.host,
+    },
+  });
+
+  const all = useQuery(GET_POSTS, {
+    variables: {
+      community: "all",
+      host: window.location.host,
+    },
+  });
+
+  const elections = useQuery(GET_POSTS, {
+    variables: {
+      community: "elections",
+      host: window.location.host,
+    },
+  });
+
   const { username } = useParams<PublicUserProfileParams>();
-  // hardcoded js123 as the only valid user for now - needs changing
-  const name = username === "js123" ? "John Smith" : username;
+  const name = username;
+
+  if (elections.error || all.error || general.error)
+    return <h1 style={{ color: "black" }}>Error! </h1>;
+  if (elections.loading || all.loading || general.loading) return <LoadingPage />;
+
   return (
     <Container style={{ paddingTop: "1.5rem" }}>
       <Grid container spacing={3}>
         <Grid item container xs={8} direction="column" spacing={2}>
-          <PostPreview postId="" server="" community="" username={username} title="Example Title" />
+          {elections.data.getPosts.map((post: any) => {
+            if (post.title && post.author.id === username) {
+              return (
+                <PostPreview
+                  key={post.id}
+                  postId={post.id}
+                  server={post.host}
+                  community="elections"
+                  username={username}
+                  title={post.title}
+                />
+              );
+            } else {
+              return null;
+            }
+          })}
+          {general.data.getPosts.map((post: any) => {
+            if (post.title && post.author.id === username) {
+              return (
+                <PostPreview
+                  key={post.id}
+                  postId={post.id}
+                  server={post.host}
+                  community="general"
+                  username={username}
+                  title={post.title}
+                />
+              );
+            } else {
+              return null;
+            }
+          })}
+          {all.data.getPosts.map((post: any) => {
+            if (post.title && post.author.id === username) {
+              return (
+                <PostPreview
+                  key={post.id}
+                  postId={post.id}
+                  server={post.host}
+                  community="all"
+                  username={username}
+                  title={post.title}
+                />
+              );
+            } else {
+              return null;
+            }
+          })}
         </Grid>
         <Grid item container xs={4} direction="column" spacing={2}>
           <UserInfoCard username={username} name={name} />