A programming paradigm is a way of thinking when constructing software, other examples of programming paradigms include object-oriented programming and procedural programming.
\nFP is the process of building software by composing pure functions, avoiding shared state, mutable data(changeable), and side-effects. Functional programming is declarative rather than imperative, and the application state flows through pure functions. Contrast with object-oriented programming, where the application state is usually shared and colocated with methods in objects or sometimes the state is being separated into its own object.
\nThis is when the same input that gives the same output always in some way it is similar to the stateless object(Has no side-effects).
\nThis is when the process of combining two or more functions in order to produce a new function or perform some computation. For example, composition f . g (the dot means “composed with”) is equivalent to f(g(x)) in JavaScript.This is really useful when applying the dependency inversion principle. Better check this article out!\nThe dependency inversion principle
\nMeanwhile, This is any variable, object, or memory space that exists in a shared scope, can be delivered to any function as a parameter as the property of an object being passed between scopes. A shared scope can include global scope or closure scopes. Often, in object-oriented programming, objects are shared between scopes by adding properties to other objects.
\nif you want to escape this article for the code you can find here :upsidedownface:\n{% github https://github.com/IbrahimShamma99/file-upload %}
\nI assume you have already installed npm, NodeJS & MongoDB, we need to create a react app.\nNOTE: remember to put your repos on an organized folder structure.\nOpen the terminal and use the following commands:
\nnpx create-react-app file-upload-mern\ncd ./file-upload-mernAlso, we want to use axios to send the file to the server instance, to install axios:
\nnpm i axioshere we created the react client-side app, we end with a file structure like this:
\nfile-upload-mern\n├── .gitignore\n├── public\n├── package.json \n├── src\n│ └── App.js\n│ └── index.js\n│ └── App.css\n│ └── index.css\n│ └── serverWorker.js\n│ └── setupTests.js\n├── README.mdNow, we need now to create the server-side app also, on the folder file-upload-mern write the following on the terminal:
mkdir server\ncd ./server\nnpm init -y\ntouch server.js\ntouch model.js\nmkdir publicTo make sure we are on the same page this is the final file structure scheme:
\nfile-upload-mern\n├── .gitignore\n├── public\n├── package.json \n├── src\n│ └── App.js\n│ └── index.js\n│ └── App.css\n│ └── index.css\n│ └── serverWorker.js\n│ └── setupTests.js\n├── server\n│ └── package.json\n│ └── public \n│ └── server.js\n│ └── node_modules\n│ └── model.js\n├── README.mdTo install the backend dependencies:
\nnpm i express\nnpm i mongoose\nnpm i multerTo make things clear about the dependencies we installed:
\nNow we created the server and the client sides so move to the next point.\n
First, we will start with the client :unicorn: :top: code by heading to /src/App.js\nto write the following:
\n// destination /src/App.js\n\nimport React from 'react';\nimport './App.css';\nimport axios from 'axios';\n\nclass App extends React.Component {\n\n constructor(props) {\n super(props);\n this.state ={\n file: null\n };\n this.onFormSubmit = this.onFormSubmit.bind(this);\n this.onChange = this.onChange.bind(this);\n }\n onFormSubmit(e){\n e.preventDefault();\n const formData = new FormData();\n formData.append('myfile',this.state.file);\n const config = {\n headers: {\n 'content-type': 'multipart/form-data'\n }\n };\n axios.post(\"http://localhost:5000/upload\",formData,config)\n .then((response) => {\n alert(\"The file is successfully uploaded\");\n }).catch((error) => {\n });\n }\n\n onChange(e) {\n this.setState({file:e.target.files});\n }\n\n render() {\n return (\n <form onSubmit={this.onFormSubmit}>\n <h1>File Upload</h1>\n <input type=\"file\" className=\"custom-file-input\" name=\"myImage\" onChange= {this.onChange} />\n {console.log(this.state.file)}\n <button className=\"upload-button\" type=\"submit\">Upload to DB</button>\n </form>\n )\n }\n}\n\nexport default App;Here we created a form in which the user uploads the file and saves it in the app component state which after submitting will be transferred for the server-side.
\nNow let head into the :back::end: side we start with the /server/model.js
\nvar mongoose = require('mongoose');\n\n\nconst fileSchema = new mongoose.Schema({\n meta_data:{}\n});\n\nmongoose.model(\"file\",fileSchema);And this is how we built the user schema sounds easy right? :nerd_face:\n
\nNow let’s build the server instance which will listen on port 5000 on /server/server.js
// destination /server/server.js\nconst express = require(\"express\");\nconst path = require(\"path\");\nconst multer = require(\"multer\");\nconst mongoose = require(\"mongoose\");\nconst app = express();\nconst PORT = 5000;\nrequire(\"./model\")\nconst File = mongoose.model(\"file\");\nconst router = express.Router();\n\nconst storage = multer.diskStorage({\n destination: \"./public/\",\n filename: function(req, file, cb){\n cb(null,\"IMAGE-\" + Date.now() + path.extname(file.originalname));\n }\n});\n\nconst upload = multer({\n storage: storage,\n limits:{fileSize: 1000000},\n}).single(\"myfile\");\n\nconst obj =(req,res) => {\n upload(req, res, () => {\n console.log(\"Request ---\", req.body);\n console.log(\"Request file ---\", req.file);//Here you get file.\n const file = new File();\n file.meta_data = req.file;\n file.save().then(()=>{\n res.send({message:\"uploaded successfully\"})\n })\n /*Now do where ever you want to do*/\n });\n}\n\nrouter.post(\"/upload\", obj);\n\napp.use(router);\n\napp.get(\"/\",(req,res)=>{\n return res.send(\"<p>hello!</p>\");\n});\n\nmongoose.connect(\"mongodb://localhost/file-upload\",{\n useUnifiedTopology: true,\n useNewUrlParser: true,\n useCreateIndex: true,\n}).then(()=>{console.log(\"DB is connected\")})\n\napp.listen(PORT,()=>{\n console.log(\"\\u{1F525}\\u{1F680} app listen on port\",PORT,\"\\u{1F525}\\u{1F680}\")\n});Note: path library is a built in NodeJS library to deal with file systems paths operations and dealing with it is more recommended than using RegEx.
\nFirst, make sure you are on the root directory of the project via terminal and open two instances of terminals one for the client and second for the server-side of the project:\nTo run the server
\nnode ./server/server.jsTo run the client
\nnpm startWe discussed simple details in terms of MERN stack development note that you may get a CORS permission error and that happens because the client fetches data from different origin API and fixing it from your browser by allowing all origins of APIs and it has an extension on chrome to handle it properly.\nHappy coding.
\ns\nAn immutable object is an object that can’t be modified(Changes) after it’s created. Conversely, a mutable object is any object which can be modified after it’s created.\nImmutability is the most important concept of functional programming because, without it, the data flow in your program is messed up, state history is abandoned, and strange bugs can creep into your software.\nI recommend you to check this medium article out it has some in-depth Immutations details
\n","timeToRead":7,"frontmatter":{"title":"Functional programming","date":"January 05, 2020","spoiler":"Practical guide for FP","tags":"Coding JS FP SoftwareParadigms"},"fields":{"slug":"/Functional/","langKey":"en"}}},"pageContext":{"slug":"/Functional/","previous":{"fields":{"slug":"/SOLID-Principles/","langKey":"en","directoryName":"SOLID-Principles","maybeAbsoluteLinks":[]},"frontmatter":{"title":"The \"SOLID\" Principles in designing software"}},"next":{"fields":{"slug":"/Files-mern/","langKey":"en","directoryName":"Files-mern","maybeAbsoluteLinks":[]},"frontmatter":{"title":"Dealing with files via MERN stack"}},"translations":[],"translatedLinks":[]}}}