Boy-scout: alphabetic ordering in the tags window

client/src/components/windows/manage_tags/ManageTagsWindow.tsx

@@ -164,15 +164,17 @@ export function SingleTag(props: {
             {props.prependElems}
             <TagChip transparent={tag.proposeDelete} label={tagLabel} />
         </Box>
-        {hasChildren && expanded && tag.children.map((child: any) => <SingleTag
-            tag={child}
-            prependElems={[...props.prependElems,
-            <TagChip transparent={true} label={tagLabel} />,
-            <Typography variant="h5">/</Typography>]}
-            dispatch={props.dispatch}
-            state={props.state}
-            changedTags={props.changedTags}
-        />)}
+        {hasChildren && expanded && tag.children
+            .sort((a: any, b: any) => a.name.localeCompare(b.name))
+            .map((child: any) => <SingleTag
+                tag={child}
+                prependElems={[...props.prependElems,
+                <TagChip transparent={true} label={tagLabel} />,
+                <Typography variant="h5">/</Typography>]}
+                dispatch={props.dispatch}
+                state={props.state}
+                changedTags={props.changedTags}
+            />)}
         <ManageTagMenu
             position={menuPos}
             open={menuPos !== null}
@@ -430,15 +432,17 @@ export default function ManageTagsWindow(props: {
                 mt={4}
                 width="80%"
             >
-                {tags && tags.length && tags.map((tag: any) => {
-                    return <SingleTag
-                        tag={tag}
-                        prependElems={[]}
-                        dispatch={props.dispatch}
-                        state={props.state}
-                        changedTags={changedTags}
-                    />;
-                })}
+                {tags && tags.length && tags
+                    .sort((a: any, b: any) => a.name.localeCompare(b.name))
+                    .map((tag: any) => {
+                        return <SingleTag
+                            tag={tag}
+                            prependElems={[]}
+                            dispatch={props.dispatch}
+                            state={props.state}
+                            changedTags={changedTags}
+                        />;
+                    })}
                 <Box mt={3}><CreateTagButton onClick={(e: any) => { onOpenNewTagMenu(e) }} /></Box>
             </Box>
         </Box>