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;
  }
}

CodePudding user response：

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)

CodePudding user response：

Consider putting your directory names with the list of possible file types. This would make it easier to maintain over time. you also wouldn't have to manage individual variables for each directly name.

Here is a solution using a Map object. I've store the type lists as a comma separated string to make searching easier. I've made the value the directory name.

Then, all you have to do is a simple iteration to find and return the directory.

Note: Technically, you shouldn't really return out of a loop. So technically you would create a variable outside the loop to hold the value and return that variable - rather than returning from within the loop.

const dirs = new Map();
dirs.set("jpeg, png, apng, avif, gif, jpg, webp", '../assets/images/filetypes/image.png');
dirs.set("doc, docx", '../assets/images/filetypes/docment.png');
dirs.set("css, scss, sass", '../assets/images/filetypes/css.png');

function setTypeIcon(type){
  for(let [key, value] of dirs.entries()){
    if(!key.includes(type)) continue;
    return value;
  }
}
console.log(setTypeIcon("apng"));
console.log(setTypeIcon("scss"));

CodePudding user response：

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;
}