WIP: Migrate to Tailwindcss

README.md

@@ -203,9 +203,4 @@ Card filters are defined that can be used by the frontend and backend. [Nearley]
 
 ### Components & Styling
 
-Components are provided by [Reactstrap 9][reactstrap] which is powered by [Bootstrap v5.1][boostrap], which uses SCSS.
-
-Components typically directly use bootstrap classes for additional styling, but may also use global classnames defined in public CSS files.
-
-[reactstrap]: https://reactstrap.github.io/
-[bootstrap]: https://getbootstrap.com/docs/5.1/getting-started/introduction/
+Components are styled using TailwindCSS, with some custom CSS for more complex components.

app.js

@@ -19,6 +19,7 @@ const { updateCardbase } = require('./serverjs/updatecards');
 const carddb = require('./serverjs/carddb');
 const { render } = require('./serverjs/render');
 const { setup } = require('./serverjs/socketio');
+const flash = require('connect-flash');
 
 // global listeners for promise rejections
 process.on('unhandledRejection', (reason) => {
@@ -103,7 +104,7 @@ app.use(
 );
 
 // Express messages middleware
-app.use(require('connect-flash')());
+app.use(flash());
 
 app.use((req, res, next) => {
   res.locals.messages = require('express-messages')(req, res);

dynamo/models/comment.js

@@ -141,5 +141,16 @@ module.exports = {
       },
     ];
   },
+
+  scan: async (lastKey) => {
+    const result = await client.scan({
+      ExclusiveStartKey: lastKey,
+      ScanIndexForward: true,
+    });
+    return {
+      items: result.Items,
+      lastKey: result.LastEvaluatedKey,
+    };
+  },
   FIELDS,
 };

dynamo/models/cube.js

@@ -28,7 +28,7 @@ const FIELDS = {
   OWNER: 'owner',
   NAME: 'name',
   VISIBILITY: 'visibility',
-  PRICE_VISIBLITY: 'priceVisibility',
+  PRICE_VISIBILITY: 'priceVisibility',
   FEATURED: 'featured',
   CATEGORY_OVERRIDE: 'categoryOverride',
   CATEGORY_PREFIXES: 'categoryPrefixes',
@@ -57,7 +57,7 @@ const VISIBILITY = {
   UNLISTED: 'un',
 };
 
-const PRICE_VISIBLITY = {
+const PRICE_VISIBILITY = {
   PUBLIC: 'pu',
   PRIVATE: 'pr',
 };
@@ -377,7 +377,7 @@ module.exports = {
     [FIELDS.SHORT_ID]: cube.shortID,
     [FIELDS.OWNER]: `${cube.owner}`,
     [FIELDS.VISIBILITY]: getVisibility(cube.isListed, cube.isPrivate),
-    [FIELDS.PRICE_VISIBLITY]: cube.privatePrices ? PRICE_VISIBLITY.PRIVATE : PRICE_VISIBLITY.PUBLIC,
+    [FIELDS.PRICE_VISIBILITY]: cube.privatePrices ? PRICE_VISIBILITY.PRIVATE : PRICE_VISIBILITY.PUBLIC,
     [FIELDS.FEATURED]: cube.isFeatured,
     [FIELDS.CATEGORY_OVERRIDE]: cube.overrideCategory ? cube.categoryOverride : null,
     [FIELDS.CATEGORY_PREFIXES]: cube.overrideCategory ? cube.categoryPrefixes : null,
@@ -448,6 +448,6 @@ module.exports = {
     };
   },
   VISIBILITY,
-  PRICE_VISIBLITY,
+  PRICE_VISIBILITY,
   FIELDS,
 };

dynamo/models/draft.js

@@ -533,7 +533,7 @@ module.exports = {
         }),
       );
 
