Merge branch 'main' of github.com:wordbots/wordbots-core into main

src/common/components/cards/RecentCardsCarousel.tsx

@@ -23,11 +23,20 @@ interface RecentCardsCarouselState {
   width?: number
 }
 
+const duplicateCardsUntilCarouselFull = (cards: w.CardInStore[]): w.CardInStore[] => {
+  if (cards.length < RecentCardsCarousel.MAX_CARDS_TO_SHOW && cards.length > 0) {
+    while (cards.length < RecentCardsCarousel.MAX_CARDS_TO_SHOW) {
+      cards = [...cards, ...cards];
+    }
+  }
+  return cards;
+};
+
 export default class RecentCardsCarousel extends React.Component<RecentCardsCarouselProps, RecentCardsCarouselState> {
   public static MAX_CARDS_TO_SHOW = 8;
 
   public state: RecentCardsCarouselState = {
-    recentCards: this.props.cardsToShow || [],
+    recentCards: this.props.cardsToShow ? duplicateCardsUntilCarouselFull(this.props.cardsToShow) : [],
     paused: false
   };
 
@@ -68,20 +77,6 @@ export default class RecentCardsCarousel extends React.Component<RecentCardsCaro
     if (recentCards.length > 0) {
       return (
         <div>
-          {!this.props.cardsToShow && (
-            <div
-              style={{
-                marginTop: 10,
-                color: '#999',
-                fontSize: 20,
-                fontWeight: 'bold',
-                textTransform: 'uppercase',
-                textAlign: 'center'
-              }}
-            >
-              Most recently created cards
-            </div>
-          )}
           <div
             className="recentCardsCarousel"
             onMouseOver={this.handleMouseOver}
@@ -132,15 +127,11 @@ export default class RecentCardsCarousel extends React.Component<RecentCardsCaro
   }
 
   private initializeCarousel = async (userId?: string) => {
-    let recentCards = await mostRecentCards(userId || null, 15);
-
-    if (recentCards.length < RecentCardsCarousel.MAX_CARDS_TO_SHOW && recentCards.length > 0) {
-      while (recentCards.length < RecentCardsCarousel.MAX_CARDS_TO_SHOW) {
-        recentCards = [...recentCards, ...recentCards];
-      }
-    }
+    const recentCards = await mostRecentCards(userId || null, 15);
 
-    this.setState({ recentCards });
+    this.setState({
+      recentCards: duplicateCardsUntilCarouselFull(recentCards)
+    });
   }
 
   private handleClickCard = (card: w.CardInStore) => {

src/common/containers/Home.tsx

@@ -85,7 +85,21 @@ class Home extends React.Component<HomeProps> {
           </SplashSection>
         </div>
 
-        <RecentCardsCarousel history={history} />
+        <div>
+          <div
+            style={{
+              marginTop: 20,
+              color: '#999',
+              fontSize: 20,
+              fontWeight: 'bold',
+              textTransform: 'uppercase',
+              textAlign: 'center'
+            }}
+          >
+            Most recently created cards
+          </div>
+          <RecentCardsCarousel history={history} />
+        </div>
 
         {
           !isFlagSet('skipNewHere') &&

src/common/containers/Profile.tsx

@@ -8,6 +8,7 @@ import Helmet from 'react-helmet';
 import { RouteComponentProps } from 'react-router';
 import { withRouter } from 'react-router-dom';
 
+import CardGrid from '../components/cards/CardGrid';
 import RecentCardsCarousel from '../components/cards/RecentCardsCarousel';
 import Title from '../components/Title';
 import MatchmakingInfo from '../components/users/profile/MatchmakingInfo';
@@ -21,15 +22,18 @@ import {
   getNumSetsCreatedCountByUserId,
   getGamesByUser,
   getUserNamesByIds,
-  setStatistic
+  setStatistic,
+  mostRecentCards
 } from '../util/firebase';
 
 type ProfileProps = RouteComponentProps<{ userId: string }> & WithStyles;
 
 interface ProfileState {
+  cardsDisplayMode: 'recent' | 'all'
   userId?: string
   userName?: string
   games?: w.SavedGame[]
+  cards?: w.CardInStore[]
   playerNames?: Record<string, string>
   playerInfo?: {
     cardsCreated: number
@@ -59,7 +63,9 @@ const styles: Record<string, CSSProperties> = {
 };
 
 class Profile extends React.Component<ProfileProps, ProfileState> {
-  public state: ProfileState = {};
+  public state: ProfileState = {
+    cardsDisplayMode: 'recent'
+  };
 
   public async componentDidMount(): Promise<void> {
     this.loadProfileData();
@@ -79,8 +85,8 @@ class Profile extends React.Component<ProfileProps, ProfileState> {
   }
 
   public render(): JSX.Element {
-    const { classes } = this.props;
-    const { games, playerNames, playerInfo, userId, userName } = this.state;
+    const { classes, history } = this.props;
+    const { cardsDisplayMode, games, cards, playerNames, playerInfo, userId, userName } = this.state;
 
     const title = userName ? `${userName}'s Profile` : 'Profile';
 
@@ -108,14 +114,59 @@ class Profile extends React.Component<ProfileProps, ProfileState> {
               />
             </Paper>
           </div>
-          <div className={classes.recentCardsContainer}>
-            {userId && <RecentCardsCarousel key={userId} userId={userId} history={this.props.history} />}
-          </div>
+          {(userId && cards) && (
+            <div key={userId} className={classes.recentCardsContainer}>
+              <div
+                style={{
+                  margin: 10,
+                  color: '#999',
+                  fontSize: 20,
+                  fontWeight: 'bold',
+                  textTransform: 'uppercase',
+                  textAlign: 'center'
+                }}
+              >
+                { cardsDisplayMode === 'recent' ? 'Most recently created cards ' : 'All created cards ' }
+                <a
+                  className="underline"
+                  onClick={this.toggleCardsDisplayMode}
+                  style={{
+                    fontSize: 14,
+                    textTransform: 'none'
+                  }}
+                >
+                  { cardsDisplayMode === 'recent' ? '[show all cards]' : '[show most recent cards]' }
+                </a>
+              </div>
+              {
+                cardsDisplayMode === 'recent'
+                ? <RecentCardsCarousel cardsToShow={cards.slice(0, 15)} history={history} />
+                : (
+                  <CardGrid
+                    cards={cards || []}
+                    selectedCardIds={[]}
+                    selectable={false}
+                    onCardClick={this.handleClickCard}
+                  />
+                )
+              }
+            </div>
+          )}
         </div>
       </div>
     );
   }
 
+  private toggleCardsDisplayMode = (): void => {
+    this.setState(({ cardsDisplayMode }) => ({
+      cardsDisplayMode: cardsDisplayMode === 'all' ? 'recent' : 'all'
+    }));
+  }
+
+  private handleClickCard = (cardId: w.CardId) => {
+    this.props.history.push(`/card/${cardId}`);
+  }
+
   private async loadProfileData(): Promise<void> {
     try {
       const { userId } = this.props.match.params;
@@ -129,6 +180,10 @@ class Profile extends React.Component<ProfileProps, ProfileState> {
       const games = await getGamesByUser(userId);
       this.loadGamesData(games);
       this.loadPlayerInfoData(userId, games);
+
+      this.setState({
+        cards: await mostRecentCards(userId)
+      });
     } catch (error) {
       // Most likely reason is that userId is undefined or that user doesn't exist.
       console.error(error); // eslint-disable-line  no-console

src/common/util/firebase.ts

@@ -180,7 +180,7 @@ export async function getCardById(cardId: string): Promise<w.CardInStore> {
   return snapshot.val() as w.CardInStore;
 }
 
-export async function mostRecentCards(uid: w.UserId | null, limit: number): Promise<w.CardInStore[]> {
+export async function mostRecentCards(uid: w.UserId | null, limit = 9999): Promise<w.CardInStore[]> {
   const cards = await getCards(uid);
 
   return flow(