I have created a database using PostgreSQL. I have used LEFT JOIN to join a comments table to a reviews table. The frontend is created using React. I can only delete a review if it has 0 comments, if there are any comments on the review when I try to delete it a 500 internal server error throws. I was sure the LEFT JOIN would delete a review with or without comments, so not sure why this isn't working?
Any suggestions are appreciated, thank you.
https://nc-games-kirsty-richmond.netlify.app
// seed.js file
// Create Reviews Table //
const seed = async (data) => {
const { categoryData, commentData, reviewData, userData } = data;
await db.query(`DROP TABLE IF EXISTS comments, reviews, users, categories;`);
await db.query(`
CREATE TABLE reviews (
review_id SERIAL PRIMARY KEY,
title VARCHAR(75) NOT NULL,
designer VARCHAR(55) NOT NULL,
owner VARCHAR(180) REFERENCES users(username),
review_img_url VARCHAR(500) DEFAULT
'https://images.pexels.com/photos/163064/play-stone-network-networked-interactive-163064.jpeg',
review_body VARCHAR(1000) NOT NULL,
category VARCHAR(75) REFERENCES categories(slug),
created_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP,
votes INT DEFAULT 0
);
`);
// Create Comments Table //
await db.query(`
CREATE TABLE comments (
comment_id SERIAL PRIMARY KEY,
body VARCHAR(1000) NOT NULL,
votes INT DEFAULT 0,
author VARCHAR(75) REFERENCES users(username) NOT NULL,
review_id INT REFERENCES reviews(review_id) ON DELETE CASCADE,
created_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP
);
`);
// review-models.js
exports.selectReviewById = async (review_id) => {
const review = await db.query(
`SELECT reviews.*, COUNT(comment_id)
AS comment_count
FROM reviews
LEFT JOIN comments
ON comments.review_id = reviews.review_id
WHERE reviews.review_id = $1
GROUP BY reviews.review_id;`,
[review_id]
);
return review.rows[0];
};
exports.removeReview = async (review_id) => {
removeComment();
const review = await db.query(
`DELETE FROM reviews
WHERE review_id = $1;`,
[review_id]
);
return review.rows[0];
};
Errors in console:
DELETE http://be-nc-games-app.herokuapp.com/api/reviews/114 500 (Internal Server Error)
dispatchXhrRequest # xhr.js:210
xhrAdapter # xhr.js:15
dispatchRequest # dispatchRequest.js:58
request # Axios.js:112
Axios.<computed> # Axios.js:136
wrap # bind.js:9
deleteReview # api.js:116
handleDelete # ReviewCard.jsx:55
onClick # ReviewCard.jsx:77
callCallback # react-dom.development.js:3945
invokeGuardedCallbackDev # react-dom.development.js:3994
invokeGuardedCallback # react-dom.development.js:4056
invokeGuardedCallbackAndCatchFirstError # react-dom.development.js:4070
executeDispatch # react-dom.development.js:8243
processDispatchQueueItemsInOrder # react-dom.development.js:8275
processDispatchQueue # react-dom.development.js:8288
dispatchEventsForPlugins # react-dom.development.js:8299
(anonymous) # react-dom.development.js:8508
batchedEventUpdates$1 # react-dom.development.js:22396
batchedEventUpdates # react-dom.development.js:3745
dispatchEventForPluginEventSystem # react-dom.development.js:8507
attemptToDispatchEvent # react-dom.development.js:6005
dispatchEvent # react-dom.development.js:5924
unstable_runWithPriority # scheduler.development.js:468
runWithPriority$1 # react-dom.development.js:11276
discreteUpdates$1 # react-dom.development.js:22413
discreteUpdates # react-dom.development.js:3756
dispatchDiscreteEvent # react-dom.development.js:5889
Uncaught (in promise) Error: Request failed with status code 500
at createError (createError.js:16:1)
at settle (settle.js:17:1)
at XMLHttpRequest.onloadend (xhr.js:66:1)
createError # createError.js:16
settle # settle.js:17
onloadend # xhr.js:66
Promise.then (async)
handleDelete # ReviewCard.jsx:55
onClick # ReviewCard.jsx:77
callCallback # react-dom.development.js:3945
invokeGuardedCallbackDev # react-dom.development.js:3994
invokeGuardedCallback # react-dom.development.js:4056
invokeGuardedCallbackAndCatchFirstError # react-dom.development.js:4070
executeDispatch # react-dom.development.js:8243
processDispatchQueueItemsInOrder # react-dom.development.js:8275
processDispatchQueue # react-dom.development.js:8288
dispatchEventsForPlugins # react-dom.development.js:8299
(anonymous) # react-dom.development.js:8508
batchedEventUpdates$1 # react-dom.development.js:22396
batchedEventUpdates # react-dom.development.js:3745
dispatchEventForPluginEventSystem # react-dom.development.js:8507
attemptToDispatchEvent # react-dom.development.js:6005
dispatchEvent # react-dom.development.js:5924
unstable_runWithPriority # scheduler.development.js:468
runWithPriority$1 # react-dom.development.js:11276
discreteUpdates$1 # react-dom.development.js:22413
discreteUpdates # react-dom.development.js:3756
dispatchDiscreteEvent # react-dom.development.js:5889
If you can delete only records that are not commented.
delete from reviews where id in (
select a.id
from reviews rv
left join comments cm on rv.id = cm.rev_id
where cm.id is null
)
Left join will be select all records. But if reviews are not commented these records showed as NULL. So adding the CM.ID IS NULL condition will filter only no comments records. After then using the subquery we can delete needed records.
Related
I'm pretty new to React Hooks and I'm trying to figure out how to use react-firebase-hooks with custom claims.
My firebase Realtime Database is structured like so :
groups
--- key1
------- clients
------- info
--- key2
------- clients
------- info
Each user has a custom claim named "group" carrying the group Key.
I have this code so far but it's throwing me a:
Uncaught TypeError: Cannot read property 'hasCancelCallback' of undefined
at ChildEventRegistration.createCancelEvent"
function ClientList() {
const [firebaseUser, loadingFirebaseUser] = useAuthState(auth);
const [userGroup, setUserGroup] = useState();
useEffect(() => {
const fetchClaims = async () => {
const {
claims: { group },
} = await firebaseUser.getIdTokenResult();
setUserGroup(group);
};
if (firebaseUser) fetchClaims();
}, [firebase.database(), firebaseUser]);
const [snapshots, loading, error] = useList(
firebase.database().ref(`groups/${userGroup}/clients`)
);
return (
<div>
<h2>List of Clients</h2>
{userGroup && <p>{userGroup}</p>}
{error && <strong>Error: {error}</strong>}
{loading && <span>List: Loading...</span>}
{!loading && snapshots && (
<ul>
{snapshots.map((v) => (
<li key={v.key}>
{v.key}}
</li>
))}
</ul>
)}
</div>
);
}
I might be missing something very obvious here.
Here's a full stack trace of the error :
overrideMethod # react_devtools_backend.js:2557
printWarnings # vendors~main.chunk.js:36207
handleWarnings # vendors~main.chunk.js:36212
push../node_modules/react-dev-utils/webpackHotDevClient.js.connection.onmessage # vendors~main.chunk.js:36277
vendors~main.chunk.js:28144 Uncaught TypeError: Cannot read property 'hasCancelCallback' of undefined
at ChildEventRegistration.createCancelEvent (vendors~main.chunk.js:28144)
at vendors~main.chunk.js:23797
at Array.forEach (<anonymous>)
at viewRemoveEventRegistration (vendors~main.chunk.js:23796)
at syncPointRemoveEventRegistration (vendors~main.chunk.js:24047)
at syncTreeRemoveEventRegistration (vendors~main.chunk.js:24417)
at onComplete (vendors~main.chunk.js:24743)
at Object.onComplete (vendors~main.chunk.js:25874)
at vendors~main.chunk.js:16786
at PersistentConnection.onDataMessage_ (vendors~main.chunk.js:17069)
at Connection.onDataMessage_ (vendors~main.chunk.js:15624)
at Connection.onPrimaryMessageReceived_ (vendors~main.chunk.js:15617)
at WebSocketConnection.onMessage (vendors~main.chunk.js:15497)
at WebSocketConnection.appendFrame_ (vendors~main.chunk.js:15050)
at WebSocketConnection.handleIncomingFrame (vendors~main.chunk.js:15108)
at WebSocket.mySock.onmessage (vendors~main.chunk.js:14984)
ChildEventRegistration.createCancelEvent # vendors~main.chunk.js:28144
(anonymous) # vendors~main.chunk.js:23797
viewRemoveEventRegistration # vendors~main.chunk.js:23796
syncPointRemoveEventRegistration # vendors~main.chunk.js:24047
syncTreeRemoveEventRegistration # vendors~main.chunk.js:24417
onComplete # vendors~main.chunk.js:24743
(anonymous) # vendors~main.chunk.js:25874
(anonymous) # vendors~main.chunk.js:16786
PersistentConnection.onDataMessage_ # vendors~main.chunk.js:17069
Connection.onDataMessage_ # vendors~main.chunk.js:15624
Connection.onPrimaryMessageReceived_ # vendors~main.chunk.js:15617
(anonymous) # vendors~main.chunk.js:15497
WebSocketConnection.appendFrame_ # vendors~main.chunk.js:15050
WebSocketConnection.handleIncomingFrame # vendors~main.chunk.js:15108
mySock.onmessage # vendors~main.chunk.js:14984
I'm trying to create a simple example using MAIN_MODULE/SIDE_MODULE based on https://github.com/emscripten-core/emscripten/wiki/Linking#general-dynamic-linking but cannot make it work.
Here's my code:
main.c:
#include <stdio.h>
int side(int a);
int main()
{
printf("hello world %d\n", side(1));
}
side.c:
int side(int a)
{
return a + 1;
}
compile:
emcc side.c -s SIDE_MODULE=1 -o side.wasm
emcc main.c -s MAIN_MODULE=1 -o main.html
index.html
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<script>
var Module
= {
preRun: []
, postRun: []
, print: function (e) {
1 < arguments.length && (e = Array.prototype.slice.call(arguments).join(" "));
console.log(e);
}
, printErr: function (e) {
1 < arguments.length && (e = Array.prototype.slice.call(arguments).join(" "));
console.error(e)
}
};
Module.dynamicLibraries = ['side.wasm'];
</script>
<script async src="main.js"></script>
</body>
</html>
If I run it with python -m SimpleHTTPServer, I get the following errors:
(index):19 Assertion failed: undefined
printErr # (index):19
abort # main.js:33157
assert # main.js:1074
removeRunDependency # main.js:1984
(anonymous) # main.js:2274
Promise.then (async)
instantiateArrayBuffer # main.js:2272
(anonymous) # main.js:2301
Promise.then (async)
(anonymous) # main.js:2296
Promise.then (async)
instantiateAsync # main.js:2288
createWasm # main.js:2321
Module.asm # main.js:2344
(anonymous) # main.js:31495
(index):19 failed to asynchronously prepare wasm: abort(Assertion failed: undefined) at Error
at jsStackTrace (http://localhost:8000/main.js:1626:13)
at stackTrace (http://localhost:8000/main.js:1643:12)
at abort (http://localhost:8000/main.js:33163:44)
at assert (http://localhost:8000/main.js:1074:5)
at removeRunDependency (http://localhost:8000/main.js:1984:5)
at http://localhost:8000/main.js:2274:7
Any advice or guidance would be greatly appreciated!
So I have a React component called UpdateJobComponent. From here the user can either update a job or create a job (depending on the button they clicked in the previous component). The update of a job works fine however when I try to create a job i get the following errors:
Errors
Put http://localhost:8080/jobs/-1 500
Uncaught (in promise) Error: Request failed with status code 500
at createError
It tells me it's a PUT request and not a POST. However I thought I have it said up properly to match the the createJob PostMapping Controller. Below is the UpdateJobComponent code as well as the service files and also the Controller as well as the JobDataService.
I'm quite sure that the updateJob method in my JobController is receiving the POST and that's why I'm getting the problem but I can't figure out how to make the createJob in the JobController get it.
If you want to see anymore code just let me know, I tried to trim it as much as possible so not to take too long to look over! I'd really appreciate any help you can offer!
UpdateJobComponent
// imports
class UpdateJobComponent extends Component {
constructor(props) {
super(props)
this.state = {
id: this.props.match.params.id,
employer: this.props.match.employer,
description: ''
}
// bind methods
}
componentDidMount() {
if (this.state.id == -1) {
console.log("Not mounting")
return;
}
console.log(this.state.id)
console.log("mounting")
let userName = AuthenticationService.getLoggedUser()
JobDataService.retrieveJob(userName, this.state.id)
.then(response => this.setState({
description: response.data.description,
employer: response.data.employer,
jobTitle: response.data.jobTitle
}))
}
// Error handling for form
validate(values) {
let errors = {} // add validation for every field!!!!!!
if (!values.description) {
errors.description = 'Enter a description'
} else if (values.description.length < 5) {
errors.description = 'Description must be at least 5 characters long'
}
return errors
}
// When save is clicked
onSubmit(values) {
// let employer = this.state.employer
// let id = this.state.id
// let jobTitle = this.state.jobTitle
let job = {
id: this.state.id,
employer: values.employer,
jobTitle: values.jobTitle,
description: values.description
}
if (this.state.id === -1) {
JobDataService.createJob(job)
.then(() => this.props.history.push('/jobs'))
} else {
JobDataService.updateJob(job.jobTitle, job.employer, this.state.id, job)
.then(() => this.props.history.push('/jobs'))
}
}
render() {
let { description, employer, jobTitle } = this.state
return (
<div>
<h3>Update {this.state.employer}'s {this.state.jobTitle} Job</h3>
<div className="container">
<Formik
initialValues={{description: description, employer: employer, jobTitle: jobTitle}}
onSubmit={this.onSubmit}
validateOnChange={false}
validateOnBlur={false}
validate={this.validate}
enableReinitialize={true}
>
{
(props) => (
<Form>
// Formik form, removed to make post smaller...
<div className="btn-group mr-2" role="group" aria-label="First group">
<button className="btn btn-success" type="submit">Save</button>
</div>
JobDataService
// imports
const API_URL = 'http://localhost:8080'
const GET_ALL_JOBS_URL = `${API_URL}/jobs/`
updateJob(jobTitle, employer, id, job) {
return axios.put(`${GET_ALL_JOBS_URL}${id}`, job);
}
createJob(job) {
return axios.post(`${GET_ALL_JOBS_URL}`, job);
}
JobController
#Autowired
private JobService jobService;
#PostMapping("/jobs/")
public ResponseEntity<Job> createJob(#RequestBody Job job) {
Job createdJob = jobService.createJob(job);
java.net.URI uri = ServletUriComponentsBuilder.fromCurrentRequest().path("/{id}").buildAndExpand(createdJob.getId())
.toUri();
return ResponseEntity.created(uri).build();
}
#PutMapping("/jobs/{id}")
public ResponseEntity<Job> updateJob(#PathVariable long id, #RequestBody Job job) {
job.setId(id);
return ResponseEntity.ok().body(this.jobService.updateJob(job));
}
// Other get and delete methods
JobService
public Job createJob(Job job) {
if(job.getId() == -1 || job.getId() == 0) {
job.setId(++idCounter);
jobRepository.insert(job);
}
return jobRepository.save(job);
}
public Job updateJob(Job job) {
Optional < Job > jobDb = this.jobRepository.findById(job.getId());
if (jobDb.isPresent()) {
Job jobUpdate = jobDb.get();
jobUpdate.setId(job.getId());
jobUpdate.setEmployer(job.getEmployer());
jobUpdate.setJobTitle(job.getJobTitle());
jobUpdate.setDescription(job.getDescription());
jobRepository.save(jobUpdate);
return jobUpdate;
} else {
throw new ResourceNotFoundException("Record not found with id : " + job.getId());
}
}
// Other methods
Edit
Full error message:
PUT http://localhost:8080/jobs/-1 500
dispatchXhrRequest # 1.chunk.js:561
xhrAdapter # 1.chunk.js:411
dispatchRequest # 1.chunk.js:994
Promise.then (async)
request # 1.chunk.js:807
Axios.<computed> # 1.chunk.js:831
wrap # 1.chunk.js:1308
updateJob # main.chunk.js:1428
onSubmit # main.chunk.js:955
(anonymous) # 1.chunk.js:4699
(anonymous) # 1.chunk.js:5014
(anonymous) # 1.chunk.js:4709
Promise.then (async)
(anonymous) # 1.chunk.js:4705
(anonymous) # 1.chunk.js:5014
(anonymous) # 1.chunk.js:4750
(anonymous) # 1.chunk.js:5014
callCallback # 1.chunk.js:16321
invokeGuardedCallbackDev # 1.chunk.js:16370
invokeGuardedCallback # 1.chunk.js:16423
invokeGuardedCallbackAndCatchFirstError # 1.chunk.js:16438
executeDispatch # 1.chunk.js:16569
executeDispatchesInOrder # 1.chunk.js:16594
executeDispatchesAndRelease # 1.chunk.js:16697
executeDispatchesAndReleaseTopLevel # 1.chunk.js:16706
forEachAccumulated # 1.chunk.js:16678
runEventsInBatch # 1.chunk.js:16723
runExtractedPluginEventsInBatch # 1.chunk.js:16865
handleTopLevel # 1.chunk.js:21818
batchedEventUpdates$1 # 1.chunk.js:40326
batchedEventUpdates # 1.chunk.js:17401
dispatchEventForPluginEventSystem # 1.chunk.js:21914
attemptToDispatchEvent # 1.chunk.js:22031
dispatchEvent # 1.chunk.js:21934
unstable_runWithPriority # 1.chunk.js:51411
runWithPriority$2 # 1.chunk.js:28193
discreteUpdates$1 # 1.chunk.js:40343
discreteUpdates # 1.chunk.js:17426
dispatchDiscreteEvent # 1.chunk.js:21901
I just added an if statement in the updateJob method to check if the id was -1. It's far from pretty and will need to be fixed again but wll do for now. Thanks for your time Code-Apprentice!
I'm newbie to AngularJS.
Beginning with the script worked fine when in development, after uploaded to production, I got RangeError in my Controller. I confused about this error, even I searching with Google still not solved :(
Here's my script on routeProvider :
.when('/customer/detail/:id', {
title: 'Customer Detail',
templateUrl: 'templates/customer_detail.html',
resolve: {
app: function($q, $rootScope, $location, roles) {
var defer = $q.defer();
if (roles.pageCustomer !== true) {
$location.path('/main.html');
};
defer.resolve();
return defer.promise;
}
}
})
Then on my Controller :
app.controller('ctrl_customer_list', function($scope){
$scope.title = "Customer List";
$('#datatable_customer').DataTable({
bServerSide: true,
bDestroy: true,
responsive: true,
iDisplayLength: 250,
serverSide: true,
columnDefs: [ {
targets: 0,
orderable: false,
targets : 1,
"render": function ( data, type, row, meta ) {
var itemID = row[8];
return '' + data + '';
}
}],
lengthMenu: [ 10, 25, 50, 75, 100, 250, 500, 1000 ],
aaSorting: [[1, 'asc']],
ajax:{
url :"backend/customer/list", // json datasource
type: "post", // type of method ,GET/POST/DELETE
error: function(){
$("#datatable_processing").css("display","none");
}
},
language: {
searchPlaceholder: 'Search...',
sSearch: '',
lengthMenu: '_MENU_ items/page',
}
});
$('.dataTables_length select').select2({ minimumResultsForSearch: Infinity });
});
I got following error when the code has been production :
RangeError: Maximum call stack size exceeded
at Function.n.extend.n.fn.extend (jquery.js:177)
at Function.n.extend.n.fn.extend (jquery.js:228)
at Function.n.extend.n.fn.extend (jquery.js:228)
at Function.n.extend.n.fn.extend (jquery.js:228)
at Function.n.extend.n.fn.extend (jquery.js:228)
at Function.n.extend.n.fn.extend (jquery.js:228)
at Function.n.extend.n.fn.extend (jquery.js:228)
at Function.n.extend.n.fn.extend (jquery.js:228)
at Function.n.extend.n.fn.extend (jquery.js:228)
at Function.n.extend.n.fn.extend (jquery.js:228)
(anonymous) # angular.js:15536
(anonymous) # angular.js:11815
(anonymous) # angular.js:21559
Pg.completeTask # angular.js:21194
(anonymous) # angular.js:6790
setTimeout (async)
h.defer # angular.js:6788
f # angular.js:21554
(anonymous) # select2.js:194
(anonymous) # angular.js:1365
Ba # angular.js:11235
q # angular.js:10554
g # angular.js:9801
g # angular.js:9804
g # angular.js:9804
g # angular.js:9804
g # angular.js:9804
q # angular.js:10548
g # angular.js:9801
g # angular.js:9804
g # angular.js:9804
q # angular.js:10548
g # angular.js:9801
(anonymous) # angular.js:9666
link # angular-route.js:1260
(anonymous) # angular.js:1365
Ba # angular.js:11235
q # angular.js:10554
g # angular.js:9801
(anonymous) # angular.js:9666
(anonymous) # angular.js:10080
d # angular.js:9844
m # angular.js:10604
C # angular-route.js:1209
$broadcast # angular.js:19683
(anonymous) # angular-route.js:749
(anonymous) # angular.js:17914
$digest # angular.js:19075
$apply # angular.js:19463
k # angular.js:13312
w # angular.js:13569
E.onload # angular.js:13474
load (async)
(anonymous) # angular.js:13457
s # angular.js:13257
(anonymous) # angular.js:12998
(anonymous) # angular.js:17914
$digest # angular.js:19075
$apply # angular.js:19463
(anonymous) # angular.js:15270
dispatch # jquery.js:4435
r.handle # jquery.js:4121
I'm using AngularJS 1.7.5 and GruntTasker.
Any advice? Many thanks for helping
(sorry my english)
just update to resolve issue. First, I follow instruction as #numbtongue mention. It's finally found the problems come from AngularJS-select2. I tried to remove AngularJS-select2 from repositories and finally worked !
Thank you very much #numbtongue as instruction debugging with Chrome.
PS:
With the debugger you can see, how many script execute within a time.
I'm trying to use npm file-system to list the files and folders on my server at a given path. I understand that accessing the file system using Javascript is not allowed from the browser (client-side) but that it should be allowed if I run the javascript from the server.
Therefore I've created a ReactJS application that performs server-side rendering by following the tutorial here (or you get git the code and build/run it out of the box here).
I can call basic functions like Date.now() with the browser's javascript disabled proving that javascript is running on the server but when I insert the following code I receive an error.
Why does my server code not recognize fs?
Component Code:
import React, { Component } from 'react'
import { connect } from 'react-redux'
import { bindActionCreators } from 'redux'
import * as userActions from '../actions/user'
import { Link } from 'react-router-dom'
import './FirstPage.css'
var fileSystem = require("file-system")
class FirstPage extends Component {
render() {
fileSystem.recurse('./', ['*.*'],
function(filepath, relative, filename) {
if (filename) {
console.log("FILE"+filename);
} else {
console.log("FOLDER"+filepath);
}
});
let time = Date.now();
const b64 = this.props.staticContext ? 'wait for it' : window.btoa('wait for it')
return (
<div className='bold'>
<h2>First Page</h2>
<p>{`Email: ${this.props.user.email}`}</p>
<p>{`b64: ${b64}`}</p>
<p>{time}</p>
<Link to={'/second'}>Second</Link>
</div>
)
}
}
const mapStateToProps = state => ({
user: state.user
})
const mapDispatchToProps = dispatch => ({
userActions: bindActionCreators(userActions, dispatch)
})
export default connect(
mapStateToProps,
mapDispatchToProps
)(FirstPage)
Error:
file-system.js:223 Uncaught TypeError: i.readdir is not a function
at r (file-system.js:223)
at Object.t.recurse (file-system.js:244)
at t.value (FirstPage.js:14)
at p._renderValidatedComponentWithoutOwnerOrContext (ReactCompositeComponent.js:796)
at p._renderValidatedComponent (ReactCompositeComponent.js:819)
at performInitialMount (ReactCompositeComponent.js:359)
at p.mountComponent (ReactCompositeComponent.js:255)
at Object.mountComponent (ReactReconciler.js:43)
at performInitialMount (ReactCompositeComponent.js:368)
at p.mountComponent (ReactCompositeComponent.js:255)
r # file-system.js:223
t.recurse # file-system.js:244
value # FirstPage.js:14
_renderValidatedComponentWithoutOwnerOrContext # ReactCompositeComponent.js:796
_renderValidatedComponent # ReactCompositeComponent.js:819
performInitialMount # ReactCompositeComponent.js:359
mountComponent # ReactCompositeComponent.js:255
mountComponent # ReactReconciler.js:43
performInitialMount # ReactCompositeComponent.js:368
mountComponent # ReactCompositeComponent.js:255
mountComponent # ReactReconciler.js:43
performInitialMount # ReactCompositeComponent.js:368
mountComponent # ReactCompositeComponent.js:255
mountComponent # ReactReconciler.js:43
performInitialMount # ReactCompositeComponent.js:368
mountComponent # ReactCompositeComponent.js:255
mountComponent # ReactReconciler.js:43
mountChildren # ReactMultiChild.js:234
_createInitialChildren # ReactDOMComponent.js:701
mountComponent # ReactDOMComponent.js:520
mountComponent # ReactReconciler.js:43
performInitialMount # ReactCompositeComponent.js:368
mountComponent # ReactCompositeComponent.js:255
mountComponent # ReactReconciler.js:43
performInitialMount # ReactCompositeComponent.js:368
mountComponent # ReactCompositeComponent.js:255
mountComponent # ReactReconciler.js:43
performInitialMount # ReactCompositeComponent.js:368
mountComponent # ReactCompositeComponent.js:255
mountComponent # ReactReconciler.js:43
performInitialMount # ReactCompositeComponent.js:368
mountComponent # ReactCompositeComponent.js:255
mountComponent # ReactReconciler.js:43
performInitialMount # ReactCompositeComponent.js:368
mountComponent # ReactCompositeComponent.js:255
mountComponent # ReactReconciler.js:43
a # ReactMount.js:102
perform # Transaction.js:141
u # ReactMount.js:124
perform # Transaction.js:141
batchedUpdates # ReactDefaultBatchingStrategy.js:60
i # ReactUpdates.js:95
_renderNewRootComponent # ReactMount.js:317
_renderSubtreeIntoContainer # ReactMount.js:399
render # ReactMount.js:420
(anonymous) # index.js:15
t # bootstrap 7ba872b0d973a86c97b4:19
(anonymous) # main.0dc33d67.js:30531
t # bootstrap 7ba872b0d973a86c97b4:19
(anonymous) # bootstrap 7ba872b0d973a86c97b4:65
(anonymous) # bootstrap 7ba872b0d973a86c97b4:65
You can do it using:
List React component files inside a directory
list-react-files
https://www.npmjs.com/package/list-react-files
Install
$ npm install --save list-react-files
Usage
import listReactFiles from 'list-react-files'
listReactFiles(__dirname).then(files => console.log(files))
Try using the,
list-files npm package,
as it can be used to list all the files in a directory with a particular 'string' present in it.
Refer to the link below to know abt it:
https://www.npmjs.com/package/list-files
Installation:
npm i list-files
Sample use case:
To find all the files with "pdf" in a particular directory named "dir"
var find = require('list-files');
find(function(result) {
console.log(result);
}, {
dir: 'dir',
name: 'pdf'
});