-      initialState = draft.initial_state.map((seat) =>
+      initialState = draft.InitialState.map((seat) =>
         seat.map((pack) => {
           if (pack.cards) {
             return {
@@ -555,7 +555,7 @@ module.exports = {
       pickorders = draft.seats.map((seat) => seat.pickorder);
 
       cards = draft.cards;
-      initialState = draft.initial_state.map((pack) =>
+      initialState = draft.InitialState.map((pack) =>
         pack.map((idx) => cards.findIndex((card) => draft.cards[idx].cardID === card.cardID)),
       );
     } else {

dynamo/models/featuredQueue.js

@@ -42,7 +42,7 @@ module.exports = {
       [FIELDS.STATUS]: STATUS.ACTIVE,
     });
   },
-  querySortedByDate: async (lastKey) => {
+  querySortedByDate: async (lastKey, limit = 36) => {
     const query = {
       IndexName: 'ByDate',
       KeyConditionExpression: '#status = :status',
@@ -52,6 +52,7 @@ module.exports = {
       ExpressionAttributeValues: {
         ':status': STATUS.ACTIVE,
       },
+      Limit: limit,
     };
     if (lastKey) {
       query.ExclusiveStartKey = lastKey;

dynamo/models/package.js

@@ -57,12 +57,9 @@ const hydrate = async (pack) => {
 
   pack.owner = await User.getById(pack.owner);
   pack.cards = pack.cards.map((c) => {
-    if (c.id) {
+    if (c.scryfall_id) {
       return c;
     }
-    if (c.oracle_id) {
-      return carddb.cardFromId(carddb.oracleToId[c.oracle_id][0]);
-    }
     return carddb.cardFromId(c);
   });
 
@@ -75,12 +72,9 @@ const batchHydrate = async (packs) => {
   packs.forEach((pack) => {
     pack.owner = owners.find((owner) => owner.id === pack.owner);
     pack.cards = pack.cards.map((c) => {
-      if (c.id) {
+      if (c.scryfall_id) {
         return c;
       }
-      if (c.oracle_id) {
-        return carddb.cardFromId(carddb.oracleToId[c.oracle_id][0]);
-      }
       return carddb.cardFromId(c);
     });
   });
@@ -99,12 +93,8 @@ module.exports = {
 
     if (document.cards) {
       document.cards = document.cards.map((card) => {
-        if (card.id) {
-          return card.id;
-        }
-
-        if (carddb.oracle_id) {
-          return carddb.oracleToId[carddb.oracle_id][0];
+        if (card.scryfall_id) {
+          return card.scryfall_id;
         }
 
         return card;
@@ -136,15 +126,31 @@ module.exports = {
       },
       ScanIndexForward: ascending,
       ExclusiveStartKey: lastKey,
-      Limit: 10,
+      limit: 36,
     };
-
-    const result = await client.query(query);
-
+
     if (keywords) {
-      result.Items = result.Items.filter((item) => item[FIELDS.KEYWORDS].some((keyword) => keywords.includes(keyword)));
+      const words = keywords ? keywords.toLowerCase().split(' ') : null;
+
+      // all words must exist in the keywords
+      query.FilterExpression = words.map((word) => `contains(#keywords, :${word})`).join(' and ');
+
+      query.ExpressionAttributeNames = {
+        ...query.ExpressionAttributeNames,
+        '#keywords': FIELDS.KEYWORDS,
+      };
+
+      query.ExpressionAttributeValues = {
+        ...query.ExpressionAttributeValues,
+        ...words.reduce((acc, word) => {
+          acc[`:${word}`] = word;
+          return acc;
+        }, {}),
+      };
     }
 
+    const result = await client.query(query);
+
     return {
       items: await batchHydrate(result.Items),
       lastKey: result.LastEvaluatedKey,
@@ -162,15 +168,31 @@ module.exports = {
       },
       ScanIndexForward: ascending,
       ExclusiveStartKey: lastKey,
-      Limit: 10,
+      limit: 36,
     };
 
-    const result = await client.query(query);
-
-    if (keywords && keywords.length > 0) {
-      result.Items = result.Items.filter((item) => item[FIELDS.KEYWORDS].some((keyword) => keywords.includes(keyword)));
+    if (keywords) {
+      const words = keywords ? keywords.toLowerCase().split(' ') : null;
+
+      // all words must exist in the keywords
+      query.FilterExpression = words.map((word) => `contains(#keywords, :${word})`).join(' and ');
+
+      query.ExpressionAttributeNames = {
+        ...query.ExpressionAttributeNames,
+        '#keywords': FIELDS.KEYWORDS,
+      };
+
+      query.ExpressionAttributeValues = {
+        ...query.ExpressionAttributeValues,
+        ...words.reduce((acc, word) => {
+          acc[`:${word}`] = word;
+          return acc;
+        }, {}),
+      };
     }
 
+    const result = await client.query(query);
+
     return {
       items: await batchHydrate(result.Items),
       lastKey: result.LastEvaluatedKey,
@@ -187,7 +209,7 @@ module.exports = {
         ':owner': owner,
       },
       ExclusiveStartKey: lastKey,
-      limit: 10,
+      limit: 100,
     };
 
     const result = await client.query(query);

dynamo/models/user.js

@@ -1,5 +1,6 @@
 const { getImageData } = require('../../serverjs/util');
 const createClient = require('../util');
+const { deleteById } = require('./cube');
 
 const FIELDS = {
   ID: 'id',
@@ -171,6 +172,7 @@ module.exports = {
   },
   batchGet: async (ids) => batchHydrate(batchStripSensitiveData(await client.batchGet(ids.map((id) => `${id}`)))),
   createTable: async () => client.createTable(),
+  deleteById: async (id) => client.delete({id}),
   convertUser: (user) => ({
     [FIELDS.ID]: `${user._id}`,
     [FIELDS.USERNAME]: user.username,

eslint.config.mjs

@@ -60,8 +60,8 @@ export default [
           groups: [
             // Node.js builtins prefixed with `node:`.
             ['^node:'],
-            // react and reactstrap.
-            ['^react$', '^reactstrap$'],
+            // react .
+            ['^react$'],
             // Packages.
             // Things that start with a letter (or digit or underscore), or `@` followed by a letter.
             ['^@?\\w'],