Building a File directory display component using React
Tags: react, javascript, html, css
Published: 2022-04-19 18:57:23

---
title: Building a File directory display component using React
published: true
description: Hello fellow humanoids. In this post we will build a file directory display component in react
tags: React, javascript, html, css
cover_image: https://dev-to-uploads.s3.amazonaws.com/uploads/articles/njzknqwuvy50i9xdbww5.jpg
---

## What is this post about ?
Hello fellow humanoids. Today we will try to implement a basic file directory display component. This post won't be focused much on the styling rather the bare minimum logic required. 

Check out the app here : [File Viewer](https://vigneshiyergithub.github.io/file-viewer/)

![File Viewer app](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/jef4h77jh3m48xzcp6am.png)

## Content
* File data structure 
* Generating Directory contents 
* Displaying File Viewer

Lets go deep dive into each one and explore how it was implemented.

## File data structure
```
export class File {
  constructor(fileName, childFiles, fileType) {
    this.fileName = fileName;
    this.childFiles = childFiles;
    this.fileType = fileType;
  }

  fileName = "";
  childFiles = [];
  fileType = "";
}
```

## Generating Directory contents
Let's check out the basic file structure that we are planning to showcase in this example
```
 src
   |-components
       |-first.js
       |-second.js
       |-third.js
       |-fourth.exe
       |-fifth.doc
       |-sixth.txt 
   |-App.js
```
Once you have visualized the file structure, now it's time to 
initialize the files variable with the data structure we defined above
```
const COMPONENTS = [
  "first.js",
  "second.js",
  "third.js",
  "fourth.exe",
  "fifth.doc",
  "six.txt"
];

const files = [
  new File(
    "src",
    [
      new File(
        "components",
        [...COMPONENTS].map((comp) => new File(comp, [], "file")),
        "directory"
      ),
      new File("App.js", [], "file")
    ],
    "directory"
  )
];
```

## Displaying File Viewer

```
const FileViewer = () => {
  console.log(files);
  return (
    <Wrapper>
      <FileViewerContainer>
        {files.map((file, index) => {
          return <FilesViewer file={file} key={index} level={0} />;
        })}
      </FileViewerContainer>
    </Wrapper>
  );
};

const FilesViewer = ({ file, level }) => {
  const { fileType, childFiles, fileName } = file;
  const [expanded, setExpanded] = useState(false);
  const onToggle = () => {
    setExpanded((ex) => !ex);
  };
  return (
    <>
      <FilesContainer paddingLeft={`${(level + 1) * 2}rem`}>
        {fileType === "directory" && (
          <IconContainer onClick={onToggle}>
            {expanded ? <ExpandLessIcon /> : <ExpandMoreIcon />}
          </IconContainer>
        )}
        <FileTitle>{fileName}</FileTitle>
      </FilesContainer>
      {childFiles.length > 0 &&
        expanded &&
        file.childFiles.map((childFile, index) => {
          return <FilesViewer file={childFile} key={index} level={level + 1} />;
        })}
    </>
  );
};

const IconContainer = styled.div`
  align-self: center;
  cursor: pointer;
`;

const ExpandLessIcon = styled(MdExpandLess)`
  width: 2rem;
  align-self: center;
`;

const ExpandMoreIcon = styled(MdExpandMore)`
  width: 2rem;
  align-self: center;
`;

const Wrapper = styled.div`
  height: 100vh;
  width: 100vw;
  display: flex;
  justify-content: center;
  align-items: center;
`;

const FileViewerContainer = styled.div`
  width: 60vw;
  max-height: 80vh;
  display: flex;
  flex-direction: column;
  background: hsl(210deg, 30%, 8%);
  border: 1px solid hsl(210deg, 15%, 20%);
  border-radius: 1rem;
  color: #e9dd78;
  overflow-y: auto;
  justify-content: center;
`;

const FilesContainer = styled.div`
  width: fit-content;
  height: 3rem;
  padding-left: ${(props) => props?.paddingLeft ?? 0};
  display: flex;
  flex-direction: row;
`;

const FileTitle = styled.div`
  font-size: x-large;
  align-self: center;
`;
```

## Conclusion
This app was made as part of learning new components which are used in real life applications. 
Stay safe and lend a hand to another :) 

* [Vignesh Iyer](https://vigneshiyer.netlify.app/)