-
+
);
diff --git a/app/javascript/listings/singleListing/Header.jsx b/app/javascript/listings/singleListing/Header.jsx
index f2a75e975..a3b150ff7 100644
--- a/app/javascript/listings/singleListing/Header.jsx
+++ b/app/javascript/listings/singleListing/Header.jsx
@@ -2,27 +2,34 @@ import PropTypes from 'prop-types';
import { h } from 'preact';
import listingPropTypes from './listingPropTypes';
import DropdownMenu from './DropdownMenu';
+import TagLinks from './TagLinks';
-const Header = ({ listing, currentUserId, onTitleClick }) => {
+const Header = ({ listing, currentUserId, onTitleClick, onAddTag }) => {
const { id, user_id: userId, category, slug, title } = listing;
return (
-
+
);
};
Header.propTypes = {
listing: listingPropTypes.isRequired,
+ onAddTag: PropTypes.func.isRequired,
currentUserId: PropTypes.number,
onTitleClick: PropTypes.func.isRequired,
};
diff --git a/app/javascript/listings/singleListing/SingleListing.jsx b/app/javascript/listings/singleListing/SingleListing.jsx
new file mode 100644
index 000000000..92d26faa2
--- /dev/null
+++ b/app/javascript/listings/singleListing/SingleListing.jsx
@@ -0,0 +1,104 @@
+import { h, Component } from 'preact';
+import PropTypes from 'prop-types';
+
+import Header from './Header';
+import AuthorInfo from './AuthorInfo';
+import listingPropTypes from './listingPropTypes';
+
+export class SingleListing extends Component {
+
+ listingContent = (listing, currentUserId, onChangeCategory, onOpenModal, onAddTag) => {
+ return (
+
+ );
+ };
+
+ listingInline = (listing, currentUserId, onChangeCategory, onOpenModal, onAddTag) => {
+ return (
+
+
+ {this.listingContent(
+ listing,
+ currentUserId,
+ onChangeCategory,
+ onOpenModal,
+ onAddTag
+ )}
+
+
+ );
+ };
+
+ listingModal = (listing, currentUserId, onChangeCategory, onOpenModal, onAddTag) => {
+ return (
+
+
+ {this.listingContent(
+ listing,
+ currentUserId,
+ onChangeCategory,
+ onOpenModal,
+ onAddTag,
+ )}
+
+
+ );
+ };
+
+ render() {
+ const { listing, currentUserId, onChangeCategory, onOpenModal, isOpen, onAddTag } = this.props;
+ return (
+ isOpen ?
+ this.listingModal(
+ listing,
+ currentUserId,
+ onChangeCategory,
+ onOpenModal,
+ onAddTag
+ )
+ :
+ this.listingInline(
+ listing,
+ currentUserId,
+ onChangeCategory,
+ onOpenModal,
+ onAddTag
+ )
+ );
+ }
+}
+
+SingleListing.propTypes = {
+ listing: listingPropTypes.isRequired,
+ onOpenModal: PropTypes.func.isRequired,
+ onChangeCategory: PropTypes.func.isRequired,
+ isOpen: PropTypes.bool.isRequired,
+ currentUserId: PropTypes.number,
+ onAddTag: PropTypes.func.isRequired
+};
+
+SingleListing.defaultProps = {
+ currentUserId: null,
+};
+
+SingleListing.displayName = 'SingleListing';
diff --git a/app/javascript/listings/singleListing/TagLinks.jsx b/app/javascript/listings/singleListing/TagLinks.jsx
index de11107de..ad33cbf00 100644
--- a/app/javascript/listings/singleListing/TagLinks.jsx
+++ b/app/javascript/listings/singleListing/TagLinks.jsx
@@ -2,15 +2,17 @@ import PropTypes from 'prop-types';
import { h } from 'preact';
const TagLinks = ({ tags, onClick }) => (
-
+
{tags.length
? tags.map((tag) => {
return (
onClick(e, tag)}
+ className="crayons-tag"
data-no-instant
>
+ #
{tag}
);
diff --git a/app/javascript/listings/singleListing/index.jsx b/app/javascript/listings/singleListing/index.jsx
deleted file mode 100644
index 768ab2bbc..000000000
--- a/app/javascript/listings/singleListing/index.jsx
+++ /dev/null
@@ -1,57 +0,0 @@
-import PropTypes from 'prop-types';
-import { h } from 'preact';
-
-import Header from './Header';
-import TagLinks from './TagLinks';
-import AuthorInfo from './AuthorInfo';
-import listingPropTypes from './listingPropTypes';
-
-const SingleListing = ({
- listing,
- currentUserId,
- onAddTag,
- onChangeCategory,
- onOpenModal,
- isOpen,
-}) => {
- const definedClass = isOpen
- ? 'single-listing single-listing--opened'
- : 'single-listing';
-
- return (
-
- );
-};
-
-SingleListing.propTypes = {
- listing: listingPropTypes.isRequired,
- onAddTag: PropTypes.func.isRequired,
- onOpenModal: PropTypes.func.isRequired,
- onChangeCategory: PropTypes.func.isRequired,
- isOpen: PropTypes.bool.isRequired,
- currentUserId: PropTypes.number,
-};
-
-SingleListing.defaultProps = {
- currentUserId: null,
-};
-
-export default SingleListing;
diff --git a/app/javascript/listings/utils.js b/app/javascript/listings/utils.js
index 0a9683031..0e5d93d66 100644
--- a/app/javascript/listings/utils.js
+++ b/app/javascript/listings/utils.js
@@ -8,6 +8,7 @@ export const MATCH_LISTING = [
'single-listing-container__inner',
'listing-filters',
'listings-modal-background',
+ 'close-listing-modal',
];
export function updateListings(listings) {
@@ -45,11 +46,7 @@ function resizeMasonryItem(item) {
window.getComputedStyle(grid).getPropertyValue('grid-row-gap'),
10,
);
- const rowHeight = parseInt(
- window.getComputedStyle(grid).getPropertyValue('grid-auto-rows'),
- 10,
- );
-
+ const rowHeight = 0;
const rowSpan = Math.ceil(
(item.querySelector('.listing-content').getBoundingClientRect().height +
rowGap) /
diff --git a/app/views/listings/index.html.erb b/app/views/listings/index.html.erb
index f37dcef08..dc0a1c7e0 100644
--- a/app/views/listings/index.html.erb
+++ b/app/views/listings/index.html.erb
@@ -26,15 +26,22 @@
<% end %>
-
-
-
- data-displayedlisting="<%= @displayed_listing_json %> "
- <% end %>>
-
-
+
+
+
+ data-displayedlisting="<%= @displayed_listing_json %> "
+ <% end %>
+>
+
<%= javascript_packs_with_chunks_tag "listings", defer: true %>
diff --git a/spec/requests/listings_spec.rb b/spec/requests/listings_spec.rb
index 14cd89d84..40be0f040 100644
--- a/spec/requests/listings_spec.rb
+++ b/spec/requests/listings_spec.rb
@@ -537,25 +537,6 @@ context "when running the specs that were previously in another file" do
}
end
- describe "GET /listings" do
- it "has page content" do
- get "/listings"
- expect(response.body).to include("listing-filters")
- end
-
- it "has page content for category page" do
- get "/listings/saas"
- expect(response.body).to include("listing-filters")
- end
- end
-
- describe "GETS /listings/new" do
- it "has page content" do
- get "/listings"
- expect(response.body).to include("listing-filters")
- end
- end
-
describe "POST /listings" do
before do
create_list(:credit, 20, user_id: user.id)