From a8fc2fcb6271c21fd730e25d1a3231b6734a6f64 Mon Sep 17 00:00:00 2001
From: Henrik Aspenes Vedal <henrikvedal@Henriks-MacBook-Pro.local>
Date: Wed, 22 Sep 2021 07:55:53 +0200
Subject: [PATCH 1/2] Lagt til card, knapper og litt css

---
 src/components/Posts/PostsSection.tsx | 26 ++++++++++++++++++++++++++
 1 file changed, 26 insertions(+)

diff --git a/src/components/Posts/PostsSection.tsx b/src/components/Posts/PostsSection.tsx
index 6cdca30..4dfeea6 100644
--- a/src/components/Posts/PostsSection.tsx
+++ b/src/components/Posts/PostsSection.tsx
@@ -1,5 +1,7 @@
 import { FC, useCallback, useEffect, useState } from "react"
 import { find, map, reject, sortBy } from "lodash"
+import { FaSortUp, FaSortDown, FaSort } from "react-icons/fa"
+import clsx from "clsx"
 
 import useRequestsAndAuth from "../../hooks/useRequestsAndAuth"
 import { Post as PostType, ParentPost } from "../../api/Post"
@@ -37,6 +39,29 @@ const PostsSection: FC<PostsSectionProps> = ({ doorNumber }) => {
   // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [!isAuthenticated && !isAdmin, fetchPosts, doorNumber, fetchLikes])
 
+  const getFilters = () => (
+    /***
+       *
+       */
+    <div className="flex align-middle text-gray-600 font-light text-center p-2 rounded-md sm:p-6 bg-gray-100">
+      <span className={clsx(
+        "hover:underline hover:cursor-pointer", "flex flex-row justify-center items-center",
+        "uppercase text-sm sm:text-lg sm:"
+      )}>
+        <FaSort />
+        Sorter etter dato
+
+      </span>
+      <span className={clsx(
+        "hover:underline hover:cursor-pointer", "flex flex-row justify-center items-center",
+        "uppercase mx-8 sm:tracking-wider text-sm sm:text-lg"
+      )}>
+        <FaSort />
+        Sorter etter likerklikk
+      </span>
+    </div>
+  )
+
   // Refresh an entire post chain from the backend. Use this when updating a
   // post to easily get the post tree into the correct state.
   // This is much easier than wrangling all of that state on the client.
@@ -67,6 +92,7 @@ const PostsSection: FC<PostsSectionProps> = ({ doorNumber }) => {
         )
       }
       <div className="space-y-4">
+        {getFilters()}
         {map(posts, (post) =>
           <Post
             key={post.uuid}

From adbcd9fc99f03e4e73d59b89bb7bd0383c9f979d Mon Sep 17 00:00:00 2001
From: Henrik Aspenes Vedal <henrikvedal@Henriks-MacBook-Pro.local>
Date: Mon, 18 Oct 2021 18:46:48 +0200
Subject: [PATCH 2/2] =?UTF-8?q?Sortering=20for=20likes=20og=20dato=20er=20?=
 =?UTF-8?q?implementer.=20Neste=20er=20for=20programmeringspr=C3=A5k?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/Posts/PostsSection.tsx | 49 +++++++++++++++++++++------
 1 file changed, 39 insertions(+), 10 deletions(-)

diff --git a/src/components/Posts/PostsSection.tsx b/src/components/Posts/PostsSection.tsx
index eb9d11b..61dc14a 100644
--- a/src/components/Posts/PostsSection.tsx
+++ b/src/components/Posts/PostsSection.tsx
@@ -1,11 +1,12 @@
-import { FC } from "react"
-import {  map } from "lodash"
+import { FC, useEffect, useState } from "react"
+import {  map, sortBy } from "lodash"
 import clsx from "clsx"
 import { FaSort } from "react-icons/fa"
 
 import Button from "../Button"
 import useBoolean from "../../hooks/useBoolean"
 import { usePosts } from "../../api/requests"
+import { ParentPost } from "../../api"
 
 import Post from "./Post"
 import PostForm from "./PostForm"
@@ -18,19 +19,34 @@ type PostsSectionProps = {
 
 const PostsSection: FC<PostsSectionProps> = ({ door }) => {
   const { data: posts } = usePosts(door)
-
-  // const [postsWithLikes, setPostsWithLikes] = useState<(ParentPost & { liked: boolean })[]>([])
+  const [postData, setPostData] = useState<ParentPost[] | undefined>()
+  const [isSortedByLikes, setIsSortedByLikes] = useState(false)
+  const [isSortedByDate, setIsSortedByDate] = useState(false)
   const [isFormVisible, showForm, hideForm] = useBoolean(true)
+
+  useEffect(() => {
+    setPostData(posts)
+  }, [posts])
   const getFilters = () => (
-    /***
-       *
-       */
     <div className="flex align-middle text-gray-600 font-light text-center p-2 rounded-md sm:p-6 bg-gray-100">
       <span
         className={clsx(
           "hover:underline hover:cursor-pointer", "flex flex-row justify-center items-center",
           "uppercase text-sm sm:text-lg sm:"
-        )}>
+        )}
+        onClick={() => {
+          if (postData) {
+            let sortedData
+            if (!isSortedByDate) {
+              sortedData = sortBy(posts, ["created_at"]).reverse()
+              setIsSortedByDate(true)
+            } else {
+              sortedData = sortBy(posts, ["created_at"])
+              setIsSortedByDate(false)
+            }
+            setPostData(sortedData)
+          }
+        }}>
         <FaSort />
         Sorter etter dato
 
@@ -39,7 +55,20 @@ const PostsSection: FC<PostsSectionProps> = ({ door }) => {
         className={clsx(
           "hover:underline hover:cursor-pointer", "flex flex-row justify-center items-center",
           "uppercase mx-8 sm:tracking-wider text-sm sm:text-lg"
-        )}>
+        )}
+        onClick={() => {
+          if (postData) {
+            let sortedData
+            if (!isSortedByLikes) {
+              sortedData = sortBy(posts, ["likes"]).reverse()
+              setIsSortedByLikes(true)
+            } else {
+              sortedData = sortBy(posts, ["likes"])
+              setIsSortedByLikes(false)
+            }
+            setPostData(sortedData)
+          }
+        }}>
         <FaSort />
         Sorter etter likerklikk
       </span>
@@ -59,7 +88,7 @@ const PostsSection: FC<PostsSectionProps> = ({ door }) => {
       }
       <div className="space-y-4">
         {getFilters()}
-        {map(posts, (post) =>
+        {posts && map(postData, (post) =>
           <Post
             key={post.uuid}
             door={door}