Remove knowledge of default sorting order from parent component

Author: holly-cummins

src/components/extensions-list.js

@@ -3,7 +3,6 @@ import { useState } from "react"
 import Filters from "./filters/filters"
 import ExtensionCard from "./extension-card"
 import styled from "styled-components"
-import { timestampExtensionComparator } from "./sortings/timestamp-extension-comparator"
 import Sortings from "./sortings/sortings"
 
 const FilterableList = styled.div`
@@ -57,15 +56,17 @@ const ExtensionsList = ({ extensions, categories, downloadData }) => {
   const allExtensions = extensions.filter(extension => !extension.isSuperseded)
 
   const [filteredExtensions, setExtensions] = useState(allExtensions)
-  const [extensionComparator, setExtensionComparator] = useState(() => timestampExtensionComparator)
+  const [extensionComparator, setExtensionComparator] = useState(() => undefined)
 
   if (allExtensions) {
     // Exclude unlisted extensions from the count, even though we sometimes show them if there's a direct search for it
     const extensionCount = allExtensions.filter(
       extension => !extension.metadata.unlisted
     ).length
 
-    filteredExtensions.sort(extensionComparator)
+    if (extensionComparator) {
+      filteredExtensions.sort(extensionComparator)
+    }
 
     const countMessage =
       extensionCount === filteredExtensions.length

src/components/sortings/sortings.js

@@ -77,14 +77,14 @@ const colourStyles = {
 
 const key = "sort"
 const downloads = "downloads"
-
+const time = "time"
 const sortings = [
-  { label: "Most recently released", value: "time", comparator: timestampExtensionComparator },
+  { label: "Most recently released", value: time, comparator: timestampExtensionComparator },
   { label: "Alphabetical", value: "alpha", comparator: alphabeticalExtensionComparator },
   { label: "Downloads", value: downloads, comparator: downloadsExtensionComparator }]
 
 const Sortings = ({ sorterAction, downloadData }) => {
-  const [sort, setSort] = useQueryParamString(key, undefined, true)
+  const [sort, setSort] = useQueryParamString(key, time, true)
 
   const applySort = (entry) => {
     // We need to wrap our comparator functions in functions or they get called, which goes very badly
@@ -100,10 +100,8 @@ const Sortings = ({ sorterAction, downloadData }) => {
     applySort(selected)
   }
 
-
   const formattedDate = downloadData?.date ? format.format(new Date(Number(downloadData.date))) : ""
 
-
   return (
     <SortBar className="sortings">
       {sort === downloads &&