Optimize sidebar sort order

src/camera/index.ts

@@ -8,11 +8,13 @@ export type Camera = {
   model: string
 };
 
-export type Cameras = {
+export type CameraWithCount = {
   cameraKey: string
   camera: Camera
   count: number
-}[];
+}
+
+export type Cameras = CameraWithCount[];
 
 export const createCameraKey = ({ make, model }: Camera) =>
   parameterize(`${make}-${model}`);
@@ -23,6 +25,15 @@ export const getCameraFromKey = (cameraKey: string): Camera => {
   return { make, model };
 };
 
+export const sortCamerasWithCount = (
+  a: CameraWithCount,
+  b: CameraWithCount,
+) => {
+  const aText = formatCameraText(a.camera);
+  const bText = formatCameraText(b.camera);
+  return aText.localeCompare(bText);
+};
+
 export const cameraFromPhoto = (
   photo: Photo | undefined,
   fallback?: Camera | string,
@@ -35,7 +46,7 @@ export const cameraFromPhoto = (
 
 export const formatCameraText = (
   { make, model }: Camera,
-  includeMakeApple = true,
+  includeMakeApple?: boolean,
 ) =>
   make === 'Apple' && !includeMakeApple
     ? model

src/camera/meta.ts

@@ -20,7 +20,7 @@ export const titleForCamera = (
   explicitCount?: number,
 ) => [
   'Shot on',
-  formatCameraText(cameraFromPhoto(photos[0], camera), false),
+  formatCameraText(cameraFromPhoto(photos[0], camera)),
   photoQuantityText(explicitCount ?? photos.length),
 ].join(' ');
 

src/photo/PhotoGridSidebar.tsx

@@ -1,4 +1,4 @@
-import { Cameras } from '@/camera';
+import { Cameras, sortCamerasWithCount } from '@/camera';
 import PhotoCamera from '@/camera/PhotoCamera';
 import HeaderList from '@/components/HeaderList';
 import PhotoTag from '@/tag/PhotoTag';
@@ -42,14 +42,16 @@ export default function PhotoGridSidebar({
           size={13}
           className="text-icon translate-y-[-0.25px]"
         />}
-        items={cameras.map(({ cameraKey, camera, count }) =>
-          <PhotoCamera
-            key={cameraKey}
-            camera={camera}
-            showIcon={false}
-            countOnHover={count}
-            hideApple
-          />)}
+        items={cameras
+          .sort(sortCamerasWithCount)
+          .map(({ cameraKey, camera, count }) =>
+            <PhotoCamera
+              key={cameraKey}
+              camera={camera}
+              showIcon={false}
+              countOnHover={count}
+              hideApple
+            />)}
       />}
       {simulations.length > 0 && <HeaderList
         title="Films"

src/services/postgres.ts

@@ -318,7 +318,7 @@ const sqlGetUniqueTags = async () => sql`
   FROM photos
   WHERE hidden IS NOT TRUE
   GROUP BY tag
-  ORDER BY count DESC
+  ORDER BY tag ASC
 `.then(({ rows }): Tags => rows.map(({ tag, count }) => ({
     tag: tag as string,
     count: parseInt(count, 10),
@@ -328,7 +328,7 @@ const sqlGetUniqueTagsHidden = async () => sql`
   SELECT DISTINCT unnest(tags) as tag, COUNT(*)
   FROM photos
   GROUP BY tag
-  ORDER BY count DESC
+  ORDER BY tag ASC
 `.then(({ rows }): Tags => rows.map(({ tag, count }) => ({
     tag: tag as string,
     count: parseInt(count, 10),
@@ -339,7 +339,7 @@ const sqlGetUniqueCameras = async () => sql`
   FROM photos
   WHERE hidden IS NOT TRUE
   GROUP BY make, model
-  ORDER BY camera DESC
+  ORDER BY camera ASC
 `.then(({ rows }): Cameras => rows.map(({ make, model, count }) => ({
     cameraKey: createCameraKey({ make, model }),
     camera: { make, model },
@@ -351,7 +351,7 @@ const sqlGetUniqueFilmSimulations = async () => sql`
   FROM photos
   WHERE hidden IS NOT TRUE AND film_simulation IS NOT NULL
   GROUP BY film_simulation
-  ORDER BY film_simulation DESC
+  ORDER BY film_simulation ASC
 `.then(({ rows }): FilmSimulations => rows
     .map(({ film_simulation, count }) => ({
       simulation: film_simulation as FilmSimulation,