Initial discover implementation #8

rmisio · 2019-02-12T19:01:35Z

This is an initial pass-through of the Discover experience. It's really just 8 category boxes.

Notes:

Right now it's really slow. This is due to the search endpoint being absurdly slow. Tyler is looking into it.

rmisio · 2019-02-12T19:26:13Z

src/components/modals/ModalRoot.js

+  }
+
+  processProps(props = {}) {
+    import(`../../${props.path}`).then(


This is a bit of slight of hand here... because it appears that we're dynamically importing the modal each time, but since the modal open action is forcing you to pass in a Component, it means you need to manage importing it and then when the root imports it, it will come from cache. The reason I did that is so we're not forcing every modal to be dynamically loaded. We're leaving it up to the parent, which can lazy load it in, or can have it be part of a larger chunk.

rmisio · 2019-02-12T19:29:20Z

src/components/modals/SimpleMessage.js

@@ -0,0 +1,21 @@
+import React from 'react';


Just an example of a modal implementation. There's nothing really special about a Modal component. It's just a regular component that you could render in a modal window. The only difference is it needs a modulePath property so the ModalRoot knows where to get it.

With that said... I don't think modals need to live in the modals folder. They're just regular components that should live where is most appropriate for them in the folder structure.

This one happens to live in the modals folder, but that's just because it's a special very specific modal. In other words, the modals folder here is more of "things having to do with modals", rather than how we do it in v2 which is "all modals go here".

rmisio · 2019-02-12T19:30:17Z

src/components/pages/modals/Modals.js

@@ -0,0 +1,47 @@
+import React, { Component } from 'react';


A simple modal test page that can be accessed via the url /modals. It's basically in place cause I'll create a task for someone to style modals in the v2 style (all that scrolling magic, etc...) + responsively style them.

rmisio · 2019-02-12T19:32:01Z

src/reducers/discovery.js

+
+// selectors
+
+export const getCategories = createSelector(


Redux selectors - read about them! Basically often times the shape of the state tree for the reducer is slightly different than the ideal one for the UI. The selector is a way to go from the former to the latter. And, it utilizes memoization, so it does it in an efficient way.

rmisio · 2019-02-12T19:33:20Z

src/components/listings/CategoryBox.js

+    heading = <h1 className="h2 CategoryBox-heading">{props.heading}</h1>;
+  }
+
+  if (['tablet', 'desktop'].includes(props.breakpoint)) {


Look at how props.breakpoint is used in this file to see an example of how we use conditional markup depending on the breakpoint.

rmisio · 2019-02-12T19:33:44Z

src/components/listings/CategoryBox.scss

+      // idea is to eliminate page jumps as content loads in.
+      height: 635px;
+
+      @include mq(740px, 770px) {


Using the sass-mq lib for inline media queries.

rmisio · 2019-02-12T19:39:36Z

src/components/ui/Spinner.js

+  );
+}
+
+Spinner.defaultProps = {


We should probably use defaultProps and propTypes on most components at least as an implicit way of documenting things.

rmisio · 2019-02-12T20:29:11Z

src/components/listings/Grid.scss

+@import '../../styles/variables.scss';
+@import '../../styles/mixins.scss';
+
+.ListingsGrid {


I made this guy pretty fluid where it will just size up to the container you put it in. We could build up the responsive styling so it looks different on smaller devices. I imagine, we'd probably just want to stack the cards. I think that's what the Haven designs have.

rmisio · 2019-02-12T20:32:43Z

src/styles/layout.scss

+@import './variables.scss';
+@import './mixins.scss';
+
+// The idea of this class is so that rather than hard-coding some parent element to have a set width,


Trying to be really modular here with page padding and widths so we don't get burned like in v2 where we assumed a certain page width and by the time I went to try and make a full screen grid, I found major remodeling / refactoring was necessary. I think the navbar, chat, modal, etc... all would'v required some re-work. So, let's keep that in mind from the start. Hopefully, these classes are a step in the right direction.

rmisio · 2019-02-15T14:58:33Z

src/actions/discovery.js

@@ -0,0 +1,109 @@
+import { get } from 'axios';
+import { SEARCH_RANDOM_URL } from 'util/constants';


@jjeffryes One thing you might notice is that the project is set-up to support absolute imports relative to the src folder, which I think is a lot cooler than the standard where imports are all relative to a file.

With the formr, if you move the file, you don't need to change all the imports.

The one exception I've been doing is if it's a file in the same folder, then I may do import blah from './blah.js. It really depends whether you think the sibling files would stay together if they were moved.

jjeffryes · 2019-02-20T14:21:36Z

Git is saying the commits aren't signed, which is blocking the ability to merge. @rmisio can you check to make sure you're set up right for this repo?

rmisio · 2019-02-20T14:32:01Z

Git is saying the commits aren't signed, which is blocking the ability to merge. @rmisio can you check to make sure you're set up right for this repo?

@hoffmabc I have enough access to push to the repo, but apparently not enough for my PR to merged. Can you check what the issue is?

hoffmabc · 2019-02-20T14:35:47Z

@rmisio you do need to sign your commits. i'm not sure if you've been doing it before but that needs to be resolved even if you use admin rights to force push the code. did you change up your git settings?

prettier tweak testing prettier prettier please work test test mas husky wont work more test ugh this will never work test husky trust fall hola fools gold

… not being throttled

rmisio changed the title ~~Initial discover implementation~~ WIP - Initial discover implementation Feb 12, 2019

rmisio commented Feb 12, 2019

View reviewed changes

rmisio changed the title ~~WIP - Initial discover implementation~~ Initial discover implementation Feb 12, 2019

rmisio commented Feb 12, 2019

View reviewed changes

rmisio mentioned this pull request Feb 12, 2019

Style modals like v2 and make responsive #10

Open

rmisio commented Feb 15, 2019

View reviewed changes

jjeffryes approved these changes Feb 20, 2019

View reviewed changes

rmisio force-pushed the initial-skeleton branch from c52773d to fcd8256 Compare February 20, 2019 15:48

rmisio added 12 commits February 20, 2019 10:00

initial very rough shell of app + early incarnation of the modal

2a704b6

wip - clsoing singleton vs non-singleton modal

f5d5d8e

closing a singleton modal via a path option

330bb7c

some code cleanup

e95efd0

prettier first run

5703f3c

fixed issue where the logger middleware was not working

72bf1c3

testing something

775922d

prettier tweak testing prettier prettier please work test test mas husky wont work more test ugh this will never work test husky trust fall hola fools gold

running prettier manually

cb8ff99

rmoving debugging code

b52ba4f

initial routing and nav bar

5f75505

clean up th styling of the header nav

f18d663

wip - settings button on main nav bar

c836ee0

rmisio and others added 21 commits February 20, 2019 10:00

initial rough version of the listing card

88f6cc1

initial grid layout of listings grid

926dcba

implementing sass bp lib + a bp reducer

b52201f

forgot to save file

a98989f

some responsive styling of the listings grid and category box

259dbd9

Further responsive styling of the cat box

86abd3b

some category box style adjustments

99aaba0

wip - discovery catgory fetching

df4a6c8

created discovery action creators

dbb5e34

action creator + reducer for discover page + more responsive styling

38f083c

implemntd spinner component + fixed issue where discover fetches were…

f472f21

… not being throttled

implemented the catgory box fetching and fetchError states

c90e075

cateegory box fail state tweaks

23bb713

tweaking the category box search url

192b36a

implemented a modals test page

3bc271d

adding some default props and prop types to some components

a9a746e

adding deploy functionality via surge

c7bcdd2

ran prettier

f391623

trying to sign these commits

6dc24ca

take 2 - sign commits

c245749

take 3 - commit signing

fe6f025

rmisio force-pushed the initial-skeleton branch from fcd8256 to fe6f025 Compare February 20, 2019 16:01

rmisio merged commit 0cb44d0 into master Feb 20, 2019

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Initial discover implementation #8

Initial discover implementation #8

rmisio commented Feb 12, 2019

rmisio Feb 12, 2019

rmisio Feb 12, 2019

rmisio Feb 12, 2019

rmisio Feb 12, 2019

rmisio Feb 12, 2019

rmisio Feb 12, 2019

rmisio Feb 12, 2019 •

edited

rmisio Feb 12, 2019

rmisio Feb 12, 2019

rmisio Feb 15, 2019 •

edited

jjeffryes commented Feb 20, 2019

rmisio commented Feb 20, 2019

hoffmabc commented Feb 20, 2019

		@@ -0,0 +1,109 @@
		import { get } from 'axios';
		import { SEARCH_RANDOM_URL } from 'util/constants';

Initial discover implementation #8

Initial discover implementation #8

Conversation

rmisio commented Feb 12, 2019

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

rmisio Feb 12, 2019 • edited

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

rmisio Feb 15, 2019 • edited

Choose a reason for hiding this comment

jjeffryes commented Feb 20, 2019

rmisio commented Feb 20, 2019

hoffmabc commented Feb 20, 2019

rmisio Feb 12, 2019 •

edited

rmisio Feb 15, 2019 •

edited