Implement post categories

src/TinyBlog-Components/TBApplicationRootComponent.class.st

@@ -4,9 +4,8 @@ Class {
 	#instVars : [
 		'main'
 	],
-	#category : 'TinyBlog-Components-Components',
+	#category : 'TinyBlog-Components',
-	#package : 'TinyBlog-Components',
+	#package : 'TinyBlog-Components'
-	#tag : 'Components'
 }
 
 { #category : 'testing' }

src/TinyBlog-Components/TBCategoriesComponent.class.st

@@ -0,0 +1,61 @@
+Class {
+	#name : 'TBCategoriesComponent',
+	#superclass : 'TBScreenComponent',
+	#instVars : [
+		'categories',
+		'postsList'
+	],
+	#category : 'TinyBlog-Components',
+	#package : 'TinyBlog-Components'
+}
+
+{ #category : 'instance creation' }
+TBCategoriesComponent class >> categories: categories postsList: aTBScreen [
+	^ self new categories: categories; postsList: aTBScreen
+]
+
+{ #category : 'accessing' }
+TBCategoriesComponent >> categories [
+
+	^ categories
+]
+
+{ #category : 'accessing' }
+TBCategoriesComponent >> categories: anObject [
+
+	categories := anObject
+]
+
+{ #category : 'accessing' }
+TBCategoriesComponent >> postsList [
+
+	^ postsList
+]
+
+{ #category : 'accessing' }
+TBCategoriesComponent >> postsList: anObject [
+
+	postsList := anObject
+]
+
+{ #category : 'actions' }
+TBCategoriesComponent >> renderCategoryLinkOn: html with: aCategory [
+	html listGroupLinkedItem
+		class: 'active' if: aCategory = self postsList currentCategory;
+		callback: [ self selectCategory: aCategory ];
+		with: aCategory 
+]
+
+{ #category : 'actions' }
+TBCategoriesComponent >> renderContentOn: html [
+	html listGroup: [ 
+		html listGroupItem
+			with: [ html strong: 'Categories' ].
+		categories do: [ :cat |
+			self renderCategoryLinkOn: html with: cat ] ]
+]
+
+{ #category : 'actions' }
+TBCategoriesComponent >> selectCategory: aCategory [
+	postsList currentCategory: aCategory
+]

src/TinyBlog-Components/TBHeaderComponent.class.st

@@ -1,9 +1,8 @@
 Class {
 	#name : 'TBHeaderComponent',
 	#superclass : 'SBSComponent',
-	#category : 'TinyBlog-Components-Components',
+	#category : 'TinyBlog-Components',
-	#package : 'TinyBlog-Components',
+	#package : 'TinyBlog-Components'
-	#tag : 'Components'
 }
 
 { #category : 'rendering' }

src/TinyBlog-Components/TBPostComponent.class.st

@@ -4,9 +4,8 @@ Class {
 	#instVars : [
 		'post'
 	],
-	#category : 'TinyBlog-Components-Components',
+	#category : 'TinyBlog-Components',
-	#package : 'TinyBlog-Components',
+	#package : 'TinyBlog-Components'
-	#tag : 'Components'
 }
 
 { #category : 'initialization' }

src/TinyBlog-Components/TBPostsListComponent.class.st

@@ -2,24 +2,58 @@ Class {
 	#name : 'TBPostsListComponent',
 	#superclass : 'TBScreenComponent',
 	#instVars : [
-		'postComponents'
+		'postComponents',
+		'currentCategory'
 	],
-	#category : 'TinyBlog-Components-Components',
+	#category : 'TinyBlog-Components',
-	#package : 'TinyBlog-Components',
+	#package : 'TinyBlog-Components'
-	#tag : 'Components'
 }
 
+{ #category : 'rendering' }
+TBPostsListComponent >> basicRenderCategoriesOn: html [
+	html render: self categoriesComponent
+]
+
+{ #category : 'rendering' }
+TBPostsListComponent >> basicRenderPostsOn: html [
+	self readSelectedPosts do: [ :p | html render: (self postComponentFor: p) ]
+]
+
+{ #category : 'rendering' }
+TBPostsListComponent >> categoriesComponent [
+	^ TBCategoriesComponent
+		categories: self blog allCategories 
+		postsList: self
+]
+
 { #category : 'initialization' }
 TBPostsListComponent >> children [
 	^ self postComponents, super children
 ]
 
+{ #category : 'accessing' }
+TBPostsListComponent >> currentCategory [
+
+	^ currentCategory
+]
+
+{ #category : 'accessing' }
+TBPostsListComponent >> currentCategory: anObject [
+
+	currentCategory := anObject
+]
+
 { #category : 'initialization' }
 TBPostsListComponent >> initialize [ 
 	super initialize.
 	postComponents := OrderedCollection new
 ]
 
+{ #category : 'rendering' }
+TBPostsListComponent >> postComponentFor: aPost [
+	^ TBPostComponent new post: aPost
+]
+
 { #category : 'initialization' }
 TBPostsListComponent >> postComponents [
 	postComponents := self readSelectedPosts
@@ -29,13 +63,44 @@ TBPostsListComponent >> postComponents [
 
 { #category : 'initialization' }
 TBPostsListComponent >> readSelectedPosts [
-	^ self blog allVisibleBlogPosts
+	^ self currentCategory
+		ifNil: [ self blog allVisibleBlogPosts ]
+		ifNotNil: [ self blog allVisibleBlogPostsFromCategory: self currentCategory ]
+]
+
+{ #category : 'rendering' }
+TBPostsListComponent >> renderCategoryColumnOn: html [
+	html column 
+		extraSmallSize: 12;
+		smallSize: 2;
+		mediumSize: 4;
+		with: [ self basicRenderCategoriesOn: html ]
 ]
 
 { #category : 'rendering' }
 TBPostsListComponent >> renderContentOn: html [
 	super renderContentOn: html.
 	html container: [
-		self postComponents do: [ :p |
+		html row
-			html render: p ] ]
+			with: [ 
+				html column 
+					extraSmallSize: 12;
+					smallSize: 2;
+					mediumSize: 4;
+					with: [ html render: self categoriesComponent ].
+		html column
+			extraSmallSize: 12;
+			smallSize: 10;
+			mediumSize: 8;
+			with: [ 
+				self postComponents do: [ :p | html render: (self postComponentFor: p) ] ] ] ]
+]
+
+{ #category : 'rendering' }
+TBPostsListComponent >> renderPostColumnOn: html [
+	html column 
+		extraSmallSize: 12;
+		smallSize: 2;
+		mediumSize: 4;
+		with: [ self basicRenderPostsOn: html ]
 ]

src/TinyBlog-Components/TBScreenComponent.class.st

@@ -4,9 +4,8 @@ Class {
 	#instVars : [
 		'header'
 	],
-	#category : 'TinyBlog-Components-Components',
+	#category : 'TinyBlog-Components',
-	#package : 'TinyBlog-Components',
+	#package : 'TinyBlog-Components'
-	#tag : 'Components'
 }
 
 { #category : 'acccessing' }

src/TinyBlog-Tests/TBBlogTest.class.st

@@ -8,8 +8,7 @@ Class {
 		'previousRepository'
 	],
 	#category : 'TinyBlog-Tests',
-	#package : 'TinyBlog',
+	#package : 'TinyBlog-Tests'
-	#tag : 'Tests'
 }
 
 { #category : 'running' }

src/TinyBlog-Tests/TBPostTest.class.st

@@ -2,8 +2,7 @@ Class {
 	#name : 'TBPostTest',
 	#superclass : 'TestCase',
 	#category : 'TinyBlog-Tests',
-	#package : 'TinyBlog',
+	#package : 'TinyBlog-Tests'
-	#tag : 'Tests'
 }
 
 { #category : 'tests' }

src/TinyBlog-Tests/package.st

@@ -0,0 +1 @@
+Package { #name : 'TinyBlog-Tests' }