cards mobile presentation

.gitignore

@@ -10,6 +10,7 @@ coverage
 build
 
 # misc
+plans
 xrank_data
 tourney_maps
 .DS_Store

react-ui/src/components/freeagents/FATableRows.js

@@ -47,7 +47,7 @@ const FATableRows = ({ freeAgent }) => {
                 <Image
                   src={`https://avatars.io/twitter/${twitter}`}
                   avatar
-                  onError={error => setImageError(true)}
+                  onError={() => setImageError(true)}
                 />
               )}
               <span>

react-ui/src/components/freeagents/FreeAgentBrowser.js

@@ -20,6 +20,7 @@ import { freeAgentPosts } from "../../graphql/queries/freeAgentPosts"
 import { userLean } from "../../graphql/queries/userLean"
 import { hideFreeAgentPost } from "../../graphql/mutations/hideFreeAgentPost"
 import useWindowDimensions from "../../hooks/useWindowDimensions"
+import FreeAgentCards from "./FreeAgentCards"
 
 const FreeAgentBrowser = () => {
   const [successMsg, setSuccessMsg] = useState(null)
@@ -31,7 +32,7 @@ const FreeAgentBrowser = () => {
     region: "",
   })
 
-  const { containerWidth } = useWindowDimensions()
+  const { isMobile } = useWindowDimensions()
 
   useEffect(() => {
     document.title = "Free Agents - sendou.ink"
@@ -262,7 +263,7 @@ const FreeAgentBrowser = () => {
   })
 
   return (
-    <>
+    <div style={{ textAlign: isMobile ? "center" : null }}>
       {successMsg && <Message success>{successMsg}</Message>}
       {errorMsg && <Message error>{errorMsg}</Message>}
       {showForm ? (
@@ -277,10 +278,7 @@ const FreeAgentBrowser = () => {
           <Grid.Column floated={"left"} width={8}>
             {!showForm && <FilterDropdowns />}
           </Grid.Column>
-          <Grid.Column
-            floated={containerWidth < 723 ? null : "right"}
-            width={8}
-          >
+          <Grid.Column floated={isMobile ? null : "right"} width={8}>
             <ButtonHeader />
           </Grid.Column>
         </Grid>
@@ -288,13 +286,17 @@ const FreeAgentBrowser = () => {
       <>
         <div style={{ marginTop: "2em" }}>
           {freeAgentPostArray.length > 0 ? (
-            <FreeAgentTable FAArray={freeAgentPostArray} />
+            isMobile ? (
+              <FreeAgentCards FAArray={freeAgentPostArray} />
+            ) : (
+              <FreeAgentTable FAArray={freeAgentPostArray} />
+            )
           ) : (
             <NoPostsText />
           )}
         </div>
       </>
-    </>
+    </div>
   )
 }
 

react-ui/src/components/freeagents/FreeAgentCards.js

@@ -0,0 +1,161 @@
+import React, { useState } from "react"
+import { Table, Card, Image, Icon, Flag, Button } from "semantic-ui-react"
+import { countries } from "../../utils/lists"
+import InfiniteScroll from "react-infinite-scroller"
+import { Link } from "react-router-dom"
+
+import FATableRows from "./FATableRows"
+import WpnImage from "../common/WpnImage"
+import RoleIcons from "./RoleIcons"
+import VCIcon from "./VCIcon"
+
+const FreeAgentCard = ({ freeAgent }) => {
+  const [expanded, setExpanded] = useState(false)
+  const [imageError, setImageError] = useState(false)
+
+  const {
+    activity,
+    description,
+    looking_for,
+    past_experience,
+    playstyles,
+    can_vc,
+    createdAt,
+    discord_user,
+  } = freeAgent
+  const {
+    twitter_name,
+    weapons,
+    discord_id,
+    discriminator,
+    username,
+    country,
+  } = discord_user
+  const playstylesObj = playstyles.reduce((acc, cur) => {
+    acc[cur] = true
+    return acc
+  }, {})
+
+  const hasExtraInfo = () => {
+    if (!activity && !description && !looking_for && !past_experience) {
+      return false
+    }
+
+    return true
+  }
+
+  return (
+    <Card centered>
+      {twitter_name && !imageError && (
+        <Image
+          src={`https://avatars.io/twitter/${twitter_name}`}
+          wrapped
+          ui={false}
+          onError={() => setImageError(true)}
+        />
+      )}
+      <Card.Content>
+        <Card.Header>
+          <Link to={`/u/${discord_id}`}>
+            {username}#{discriminator}
+          </Link>
+        </Card.Header>
+        <Card.Meta style={{ marginTop: "0.2em" }}>
+          {country && (
+            <>
+              <Flag name={country} />{" "}
+              {countries.reduce(
+                (acc, cur) => (cur.code === country ? cur.name : acc),
+                ""
+              )}
+            </>
+          )}
+        </Card.Meta>
+        <Card.Description style={{ marginTop: "1em" }}>
+          {twitter_name && !imageError && (
+            <>
+              <Icon name="twitter" size="large" style={{ color: "#1da1f2" }} />
+              <a href={`https://twitter.com/${twitter_name}`}>{twitter_name}</a>
+            </>
+          )}
+        </Card.Description>
+        <Card.Description style={{ marginTop: "1em" }}>
+          {weapons.map(weapon => (
+            <WpnImage key={weapon} weapon={weapon} size="small" />
+          ))}
+        </Card.Description>
+        <Card.Description style={{ marginTop: "1em" }}>
+          <RoleIcons playstyles={playstylesObj} /> | <VCIcon canVC={can_vc} />
+        </Card.Description>
+        <Card.Description style={{ marginTop: "1em", color: "#999999" }}>
+          {new Date(parseInt(createdAt)).toLocaleDateString()}
+        </Card.Description>
+      </Card.Content>
+      {hasExtraInfo() && !expanded && (
+        <Card.Content extra>
+          <Button basic onClick={() => setExpanded(true)}>
+            Expand
+          </Button>
+        </Card.Content>
+      )}
+      {expanded && (
+        <>
+          <Card.Content header="Activity" />
+          <Card.Description
+            style={{ marginTop: "1em", whiteSpace: "pre-wrap", padding: "1em" }}
+          >
+            {activity}
+          </Card.Description>
+          <Card.Content header="Past experience" />
+          <Card.Description
+            style={{ marginTop: "1em", whiteSpace: "pre-wrap", padding: "1em" }}
+          >
+            {past_experience}
+          </Card.Description>
+          <Card.Content header="Looking for" />
+          <Card.Description
+            style={{ marginTop: "1em", whiteSpace: "pre-wrap", padding: "1em" }}
+          >
+            {looking_for}
+          </Card.Description>
+          <Card.Content header="Description" />
+          <Card.Description
+            style={{ marginTop: "1em", whiteSpace: "pre-wrap", padding: "1em" }}
+          >
+            {description}
+          </Card.Description>
+          <Card.Content extra>
+            <Button basic onClick={() => setExpanded(false)}>
+              Collapse
+            </Button>
+          </Card.Content>
+        </>
+      )}
+    </Card>
+  )
+}
+
+const FreeAgentCards = ({ FAArray }) => {
+  const [postsToShow, setPostsToShow] = useState(3)
+
+  const loadMorePosts = page => {
+    setPostsToShow(page * 3)
+  }
+
+  const visiblePosts = FAArray.filter((post, index) => index < postsToShow)
+
+  return (
+    <InfiniteScroll
+      pageStart={1}
+      loadMore={loadMorePosts}
+      hasMore={postsToShow < FAArray.length}
+      loader={null}
+    >
+      {visiblePosts.map(fa => {
+        return <FreeAgentCard key={fa.id} freeAgent={fa} />
+      })}
+    </InfiniteScroll>
+  )
+}
+
+export default FreeAgentCards

react-ui/src/hooks/useWindowDimensions.js

@@ -17,10 +17,12 @@ const getContainerWidth = width => {
 function getWindowDimensions() {
   const { innerWidth: width, innerHeight: height } = window
   const containerWidth = getContainerWidth(width)
+  const isMobile = containerWidth < 723
   return {
     width,
     height,
-    containerWidth
+    containerWidth,
+    isMobile,
   }
 }