I need to reduce the complexity of this "algorithm". Now, I need to run sequentially through all the cases, and then also over the array elements, and it is clear that this is the most suboptimal path.
However, I don't know how to do this. How can you shorten the code for similar constructs? I am sure this is possible. Tell me please :)
const types = {
pictures: ["jpeg", "png", "apng", "avif", "gif", "jpg", ".webp"],
videos: ["mp4", "webm", "avchd", "flv", "mov", "wmv", "mkv", "avi"],
audio: ["mp3", "flac", "wav", "ogg"],
disk: ["iso"],
doc: ["doc", "docx"],
pp: ["ppt", "pptx", "pps", "ppsx", "pot", "potx"],
zip: ["zip", "rar", "tar", "arj", "cab", "lzh"],
css: ["css", "scss", "sass"],
};
export function setTypeIcon(type) {
const t = type.toLowerCase();
switch (t) {
case "dir":
return dir;
case "txt":
return txt;
case types.zip.find((el) => el === t):
return zip;
case types.pictures.find((el) => el === t):
return img;
case types.videos.find((el) => el === t):
return vid;
case types.audio.find((el) => el === t):
return aud;
case types.doc.find((el) => el === t):
return doc;
case types.pp.find((el) => el === t):
return powerpoint;
case types.disk.find((el) => el === t):
return iso;
case "xls":
return excel;
case "pdf":
return pdf;
case "otf":
return font;
case "js":
return js;
case types.css.find((el) => el === t):
return css;
case "psd":
return psd;
case "svg":
return svg;
default:
return def;
}
}
You can use a Map and directly lookup the icon by file extension:
const icons = new Map([
{icon: dir, types: ["dir"]},
{icon: txt, types: ["txt"]},
{icon: zip, types: ["zip", "rar", "tar", "arj", "cab", "lzh"]},
{icon: img, types: ["jpeg", "png", "apng", "avif", "gif", "jpg", ".webp"]},
{icon: vid, types: ["mp4", "webm", "avchd", "flv", "mov", "wmv", "mkv", "avi"]},
{icon: aud, types: ["mp3", "flac", "wav", "ogg"]},
{icon: doc, types: ["doc", "docx"]},
{icon: powerpoint, types: ["ppt", "pptx", "pps", "ppsx", "pot", "potx"]},
{icon: iso, types: ["iso"]},
{icon: excel, types: ["xls"]},
{icon: pdf, types: ["pdf"]},
{icon: font, types: ["otf"]},
{icon: js, types: ["js"]},
{icon: css, types: ["css", "scss", "sass"]},
{icon: psd, types: ["psd"]},
{icon: svg, types: ["svg"]},
].flatMap(({icon, types}) => types.map(type => [type, icon])));
export function setTypeIcon(type) {
const t = type.toLowerCase();
if (icons.has(t)) return icons.get(t);
else return def;
}
Because part of the thing that changes is an import, I think the way to make the code less repetitive would be to use dynamic import instead. Unfortunately, this'll require introducing the ability to handle the asynchronous nature of dynamic import. You could do something like:
const types = [
{
extensions: ["jpeg", "png", "apng", "avif", "gif", "jpg", ".webp"],
imgName: 'image', // used to map to, eg, "../assets/images/filetypes/image.png"
},
{
extensions: ["mp4", "webm", "avchd", "flv", "mov", "wmv", "mkv", "avi"],
imgName: 'vid',
},
// ...
];
const getImg = (imgName) => import(`../assets/images/filetypes/${imgName}.png`);
export const setTypeIcon = (type) => {
const matchingType = types.find(({ extensions }) => extensions.includes(type.toLowerCase());
return getImg(matchingType || 'def');
};
And then you'll have to consume the Promise in the caller and extract the value you want out of it.
You could also perform all the imports up front, at the beginning of your app, and then put it into the types structure, so as to make getImg synchronous. (dependency injection)