├── .babelrc ├── .eslintrc.json ├── .gitignore ├── LICENSE ├── README.md ├── dist ├── images │ ├── error.png │ ├── favicon.ico │ ├── loading.gif │ └── success.png ├── index.html └── main.css ├── package-lock.json ├── package.json ├── src ├── api │ ├── pushshift │ │ └── index.js │ ├── reddit │ │ ├── auth.js │ │ └── index.js │ └── removeddit │ │ └── index.js ├── index.js ├── pages │ ├── 404.js │ ├── about.js │ ├── common │ │ ├── Header.js │ │ └── Post.js │ ├── search │ │ └── index.js │ ├── subreddit │ │ ├── SubredditPagination.js │ │ ├── SubredditSort.js │ │ └── index.js │ └── thread │ │ ├── Comment.js │ │ ├── CommentInfo.js │ │ ├── CommentSection.js │ │ ├── LoadMore.js │ │ ├── Modal.js │ │ ├── SortBy.js │ │ └── index.js ├── sass │ ├── about.sass │ ├── colors.sass │ ├── comment.sass │ ├── common.sass │ ├── header.sass │ ├── index.sass │ ├── modal.sass │ ├── post.sass │ ├── search.sass │ ├── subreddit.sass │ └── thread.sass ├── state.js └── utils.js └── webpack.config.js /.babelrc: -------------------------------------------------------------------------------- 1 | { 2 | "presets": [ 3 | ["@babel/preset-env", 4 | { 5 | targets: 'defaults', 6 | useBuiltIns: 'usage', 7 | corejs: '3.21' 8 | }], 9 | "@babel/preset-react" 10 | ], 11 | "plugins": [ 12 | "@babel/plugin-proposal-class-properties" 13 | ] 14 | } 15 | -------------------------------------------------------------------------------- /.eslintrc.json: -------------------------------------------------------------------------------- 1 | { 2 | "env": { 3 | "browser": true, 4 | "es2021": true 5 | }, 6 | "extends": [ 7 | "eslint:recommended", 8 | "plugin:react/recommended", 9 | "plugin:react-hooks/recommended" 10 | ], 11 | "overrides": [ 12 | ], 13 | "parserOptions": { 14 | "ecmaVersion": "latest", 15 | "sourceType": "module", 16 | "ecmaFeatures": { 17 | "jsx": true 18 | } 19 | }, 20 | "plugins": [ 21 | "react" 22 | ], 23 | "rules": { 24 | "react/prop-types": "off", 25 | "no-constant-condition": ["error", { "checkLoops": false }] 26 | }, 27 | "settings": { 28 | "react": { 29 | "version": "detect" 30 | }, 31 | "componentWrapperFunctions": [ 32 | "connect" 33 | ], 34 | "linkComponents": [ 35 | {"name": "Link", "linkAttribute": "to"}, 36 | {"name": "NavLink", "linkAttribute": "to"} 37 | ] 38 | } 39 | } 40 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | # Autogenerated vscode config 2 | .vscode/ 3 | 4 | # Dependency directories 5 | node_modules/ 6 | 7 | # Generated JS files 8 | dist/main.js 9 | dist/main.js.LICENSE.txt 10 | 11 | # Log files 12 | *.log 13 | -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | GNU GENERAL PUBLIC LICENSE 2 | Version 3, 29 June 2007 3 | 4 | Copyright (C) 2007 Free Software Foundation, Inc. 5 | Everyone is permitted to copy and distribute verbatim copies 6 | of this license document, but changing it is not allowed. 7 | 8 | Preamble 9 | 10 | The GNU General Public License is a free, copyleft license for 11 | software and other kinds of works. 12 | 13 | The licenses for most software and other practical works are designed 14 | to take away your freedom to share and change the works. By contrast, 15 | the GNU General Public License is intended to guarantee your freedom to 16 | share and change all versions of a program--to make sure it remains free 17 | software for all its users. We, the Free Software Foundation, use the 18 | GNU General Public License for most of our software; it applies also to 19 | any other work released this way by its authors. You can apply it to 20 | your programs, too. 21 | 22 | When we speak of free software, we are referring to freedom, not 23 | price. Our General Public Licenses are designed to make sure that you 24 | have the freedom to distribute copies of free software (and charge for 25 | them if you wish), that you receive source code or can get it if you 26 | want it, that you can change the software or use pieces of it in new 27 | free programs, and that you know you can do these things. 28 | 29 | To protect your rights, we need to prevent others from denying you 30 | these rights or asking you to surrender the rights. Therefore, you have 31 | certain responsibilities if you distribute copies of the software, or if 32 | you modify it: responsibilities to respect the freedom of others. 33 | 34 | For example, if you distribute copies of such a program, whether 35 | gratis or for a fee, you must pass on to the recipients the same 36 | freedoms that you received. You must make sure that they, too, receive 37 | or can get the source code. And you must show them these terms so they 38 | know their rights. 39 | 40 | Developers that use the GNU GPL protect your rights with two steps: 41 | (1) assert copyright on the software, and (2) offer you this License 42 | giving you legal permission to copy, distribute and/or modify it. 43 | 44 | For the developers' and authors' protection, the GPL clearly explains 45 | that there is no warranty for this free software. For both users' and 46 | authors' sake, the GPL requires that modified versions be marked as 47 | changed, so that their problems will not be attributed erroneously to 48 | authors of previous versions. 49 | 50 | Some devices are designed to deny users access to install or run 51 | modified versions of the software inside them, although the manufacturer 52 | can do so. This is fundamentally incompatible with the aim of 53 | protecting users' freedom to change the software. The systematic 54 | pattern of such abuse occurs in the area of products for individuals to 55 | use, which is precisely where it is most unacceptable. Therefore, we 56 | have designed this version of the GPL to prohibit the practice for those 57 | products. If such problems arise substantially in other domains, we 58 | stand ready to extend this provision to those domains in future versions 59 | of the GPL, as needed to protect the freedom of users. 60 | 61 | Finally, every program is threatened constantly by software patents. 62 | States should not allow patents to restrict development and use of 63 | software on general-purpose computers, but in those that do, we wish to 64 | avoid the special danger that patents applied to a free program could 65 | make it effectively proprietary. To prevent this, the GPL assures that 66 | patents cannot be used to render the program non-free. 67 | 68 | The precise terms and conditions for copying, distribution and 69 | modification follow. 70 | 71 | TERMS AND CONDITIONS 72 | 73 | 0. Definitions. 74 | 75 | "This License" refers to version 3 of the GNU General Public License. 76 | 77 | "Copyright" also means copyright-like laws that apply to other kinds of 78 | works, such as semiconductor masks. 79 | 80 | "The Program" refers to any copyrightable work licensed under this 81 | License. Each licensee is addressed as "you". "Licensees" and 82 | "recipients" may be individuals or organizations. 83 | 84 | To "modify" a work means to copy from or adapt all or part of the work 85 | in a fashion requiring copyright permission, other than the making of an 86 | exact copy. The resulting work is called a "modified version" of the 87 | earlier work or a work "based on" the earlier work. 88 | 89 | A "covered work" means either the unmodified Program or a work based 90 | on the Program. 91 | 92 | To "propagate" a work means to do anything with it that, without 93 | permission, would make you directly or secondarily liable for 94 | infringement under applicable copyright law, except executing it on a 95 | computer or modifying a private copy. Propagation includes copying, 96 | distribution (with or without modification), making available to the 97 | public, and in some countries other activities as well. 98 | 99 | To "convey" a work means any kind of propagation that enables other 100 | parties to make or receive copies. Mere interaction with a user through 101 | a computer network, with no transfer of a copy, is not conveying. 102 | 103 | An interactive user interface displays "Appropriate Legal Notices" 104 | to the extent that it includes a convenient and prominently visible 105 | feature that (1) displays an appropriate copyright notice, and (2) 106 | tells the user that there is no warranty for the work (except to the 107 | extent that warranties are provided), that licensees may convey the 108 | work under this License, and how to view a copy of this License. If 109 | the interface presents a list of user commands or options, such as a 110 | menu, a prominent item in the list meets this criterion. 111 | 112 | 1. Source Code. 113 | 114 | The "source code" for a work means the preferred form of the work 115 | for making modifications to it. "Object code" means any non-source 116 | form of a work. 117 | 118 | A "Standard Interface" means an interface that either is an official 119 | standard defined by a recognized standards body, or, in the case of 120 | interfaces specified for a particular programming language, one that 121 | is widely used among developers working in that language. 122 | 123 | The "System Libraries" of an executable work include anything, other 124 | than the work as a whole, that (a) is included in the normal form of 125 | packaging a Major Component, but which is not part of that Major 126 | Component, and (b) serves only to enable use of the work with that 127 | Major Component, or to implement a Standard Interface for which an 128 | implementation is available to the public in source code form. A 129 | "Major Component", in this context, means a major essential component 130 | (kernel, window system, and so on) of the specific operating system 131 | (if any) on which the executable work runs, or a compiler used to 132 | produce the work, or an object code interpreter used to run it. 133 | 134 | The "Corresponding Source" for a work in object code form means all 135 | the source code needed to generate, install, and (for an executable 136 | work) run the object code and to modify the work, including scripts to 137 | control those activities. However, it does not include the work's 138 | System Libraries, or general-purpose tools or generally available free 139 | programs which are used unmodified in performing those activities but 140 | which are not part of the work. For example, Corresponding Source 141 | includes interface definition files associated with source files for 142 | the work, and the source code for shared libraries and dynamically 143 | linked subprograms that the work is specifically designed to require, 144 | such as by intimate data communication or control flow between those 145 | subprograms and other parts of the work. 146 | 147 | The Corresponding Source need not include anything that users 148 | can regenerate automatically from other parts of the Corresponding 149 | Source. 150 | 151 | The Corresponding Source for a work in source code form is that 152 | same work. 153 | 154 | 2. Basic Permissions. 155 | 156 | All rights granted under this License are granted for the term of 157 | copyright on the Program, and are irrevocable provided the stated 158 | conditions are met. This License explicitly affirms your unlimited 159 | permission to run the unmodified Program. The output from running a 160 | covered work is covered by this License only if the output, given its 161 | content, constitutes a covered work. This License acknowledges your 162 | rights of fair use or other equivalent, as provided by copyright law. 163 | 164 | You may make, run and propagate covered works that you do not 165 | convey, without conditions so long as your license otherwise remains 166 | in force. You may convey covered works to others for the sole purpose 167 | of having them make modifications exclusively for you, or provide you 168 | with facilities for running those works, provided that you comply with 169 | the terms of this License in conveying all material for which you do 170 | not control copyright. Those thus making or running the covered works 171 | for you must do so exclusively on your behalf, under your direction 172 | and control, on terms that prohibit them from making any copies of 173 | your copyrighted material outside their relationship with you. 174 | 175 | Conveying under any other circumstances is permitted solely under 176 | the conditions stated below. Sublicensing is not allowed; section 10 177 | makes it unnecessary. 178 | 179 | 3. Protecting Users' Legal Rights From Anti-Circumvention Law. 180 | 181 | No covered work shall be deemed part of an effective technological 182 | measure under any applicable law fulfilling obligations under article 183 | 11 of the WIPO copyright treaty adopted on 20 December 1996, or 184 | similar laws prohibiting or restricting circumvention of such 185 | measures. 186 | 187 | When you convey a covered work, you waive any legal power to forbid 188 | circumvention of technological measures to the extent such circumvention 189 | is effected by exercising rights under this License with respect to 190 | the covered work, and you disclaim any intention to limit operation or 191 | modification of the work as a means of enforcing, against the work's 192 | users, your or third parties' legal rights to forbid circumvention of 193 | technological measures. 194 | 195 | 4. Conveying Verbatim Copies. 196 | 197 | You may convey verbatim copies of the Program's source code as you 198 | receive it, in any medium, provided that you conspicuously and 199 | appropriately publish on each copy an appropriate copyright notice; 200 | keep intact all notices stating that this License and any 201 | non-permissive terms added in accord with section 7 apply to the code; 202 | keep intact all notices of the absence of any warranty; and give all 203 | recipients a copy of this License along with the Program. 204 | 205 | You may charge any price or no price for each copy that you convey, 206 | and you may offer support or warranty protection for a fee. 207 | 208 | 5. Conveying Modified Source Versions. 209 | 210 | You may convey a work based on the Program, or the modifications to 211 | produce it from the Program, in the form of source code under the 212 | terms of section 4, provided that you also meet all of these conditions: 213 | 214 | a) The work must carry prominent notices stating that you modified 215 | it, and giving a relevant date. 216 | 217 | b) The work must carry prominent notices stating that it is 218 | released under this License and any conditions added under section 219 | 7. This requirement modifies the requirement in section 4 to 220 | "keep intact all notices". 221 | 222 | c) You must license the entire work, as a whole, under this 223 | License to anyone who comes into possession of a copy. This 224 | License will therefore apply, along with any applicable section 7 225 | additional terms, to the whole of the work, and all its parts, 226 | regardless of how they are packaged. This License gives no 227 | permission to license the work in any other way, but it does not 228 | invalidate such permission if you have separately received it. 229 | 230 | d) If the work has interactive user interfaces, each must display 231 | Appropriate Legal Notices; however, if the Program has interactive 232 | interfaces that do not display Appropriate Legal Notices, your 233 | work need not make them do so. 234 | 235 | A compilation of a covered work with other separate and independent 236 | works, which are not by their nature extensions of the covered work, 237 | and which are not combined with it such as to form a larger program, 238 | in or on a volume of a storage or distribution medium, is called an 239 | "aggregate" if the compilation and its resulting copyright are not 240 | used to limit the access or legal rights of the compilation's users 241 | beyond what the individual works permit. Inclusion of a covered work 242 | in an aggregate does not cause this License to apply to the other 243 | parts of the aggregate. 244 | 245 | 6. Conveying Non-Source Forms. 246 | 247 | You may convey a covered work in object code form under the terms 248 | of sections 4 and 5, provided that you also convey the 249 | machine-readable Corresponding Source under the terms of this License, 250 | in one of these ways: 251 | 252 | a) Convey the object code in, or embodied in, a physical product 253 | (including a physical distribution medium), accompanied by the 254 | Corresponding Source fixed on a durable physical medium 255 | customarily used for software interchange. 256 | 257 | b) Convey the object code in, or embodied in, a physical product 258 | (including a physical distribution medium), accompanied by a 259 | written offer, valid for at least three years and valid for as 260 | long as you offer spare parts or customer support for that product 261 | model, to give anyone who possesses the object code either (1) a 262 | copy of the Corresponding Source for all the software in the 263 | product that is covered by this License, on a durable physical 264 | medium customarily used for software interchange, for a price no 265 | more than your reasonable cost of physically performing this 266 | conveying of source, or (2) access to copy the 267 | Corresponding Source from a network server at no charge. 268 | 269 | c) Convey individual copies of the object code with a copy of the 270 | written offer to provide the Corresponding Source. This 271 | alternative is allowed only occasionally and noncommercially, and 272 | only if you received the object code with such an offer, in accord 273 | with subsection 6b. 274 | 275 | d) Convey the object code by offering access from a designated 276 | place (gratis or for a charge), and offer equivalent access to the 277 | Corresponding Source in the same way through the same place at no 278 | further charge. You need not require recipients to copy the 279 | Corresponding Source along with the object code. If the place to 280 | copy the object code is a network server, the Corresponding Source 281 | may be on a different server (operated by you or a third party) 282 | that supports equivalent copying facilities, provided you maintain 283 | clear directions next to the object code saying where to find the 284 | Corresponding Source. Regardless of what server hosts the 285 | Corresponding Source, you remain obligated to ensure that it is 286 | available for as long as needed to satisfy these requirements. 287 | 288 | e) Convey the object code using peer-to-peer transmission, provided 289 | you inform other peers where the object code and Corresponding 290 | Source of the work are being offered to the general public at no 291 | charge under subsection 6d. 292 | 293 | A separable portion of the object code, whose source code is excluded 294 | from the Corresponding Source as a System Library, need not be 295 | included in conveying the object code work. 296 | 297 | A "User Product" is either (1) a "consumer product", which means any 298 | tangible personal property which is normally used for personal, family, 299 | or household purposes, or (2) anything designed or sold for incorporation 300 | into a dwelling. In determining whether a product is a consumer product, 301 | doubtful cases shall be resolved in favor of coverage. For a particular 302 | product received by a particular user, "normally used" refers to a 303 | typical or common use of that class of product, regardless of the status 304 | of the particular user or of the way in which the particular user 305 | actually uses, or expects or is expected to use, the product. A product 306 | is a consumer product regardless of whether the product has substantial 307 | commercial, industrial or non-consumer uses, unless such uses represent 308 | the only significant mode of use of the product. 309 | 310 | "Installation Information" for a User Product means any methods, 311 | procedures, authorization keys, or other information required to install 312 | and execute modified versions of a covered work in that User Product from 313 | a modified version of its Corresponding Source. The information must 314 | suffice to ensure that the continued functioning of the modified object 315 | code is in no case prevented or interfered with solely because 316 | modification has been made. 317 | 318 | If you convey an object code work under this section in, or with, or 319 | specifically for use in, a User Product, and the conveying occurs as 320 | part of a transaction in which the right of possession and use of the 321 | User Product is transferred to the recipient in perpetuity or for a 322 | fixed term (regardless of how the transaction is characterized), the 323 | Corresponding Source conveyed under this section must be accompanied 324 | by the Installation Information. But this requirement does not apply 325 | if neither you nor any third party retains the ability to install 326 | modified object code on the User Product (for example, the work has 327 | been installed in ROM). 328 | 329 | The requirement to provide Installation Information does not include a 330 | requirement to continue to provide support service, warranty, or updates 331 | for a work that has been modified or installed by the recipient, or for 332 | the User Product in which it has been modified or installed. Access to a 333 | network may be denied when the modification itself materially and 334 | adversely affects the operation of the network or violates the rules and 335 | protocols for communication across the network. 336 | 337 | Corresponding Source conveyed, and Installation Information provided, 338 | in accord with this section must be in a format that is publicly 339 | documented (and with an implementation available to the public in 340 | source code form), and must require no special password or key for 341 | unpacking, reading or copying. 342 | 343 | 7. Additional Terms. 344 | 345 | "Additional permissions" are terms that supplement the terms of this 346 | License by making exceptions from one or more of its conditions. 347 | Additional permissions that are applicable to the entire Program shall 348 | be treated as though they were included in this License, to the extent 349 | that they are valid under applicable law. If additional permissions 350 | apply only to part of the Program, that part may be used separately 351 | under those permissions, but the entire Program remains governed by 352 | this License without regard to the additional permissions. 353 | 354 | When you convey a copy of a covered work, you may at your option 355 | remove any additional permissions from that copy, or from any part of 356 | it. (Additional permissions may be written to require their own 357 | removal in certain cases when you modify the work.) You may place 358 | additional permissions on material, added by you to a covered work, 359 | for which you have or can give appropriate copyright permission. 360 | 361 | Notwithstanding any other provision of this License, for material you 362 | add to a covered work, you may (if authorized by the copyright holders of 363 | that material) supplement the terms of this License with terms: 364 | 365 | a) Disclaiming warranty or limiting liability differently from the 366 | terms of sections 15 and 16 of this License; or 367 | 368 | b) Requiring preservation of specified reasonable legal notices or 369 | author attributions in that material or in the Appropriate Legal 370 | Notices displayed by works containing it; or 371 | 372 | c) Prohibiting misrepresentation of the origin of that material, or 373 | requiring that modified versions of such material be marked in 374 | reasonable ways as different from the original version; or 375 | 376 | d) Limiting the use for publicity purposes of names of licensors or 377 | authors of the material; or 378 | 379 | e) Declining to grant rights under trademark law for use of some 380 | trade names, trademarks, or service marks; or 381 | 382 | f) Requiring indemnification of licensors and authors of that 383 | material by anyone who conveys the material (or modified versions of 384 | it) with contractual assumptions of liability to the recipient, for 385 | any liability that these contractual assumptions directly impose on 386 | those licensors and authors. 387 | 388 | All other non-permissive additional terms are considered "further 389 | restrictions" within the meaning of section 10. If the Program as you 390 | received it, or any part of it, contains a notice stating that it is 391 | governed by this License along with a term that is a further 392 | restriction, you may remove that term. If a license document contains 393 | a further restriction but permits relicensing or conveying under this 394 | License, you may add to a covered work material governed by the terms 395 | of that license document, provided that the further restriction does 396 | not survive such relicensing or conveying. 397 | 398 | If you add terms to a covered work in accord with this section, you 399 | must place, in the relevant source files, a statement of the 400 | additional terms that apply to those files, or a notice indicating 401 | where to find the applicable terms. 402 | 403 | Additional terms, permissive or non-permissive, may be stated in the 404 | form of a separately written license, or stated as exceptions; 405 | the above requirements apply either way. 406 | 407 | 8. Termination. 408 | 409 | You may not propagate or modify a covered work except as expressly 410 | provided under this License. Any attempt otherwise to propagate or 411 | modify it is void, and will automatically terminate your rights under 412 | this License (including any patent licenses granted under the third 413 | paragraph of section 11). 414 | 415 | However, if you cease all violation of this License, then your 416 | license from a particular copyright holder is reinstated (a) 417 | provisionally, unless and until the copyright holder explicitly and 418 | finally terminates your license, and (b) permanently, if the copyright 419 | holder fails to notify you of the violation by some reasonable means 420 | prior to 60 days after the cessation. 421 | 422 | Moreover, your license from a particular copyright holder is 423 | reinstated permanently if the copyright holder notifies you of the 424 | violation by some reasonable means, this is the first time you have 425 | received notice of violation of this License (for any work) from that 426 | copyright holder, and you cure the violation prior to 30 days after 427 | your receipt of the notice. 428 | 429 | Termination of your rights under this section does not terminate the 430 | licenses of parties who have received copies or rights from you under 431 | this License. If your rights have been terminated and not permanently 432 | reinstated, you do not qualify to receive new licenses for the same 433 | material under section 10. 434 | 435 | 9. Acceptance Not Required for Having Copies. 436 | 437 | You are not required to accept this License in order to receive or 438 | run a copy of the Program. Ancillary propagation of a covered work 439 | occurring solely as a consequence of using peer-to-peer transmission 440 | to receive a copy likewise does not require acceptance. However, 441 | nothing other than this License grants you permission to propagate or 442 | modify any covered work. These actions infringe copyright if you do 443 | not accept this License. Therefore, by modifying or propagating a 444 | covered work, you indicate your acceptance of this License to do so. 445 | 446 | 10. Automatic Licensing of Downstream Recipients. 447 | 448 | Each time you convey a covered work, the recipient automatically 449 | receives a license from the original licensors, to run, modify and 450 | propagate that work, subject to this License. You are not responsible 451 | for enforcing compliance by third parties with this License. 452 | 453 | An "entity transaction" is a transaction transferring control of an 454 | organization, or substantially all assets of one, or subdividing an 455 | organization, or merging organizations. If propagation of a covered 456 | work results from an entity transaction, each party to that 457 | transaction who receives a copy of the work also receives whatever 458 | licenses to the work the party's predecessor in interest had or could 459 | give under the previous paragraph, plus a right to possession of the 460 | Corresponding Source of the work from the predecessor in interest, if 461 | the predecessor has it or can get it with reasonable efforts. 462 | 463 | You may not impose any further restrictions on the exercise of the 464 | rights granted or affirmed under this License. For example, you may 465 | not impose a license fee, royalty, or other charge for exercise of 466 | rights granted under this License, and you may not initiate litigation 467 | (including a cross-claim or counterclaim in a lawsuit) alleging that 468 | any patent claim is infringed by making, using, selling, offering for 469 | sale, or importing the Program or any portion of it. 470 | 471 | 11. Patents. 472 | 473 | A "contributor" is a copyright holder who authorizes use under this 474 | License of the Program or a work on which the Program is based. The 475 | work thus licensed is called the contributor's "contributor version". 476 | 477 | A contributor's "essential patent claims" are all patent claims 478 | owned or controlled by the contributor, whether already acquired or 479 | hereafter acquired, that would be infringed by some manner, permitted 480 | by this License, of making, using, or selling its contributor version, 481 | but do not include claims that would be infringed only as a 482 | consequence of further modification of the contributor version. For 483 | purposes of this definition, "control" includes the right to grant 484 | patent sublicenses in a manner consistent with the requirements of 485 | this License. 486 | 487 | Each contributor grants you a non-exclusive, worldwide, royalty-free 488 | patent license under the contributor's essential patent claims, to 489 | make, use, sell, offer for sale, import and otherwise run, modify and 490 | propagate the contents of its contributor version. 491 | 492 | In the following three paragraphs, a "patent license" is any express 493 | agreement or commitment, however denominated, not to enforce a patent 494 | (such as an express permission to practice a patent or covenant not to 495 | sue for patent infringement). To "grant" such a patent license to a 496 | party means to make such an agreement or commitment not to enforce a 497 | patent against the party. 498 | 499 | If you convey a covered work, knowingly relying on a patent license, 500 | and the Corresponding Source of the work is not available for anyone 501 | to copy, free of charge and under the terms of this License, through a 502 | publicly available network server or other readily accessible means, 503 | then you must either (1) cause the Corresponding Source to be so 504 | available, or (2) arrange to deprive yourself of the benefit of the 505 | patent license for this particular work, or (3) arrange, in a manner 506 | consistent with the requirements of this License, to extend the patent 507 | license to downstream recipients. "Knowingly relying" means you have 508 | actual knowledge that, but for the patent license, your conveying the 509 | covered work in a country, or your recipient's use of the covered work 510 | in a country, would infringe one or more identifiable patents in that 511 | country that you have reason to believe are valid. 512 | 513 | If, pursuant to or in connection with a single transaction or 514 | arrangement, you convey, or propagate by procuring conveyance of, a 515 | covered work, and grant a patent license to some of the parties 516 | receiving the covered work authorizing them to use, propagate, modify 517 | or convey a specific copy of the covered work, then the patent license 518 | you grant is automatically extended to all recipients of the covered 519 | work and works based on it. 520 | 521 | A patent license is "discriminatory" if it does not include within 522 | the scope of its coverage, prohibits the exercise of, or is 523 | conditioned on the non-exercise of one or more of the rights that are 524 | specifically granted under this License. You may not convey a covered 525 | work if you are a party to an arrangement with a third party that is 526 | in the business of distributing software, under which you make payment 527 | to the third party based on the extent of your activity of conveying 528 | the work, and under which the third party grants, to any of the 529 | parties who would receive the covered work from you, a discriminatory 530 | patent license (a) in connection with copies of the covered work 531 | conveyed by you (or copies made from those copies), or (b) primarily 532 | for and in connection with specific products or compilations that 533 | contain the covered work, unless you entered into that arrangement, 534 | or that patent license was granted, prior to 28 March 2007. 535 | 536 | Nothing in this License shall be construed as excluding or limiting 537 | any implied license or other defenses to infringement that may 538 | otherwise be available to you under applicable patent law. 539 | 540 | 12. No Surrender of Others' Freedom. 541 | 542 | If conditions are imposed on you (whether by court order, agreement or 543 | otherwise) that contradict the conditions of this License, they do not 544 | excuse you from the conditions of this License. If you cannot convey a 545 | covered work so as to satisfy simultaneously your obligations under this 546 | License and any other pertinent obligations, then as a consequence you may 547 | not convey it at all. For example, if you agree to terms that obligate you 548 | to collect a royalty for further conveying from those to whom you convey 549 | the Program, the only way you could satisfy both those terms and this 550 | License would be to refrain entirely from conveying the Program. 551 | 552 | 13. Use with the GNU Affero General Public License. 553 | 554 | Notwithstanding any other provision of this License, you have 555 | permission to link or combine any covered work with a work licensed 556 | under version 3 of the GNU Affero General Public License into a single 557 | combined work, and to convey the resulting work. The terms of this 558 | License will continue to apply to the part which is the covered work, 559 | but the special requirements of the GNU Affero General Public License, 560 | section 13, concerning interaction through a network will apply to the 561 | combination as such. 562 | 563 | 14. Revised Versions of this License. 564 | 565 | The Free Software Foundation may publish revised and/or new versions of 566 | the GNU General Public License from time to time. Such new versions will 567 | be similar in spirit to the present version, but may differ in detail to 568 | address new problems or concerns. 569 | 570 | Each version is given a distinguishing version number. If the 571 | Program specifies that a certain numbered version of the GNU General 572 | Public License "or any later version" applies to it, you have the 573 | option of following the terms and conditions either of that numbered 574 | version or of any later version published by the Free Software 575 | Foundation. If the Program does not specify a version number of the 576 | GNU General Public License, you may choose any version ever published 577 | by the Free Software Foundation. 578 | 579 | If the Program specifies that a proxy can decide which future 580 | versions of the GNU General Public License can be used, that proxy's 581 | public statement of acceptance of a version permanently authorizes you 582 | to choose that version for the Program. 583 | 584 | Later license versions may give you additional or different 585 | permissions. However, no additional obligations are imposed on any 586 | author or copyright holder as a result of your choosing to follow a 587 | later version. 588 | 589 | 15. Disclaimer of Warranty. 590 | 591 | THERE IS NO WARRANTY FOR THE PROGRAM, TO THE EXTENT PERMITTED BY 592 | APPLICABLE LAW. EXCEPT WHEN OTHERWISE STATED IN WRITING THE COPYRIGHT 593 | HOLDERS AND/OR OTHER PARTIES PROVIDE THE PROGRAM "AS IS" WITHOUT WARRANTY 594 | OF ANY KIND, EITHER EXPRESSED OR IMPLIED, INCLUDING, BUT NOT LIMITED TO, 595 | THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR 596 | PURPOSE. THE ENTIRE RISK AS TO THE QUALITY AND PERFORMANCE OF THE PROGRAM 597 | IS WITH YOU. SHOULD THE PROGRAM PROVE DEFECTIVE, YOU ASSUME THE COST OF 598 | ALL NECESSARY SERVICING, REPAIR OR CORRECTION. 599 | 600 | 16. Limitation of Liability. 601 | 602 | IN NO EVENT UNLESS REQUIRED BY APPLICABLE LAW OR AGREED TO IN WRITING 603 | WILL ANY COPYRIGHT HOLDER, OR ANY OTHER PARTY WHO MODIFIES AND/OR CONVEYS 604 | THE PROGRAM AS PERMITTED ABOVE, BE LIABLE TO YOU FOR DAMAGES, INCLUDING ANY 605 | GENERAL, SPECIAL, INCIDENTAL OR CONSEQUENTIAL DAMAGES ARISING OUT OF THE 606 | USE OR INABILITY TO USE THE PROGRAM (INCLUDING BUT NOT LIMITED TO LOSS OF 607 | DATA OR DATA BEING RENDERED INACCURATE OR LOSSES SUSTAINED BY YOU OR THIRD 608 | PARTIES OR A FAILURE OF THE PROGRAM TO OPERATE WITH ANY OTHER PROGRAMS), 609 | EVEN IF SUCH HOLDER OR OTHER PARTY HAS BEEN ADVISED OF THE POSSIBILITY OF 610 | SUCH DAMAGES. 611 | 612 | 17. Interpretation of Sections 15 and 16. 613 | 614 | If the disclaimer of warranty and limitation of liability provided 615 | above cannot be given local legal effect according to their terms, 616 | reviewing courts shall apply local law that most closely approximates 617 | an absolute waiver of all civil liability in connection with the 618 | Program, unless a warranty or assumption of liability accompanies a 619 | copy of the Program in return for a fee. 620 | 621 | END OF TERMS AND CONDITIONS 622 | 623 | How to Apply These Terms to Your New Programs 624 | 625 | If you develop a new program, and you want it to be of the greatest 626 | possible use to the public, the best way to achieve this is to make it 627 | free software which everyone can redistribute and change under these terms. 628 | 629 | To do so, attach the following notices to the program. It is safest 630 | to attach them to the start of each source file to most effectively 631 | state the exclusion of warranty; and each file should have at least 632 | the "copyright" line and a pointer to where the full notice is found. 633 | 634 | 635 | Copyright (C) 636 | 637 | This program is free software: you can redistribute it and/or modify 638 | it under the terms of the GNU General Public License as published by 639 | the Free Software Foundation, either version 3 of the License, or 640 | (at your option) any later version. 641 | 642 | This program is distributed in the hope that it will be useful, 643 | but WITHOUT ANY WARRANTY; without even the implied warranty of 644 | MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the 645 | GNU General Public License for more details. 646 | 647 | You should have received a copy of the GNU General Public License 648 | along with this program. If not, see . 649 | 650 | Also add information on how to contact you by electronic and paper mail. 651 | 652 | If the program does terminal interaction, make it output a short 653 | notice like this when it starts in an interactive mode: 654 | 655 | Copyright (C) 656 | This program comes with ABSOLUTELY NO WARRANTY; for details type `show w'. 657 | This is free software, and you are welcome to redistribute it 658 | under certain conditions; type `show c' for details. 659 | 660 | The hypothetical commands `show w' and `show c' should show the appropriate 661 | parts of the General Public License. Of course, your program's commands 662 | might be different; for a GUI interface, you would use an "about box". 663 | 664 | You should also get your employer (if you work as a programmer) or school, 665 | if any, to sign a "copyright disclaimer" for the program, if necessary. 666 | For more information on this, and how to apply and follow the GNU GPL, see 667 | . 668 | 669 | The GNU General Public License does not permit incorporating your program 670 | into proprietary programs. If your program is a subroutine library, you 671 | may consider it more useful to permit linking proprietary applications with 672 | the library. If this is what you want to do, use the GNU Lesser General 673 | Public License instead of this License. But first, please read 674 | . 675 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # Unddit 2 | [Unddit](https://www.unddit.com) is a site for undoing the removal of comments for [Reddit](https://www.reddit.com). 3 | Just go to any Reddit post and replace the `re` of `reddit` in the URL with `un` to see all removed comments. 4 | 5 | This is a done by comparing the comments being stored in [Jason Baumgartner's](https://pushshift.io/) [Pushshift Reddit API](https://github.com/pushshift/api) and the ones from Reddit's API. The frontend, developed by Jesper Wrang and originally available at [removeddit.com](https://removeddit.com), is written in [React](https://reactjs.org/) and uses [Sass](https://sass-lang.com/) as the CSS Preprocessor. 6 | 7 | # Development 8 | Download Unddit: 9 | ```bash 10 | git clone https://github.com/gurnec/removeddit.git 11 | ``` 12 | 13 | Download [npm](https://docs.npmjs.com/downloading-and-installing-node-js-and-npm), or update your existing npm to the latest version: 14 | ```bash 15 | mkdir npm && cd npm 16 | npm --no-package-lock install npm 17 | mv node_modules ../removeddit/ && cd ../removeddit && rmdir ../npm 18 | alias npm="$(pwd)/node_modules/.bin/npm" 19 | ``` 20 | 21 | Build the Javascript files and launch a local server for development: 22 | ```bash 23 | npm install 24 | npm start 25 | ``` 26 | 27 | Visit http://localhost:8080 and make sure the site is running. If you're getting connection errors to Reddit or Pushshift, it might be because you're running a VPN. Try turning it off for development. 28 | 29 | The CSS is built separately (to keep the build steps / configs very simple) by running: 30 | ```bash 31 | npm run css 32 | ``` 33 | -------------------------------------------------------------------------------- /dist/images/error.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/gurnec/removeddit/b7c868b1275f4b7c727ae9f90f653d60ab7115cb/dist/images/error.png -------------------------------------------------------------------------------- /dist/images/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/gurnec/removeddit/b7c868b1275f4b7c727ae9f90f653d60ab7115cb/dist/images/favicon.ico -------------------------------------------------------------------------------- /dist/images/loading.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/gurnec/removeddit/b7c868b1275f4b7c727ae9f90f653d60ab7115cb/dist/images/loading.gif -------------------------------------------------------------------------------- /dist/images/success.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/gurnec/removeddit/b7c868b1275f4b7c727ae9f90f653d60ab7115cb/dist/images/success.png -------------------------------------------------------------------------------- /dist/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | Unddit 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 |
15 | 16 | 17 | -------------------------------------------------------------------------------- /dist/main.css: -------------------------------------------------------------------------------- 1 | :root{--background: #262626;--scrolltrack: black;--scrollthumb: #888;--scrollbar: #888 black;--light: #ddd;--white: white;--border: #767676;--border-lt: #808080;--deleted-bg: #00007d;--removed-bg: #840c09;--link: #8cb3d9;--author: #6a98af;--dim: #828282;--score: #b4b4b4;--rank: #505050;--odd-bg: #121212;--even-bg: #161616;--comment-brd: #333;--tooltip-bg: #121212;--diff-ins: #050;--diff-del: #800;--diff-mod: #770;--thread-title: #a6a6a6;--thread-score: #646464;--thread-domain: #888;--thread-flair: #c8c8c8;--thread-flr-bg: #404040;--thread-flr-brd: #4d4d4d;--thread-brd: #666;--thread-rest: #ccc;--thread-rest-bg: #264d73;--thread-rest-brd: #2966a3;--about-bg: #161616;--about-q: #add8e6;--l-background: #262626;--l-scrolltrack: black;--l-scrollthumb: #888;--l-scrollbar: #888 black;--l-light: #ddd;--l-white: white;--l-border: #767676;--l-border-lt: #808080;--l-deleted-bg: #00007d;--l-removed-bg: #840c09;--l-link: #8cb3d9;--l-author: #6a98af;--l-dim: #828282;--l-score: #b4b4b4;--l-rank: #505050;--l-odd-bg: #121212;--l-even-bg: #161616;--l-comment-brd: #333;--l-tooltip-bg: #121212;--l-diff-ins: #050;--l-diff-del: #800;--l-diff-mod: #770;--l-thread-title: #a6a6a6;--l-thread-score: #646464;--l-thread-domain: #888;--l-thread-flair: #c8c8c8;--l-thread-flr-bg: #404040;--l-thread-flr-brd: #4d4d4d;--l-thread-brd: #666;--l-thread-rest: #ccc;--l-thread-rest-bg: #264d73;--l-thread-rest-brd: #2966a3;--l-about-bg: #161616;--l-about-q: #add8e6}[data-theme=LIGHT]{--background: #f1f1f1;--scrolltrack: #e7e7e7;--scrollthumb: #eee;--scrollbar: auto;--light: #111;--white: black;--border: #898989;--border-lt: #7f7f7f;--deleted-bg: #a3c2ff;--removed-bg: #ff9494;--link: #00e;--author: #369;--dim: #737373;--score: #4b4b4b;--rank: #afafaf;--odd-bg: #f6f6f6;--even-bg: white;--comment-brd: #ccc;--tooltip-bg: white;--diff-ins: #afa;--diff-del: #faa;--diff-mod: #ff9;--thread-title: #4d4d4d;--thread-score: #878787;--thread-domain: #777;--thread-flair: black;--thread-flr-bg: #c9c9c9;--thread-flr-brd: #999;--thread-brd: #999;--thread-rest: #333;--thread-rest-bg: #d9b28c;--thread-rest-brd: #d6995c;--about-bg: white;--about-q: #522719}[data-theme=LIGHT],[data-theme=SYSTEM]{--l-background: #f1f1f1;--l-scrolltrack: #e7e7e7;--l-scrollthumb: #e7e7e7;--l-scrollbar: auto;--l-light: #111;--l-white: black;--l-border: #898989;--l-border-lt: #7f7f7f;--l-deleted-bg: #a3c2ff;--l-removed-bg: #ff9494;--l-link: #00e;--l-author: #369;--l-dim: #737373;--l-score: #4b4b4b;--l-rank: #afafaf;--l-odd-bg: #f6f6f6;--l-even-bg: white;--l-comment-brd: #ccc;--l-tooltip-bg: white;--l-diff-ins: #afa;--l-diff-del: #faa;--l-diff-mod: #ff9;--l-thread-title: #4d4d4d;--l-thread-score: #878787;--l-thread-domain: #777;--l-thread-flair: black;--l-thread-flr-bg: #c9c9c9;--l-thread-flr-brd: #999;--l-thread-brd: #999;--l-thread-rest: #333;--l-thread-rest-bg: #d9b28c;--l-thread-rest-brd: #d6995c;--l-about-bg: white;--l-about-q: #522719}html{background-color:var(--background);font-family:verdana,arial,helvetica,sans-serif;scrollbar-color:var(--scrollbar);transition-property:background-color;transition-timing-function:ease-out;transition-duration:0s}@media(prefers-color-scheme: light){html{background-color:var(--l-background)}}html ::-webkit-scrollbar{background-color:var(--scrolltrack)}@media(prefers-color-scheme: light){html ::-webkit-scrollbar{background-color:var(--l-scrolltrack)}}html ::-webkit-scrollbar-thumb{-webkit-box-shadow:inset 0 0 8px rgba(0,0,0,.8);background-color:var(--scrollthumb)}@media(prefers-color-scheme: light){html ::-webkit-scrollbar-thumb{background-color:var(--l-scrollthumb)}}html ::-webkit-scrollbar-corner{-webkit-box-shadow:inset 0 0 8px rgba(0,0,0,.8);background-color:var(--scrollthumb)}@media(prefers-color-scheme: light){html ::-webkit-scrollbar-corner{background-color:var(--l-scrollthumb)}}@media(prefers-color-scheme: light){html{scrollbar-color:var(--l-scrollbar)}}div,input{transition-property:background-color,border-color;transition-timing-function:ease-out;transition-duration:.4s}body{margin:0}.wait{cursor:wait}.main{margin:8px 15px 15px 15px;color:var(--white)}@media(prefers-color-scheme: light){.main{color:var(--l-white)}}.removed{background-color:var(--removed-bg)}@media(prefers-color-scheme: light){.removed{background-color:var(--l-removed-bg)}}.deleted{background-color:var(--deleted-bg)}@media(prefers-color-scheme: light){.deleted{background-color:var(--l-deleted-bg)}}.removed-text{color:#c70300}.deleted-text{color:blue}a{color:var(--link)}@media(prefers-color-scheme: light){a{color:var(--l-link)}}a:link,a:visited,a:active{text-decoration:none}a:hover{text-decoration:underline}.author{color:var(--author)}@media(prefers-color-scheme: light){.author{color:var(--l-author)}}.author:not([href]){color:inherit;text-decoration:none}.nowrap{display:inline-block !important}.space{margin-left:5px}select{background:rgba(0,0,0,0);border:0;color:var(--dim)}@media(prefers-color-scheme: light){select{color:var(--l-dim)}}@media(pointer: coarse),(hover: none){span[title],a[title]{position:relative;display:inline-flex;justify-content:center}span[title]:hover::after,a[title]:hover::after{content:attr(title);position:absolute;top:95%;z-index:1;padding:3px;min-width:132px;font-weight:normal;text-align:center;color:var(--white);background-color:var(--tooltip-bg);border:1px solid var(--thread-brd);border-radius:3px}}@media(pointer: coarse)and (prefers-color-scheme: light),(hover: none)and (prefers-color-scheme: light){span[title]:hover::after,a[title]:hover::after{color:var(--l-white);background-color:var(--l-tooltip-bg);border-color:var(--l-thread-brd)}}header{background-color:#c70300;color:#fff;display:flex;justify-content:space-between;align-items:center;margin:7px;padding:7px}header #header h1{margin:0 0 7px;text-align:center}header #header .switch-toggle{margin-right:14px;float:left;font-size:14px}header #header .switch-toggle label{cursor:pointer}header #header a[href]{color:#fff;font-size:20px}header #status{display:flex;justify-content:space-between;align-items:center}header #status #status-text,header #status #status-helpurl{margin:0 20px 0 0;text-align:center}header #status #status-helpurl{color:#fff;font-size:20px}header #status #status-image{height:64px;width:64px;border-radius:32px}#main-box{margin:0 auto;padding:20px;border-radius:5px;color:var(--light);word-wrap:break-word;max-width:800px;background-color:var(--about-bg)}@media(prefers-color-scheme: light){#main-box{color:var(--l-light);background-color:var(--l-about-bg)}}#main-box h2{margin:20px 0px 12px}#main-box h2.about{margin:0;color:#c70300}#main-box h2.todo{color:#239f2b}#main-box h2.contact{color:#1b767a}#main-box .highlighted{animation:highlighted-anim 3s ease-out}@keyframes highlighted-anim{0%{background-color:var(--about-q)}}@media(prefers-color-scheme: light){@keyframes highlighted-anim{0%{background-color:var(--l-about-q)}}}#main-box .question{font-size:18px;color:var(--about-q)}@media(prefers-color-scheme: light){#main-box .question{color:var(--l-about-q)}}#main-box ul{padding-left:30px;margin:0}#main-box .bookmarklet{background:#c70300;color:#fff;padding:9px;font-size:large;font-weight:bold;display:inline-block;border-radius:5px;margin:0 7px}.comment{min-width:240px;margin:0 0 8px 0;padding:5px 8px 5px 20px;border:1px solid var(--comment-brd);border-radius:3px;color:var(--light);font-size:14px}@media(prefers-color-scheme: light){.comment{border-color:var(--l-comment-brd);color:var(--l-light)}}.comment .highlighted{border:2px solid var(--thread-rest-brd)}@media(prefers-color-scheme: light){.comment .highlighted{border-color:var(--l-thread-rest-brd)}}.comment .comment-head{font-size:10px}.comment .comment-collapse{cursor:pointer}.comment .comment-collapsed span,.comment .comment-collapsed a:not(.comment-collapse){color:var(--dim);font-style:oblique}@media(prefers-color-scheme: light){.comment .comment-collapsed span,.comment .comment-collapsed a:not(.comment-collapse){color:var(--l-dim)}}.comment .comment-author{font-weight:bold}.comment .comment-author:not([href]){color:var(--dim)}@media(prefers-color-scheme: light){.comment .comment-author:not([href]){color:var(--l-dim)}}.comment .comment-poster{color:#ddd;background-color:#0055df;padding:0 2px;border-radius:3px}.comment .comment-score{color:var(--score);font-weight:bold}@media(prefers-color-scheme: light){.comment .comment-score{color:var(--l-score)}}.comment .comment-time{color:var(--dim)}@media(prefers-color-scheme: light){.comment .comment-time{color:var(--l-dim)}}.comment .comment-body{max-width:840px;line-height:20px}.comment .comment-body p{margin:5px 0;line-height:20px}.comment .comment-body a:hover{text-decoration:none}.comment .comment-links{margin-bottom:6px}.comment .comment-links a{color:var(--dim);font-weight:bold;font-size:10px;margin-right:4px;cursor:pointer}@media(prefers-color-scheme: light){.comment .comment-links a{color:var(--l-dim)}}.comment .comment-links a.wait{cursor:wait}.comment .comment-links a.wait:hover{text-decoration:none}.comment-odd{background-color:var(--odd-bg)}@media(prefers-color-scheme: light){.comment-odd{background-color:var(--l-odd-bg)}}.comment-even{background-color:var(--even-bg)}@media(prefers-color-scheme: light){.comment-even{background-color:var(--l-even-bg)}}#comment-info{margin-top:10px;font-weight:bold;padding-bottom:5px;border-bottom:1px dotted var(--border-lt);font-size:16px}@media(prefers-color-scheme: light){#comment-info{border-bottom-color:var(--l-border-lt)}}#comment-info span{margin-right:8px}#comment-sort,#comment-sort input{color:var(--border-lt);font-size:12px;margin:5px 0;background-color:var(--background)}@media(prefers-color-scheme: light){#comment-sort,#comment-sort input{color:var(--l-border-lt);background-color:var(--l-background)}}#comment-sort input{border-color:var(--border)}@media(prefers-color-scheme: light){#comment-sort input{border-color:var(--l-border)}}#comment-sort input[type=number]{width:54px;appearance:textfield}#comment-sort input[type=number]:hover,#comment-sort input[type=number]:focus{appearance:none}#comment-sort input:hover,#comment-sort input:focus,#comment-sort select:hover,#comment-sort select:focus{color:var(--light)}@media(prefers-color-scheme: light){#comment-sort input:hover,#comment-sort input:focus,#comment-sort select:hover,#comment-sort select:focus{color:var(--l-light)}}#comment-sort option{color:var(--light);background-color:var(--background)}@media(prefers-color-scheme: light){#comment-sort option{color:var(--l-light);background-color:var(--l-background)}}#comment-sort .attention{outline:3px solid #c70300;border-radius:2px;animation:attention-anim 1s steps(2, jump-none) 2}@keyframes attention-anim{100%{outline-style:none}}.thread{display:flex;flex-grow:1;margin-bottom:7px;border-radius:1px;padding-top:6px}.thread .thumbnail{width:70px;margin-right:3px;margin-top:-2px}.thread .thumbnail img{border-radius:1px}.thread .thumbnail-default{background-image:url("https://www.redditstatic.com/sprite-reddit.6Om8v6KMv28.png");background-position:0px -1099px;background-repeat:no-repeat;height:50px}.thread .thumbnail-self{background-image:url("https://www.redditstatic.com/sprite-reddit.6Om8v6KMv28.png");background-position:0px -1267px;background-repeat:no-repeat;height:50px}.thread .thumbnail-image{background-image:url("https://www.redditstatic.com/sprite-reddit.6Om8v6KMv28.png");background-position:0px -1043px;background-repeat:no-repeat;height:50px}.thread .thumbnail-nsfw{background-image:url("https://www.redditstatic.com/sprite-reddit.6Om8v6KMv28.png");background-position:0px -1155px;background-repeat:no-repeat;height:50px}.thread .thumbnail-spoiler{background-image:url("https://www.redditstatic.com/sprite-reddit.6Om8v6KMv28.png");background-position:0px -1211px;background-repeat:no-repeat;height:50px}.thread .thread-score-box{margin:0 7px;width:43px}.thread .vote{background-image:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAC0AAAAcCAMAAADC4sagAAABFFBMVEUjJCQiIiIjIyMkIiIkJCQlJSUlJicmJiYnIyEnJycnKCsoKCgpLC8rIyErKyssMDUvLy8wJCAwMDAxMTEyMjI0NDQ2NjY3JR83Nzc5OTk7Ozs8PDw9PT0+Pj4/Pz9AQEBBQUFCQkJDQ0NGRkZISEhKSkpKV2tLS0tMTExOTk5PT09QYHdSUlJTU1NVVVVWVlZXV1dXaINYWFhaWlpabYlbW1tecpBgYGBhYWFid5dkZGRle5xlfJ1pgKRrhKhshKlshapuLhZwirFyjbV0j7h4lL97mcZ9MBR/nsyCo9OOMxGcNQ+eNg+kNw6sOA2vOAy0OQy7Ogq/OwrBOwrDPAnLPQjPPQfTPgfbPwXjQQTrQgPzQwLKxGgxAAAAAXRSTlMAQObYZgAAAAlwSFlzAAALEwAACxMBAJqcGAAAAVlJREFUOMu9lF1TwjAQRTcMvmeQOi1QPmxFBQTxW1ERUUFEUVRU/P//w9yGmBTFyZPnpXNmbju76W6IJM8Uw49rLa6Tz4mpq/mCqY3Gvqnj6XQ61lp0mGd8favCwx2tow8wUlpwGWOZrNJKjXO+UVc6fJcMZzV7IswSOU/qej0l0rwyq33wphhAM1kWkcy70GB7mUfUNqG9V02PyPMTMs2Wig5RaTctwzxVXyPqvJh0VkJBIKJ4huncCRAvHOEZyGKegO4a6UDrIdLGCT4C6/QDsE7fA+v0HdAadWqk0SH9D3sgXkm4uJIDYKTFnwwXd3kMrNOnwDp9BmzS5QuTshN1iDRwfkxV9VJTJXLzSWYM+NzEEjWvFE2oGvCE7/2yDeL8riWzM8xmorRazLlNI2rdgNb3ZYLF1Es/t8VE7X6/39Yqlt4tLLwhiLq3XVNLfumP24fo3Opm+wLGCVa252Y8tQAAAABJRU5ErkJggg==);background-repeat:no-repeat;margin-left:auto;margin-right:auto;width:15px;height:14px;cursor:pointer}.thread .upvote{background-position:-15px 0px;margin-top:2px}.thread .downvote{background-position:-15px -14px;margin-top:2px}.thread .thread-score{color:var(--thread-score);font-size:13px;font-weight:bold;text-align:center}@media(prefers-color-scheme: light){.thread .thread-score{color:var(--l-thread-score)}}.thread .link-flair{display:inline-block;color:var(--thread-flair);background-color:var(--thread-flr-bg);margin-right:5px;border:1px solid var(--thread-flr-brd);border-radius:2px;padding:0 2px;font-size:10px}@media(prefers-color-scheme: light){.thread .link-flair{color:var(--l-thread-flair);background-color:var(--l-thread-flr-bg);border-color:var(--l-thread-flr-brd)}}.thread .thread-title{color:var(--thread-title);margin-right:5px}@media(prefers-color-scheme: light){.thread .thread-title{color:var(--l-thread-title)}}.thread .thread-title:hover{text-decoration:none}.thread .domain{color:var(--thread-domain);font-size:10px}@media(prefers-color-scheme: light){.thread .domain{color:var(--l-thread-domain)}}.thread .thread-image{max-width:768px;max-height:768px}.thread .thread-info{color:var(--dim);font-size:10px;margin-top:2px}@media(prefers-color-scheme: light){.thread .thread-info{color:var(--l-dim)}}.thread-content{margin:0 7px}.thread-content .thread-selftext{border:1px solid var(--thread-brd);border-radius:7px;margin:5px 0 7px;padding:5px 10px;max-width:840px;color:var(--light);font-size:14px}@media(prefers-color-scheme: light){.thread-content .thread-selftext{border-color:var(--l-thread-brd);color:var(--l-light)}}.thread-content .thread-selftext p{margin:5px 0;line-height:20px}.thread-content .thread-selftext a:hover{text-decoration:none}.thread-content .thread-selftext p:first-child{margin-top:0px}.thread-content .thread-selftext p:last-child{margin-bottom:0px}.thread-content .total-comments{font-size:10px;font-weight:bold;margin-top:4px;padding-bottom:7px}.thread-content .total-comments a,.thread-content .total-comments span{color:var(--dim);margin-right:4px}@media(prefers-color-scheme: light){.thread-content .total-comments a,.thread-content .total-comments span{color:var(--l-dim)}}.thread-content .total-comments a{cursor:pointer}.thread-selftext ins.diffins,.thread-selftext ins.diffmod,.comment ins.diffins,.comment ins.diffmod{text-decoration:none;background-color:var(--diff-ins)}@media(prefers-color-scheme: light){.thread-selftext ins.diffins,.thread-selftext ins.diffmod,.comment ins.diffins,.comment ins.diffmod{background-color:var(--l-diff-ins)}}.thread-selftext ins.mod,.comment ins.mod{text-decoration:none;background-color:var(--diff-mod)}@media(prefers-color-scheme: light){.thread-selftext ins.mod,.comment ins.mod{background-color:var(--l-diff-mod)}}.thread-selftext del.diffdel,.thread-selftext del.diffmod,.comment del.diffdel,.comment del.diffmod{background-color:var(--diff-del)}@media(prefers-color-scheme: light){.thread-selftext del.diffdel,.thread-selftext del.diffmod,.comment del.diffdel,.comment del.diffmod{background-color:var(--l-diff-del)}}.view-rest-of-comment{background-color:var(--thread-rest-bg);border-color:var(--thread-rest-brd);font-size:13px;padding:10px;color:var(--thread-rest);margin-bottom:10px}@media(prefers-color-scheme: light){.view-rest-of-comment{background-color:var(--l-thread-rest-bg);border-color:var(--l-thread-rest-brd);color:var(--l-thread-rest)}}.view-rest-of-comment .faux-link{color:var(--link)}@media(prefers-color-scheme: light){.view-rest-of-comment .faux-link{color:var(--l-link)}}.load-more{font-weight:bold;font-size:10px}.load-more a,.load-more span{margin-left:16px}.load-more a{cursor:pointer}.load-more .fade{animation:fade-anim 3s 5s ease-in-out forwards}@keyframes fade-anim{100%{color:var(--background)}}@media(prefers-color-scheme: light){@keyframes fade-anim{100%{color:var(--l-background)}}}.post-rank{min-width:20px;color:var(--rank);font-size:16px;text-align:right;margin:14px 4px 0 0}@media(prefers-color-scheme: light){.post-rank{color:var(--l-rank)}}.modal{display:block;position:fixed;z-index:1;padding-top:100px;left:0;top:0;width:100%;height:100%;background-color:#000;background-color:rgba(0,0,0,.4)}.modal-content{position:relative;margin:auto;padding:0;border:1px solid #888;width:80%;background-color:var(--background);box-shadow:0 4px 8px 0 rgba(0,0,0,.2),0 6px 20px 0 rgba(0,0,0,.19);-webkit-animation-name:animatetop;-webkit-animation-duration:.4s;animation-name:animatetop;animation-duration:.4s}@media(prefers-color-scheme: light){.modal-content{background-color:var(--l-background)}}@-webkit-keyframes animatetop{0%{top:-300px;opacity:0}100%{top:0;opacity:1}}@keyframes animatetop{0%{top:-300px;opacity:0}100%{top:0;opacity:1}}.close{color:#fff;float:right;font-size:28px;font-weight:bold}.close:hover,.close:focus{color:#000;text-decoration:none;cursor:pointer}.modal-header{padding:2px 16px;color:#fff;background-color:#c70300}.modal-body{padding:2px 16px 16px} 2 | .switch-toggle a,.switch-light span span{display:none}@media only screen{.switch-light{position:relative;display:block}.switch-light::after{clear:both;content:"";display:table}.switch-light *,.switch-light *:before,.switch-light *:after{box-sizing:border-box}.switch-light a{display:block;transition:all .2s ease-out}.switch-light label,.switch-light>span{line-height:2em}.switch-light input:focus~span a,.switch-light input:focus+label{outline-width:2px;outline-style:solid;outline-color:Highlight}}@media only screen and (-webkit-min-device-pixel-ratio: 0){.switch-light input:focus~span a,.switch-light input:focus+label{outline-color:-webkit-focus-ring-color;outline-style:auto}}@media only screen{.switch-light input{position:absolute;opacity:0;z-index:3}.switch-light input:checked~span a{right:0%}.switch-light strong{font-weight:inherit}.switch-light>span{position:relative;overflow:hidden;display:block;min-height:2em;padding:0;text-align:left}.switch-light span span{position:relative;z-index:2;display:block;float:left;width:50%;text-align:center;user-select:none}.switch-light a{position:absolute;right:50%;top:0;z-index:1;display:block;width:50%;height:100%;padding:0}.switch-light.row{display:flex}.switch-light .alert-light{color:#333}.switch-toggle{position:relative;display:block;padding:0 !important}.switch-toggle::after{clear:both;content:"";display:table}.switch-toggle *,.switch-toggle *:before,.switch-toggle *:after{box-sizing:border-box}.switch-toggle a{display:block;transition:all .2s ease-out}.switch-toggle label,.switch-toggle>span{line-height:2em}.switch-toggle input:focus~span a,.switch-toggle input:focus+label{outline-width:2px;outline-style:solid;outline-color:Highlight}}@media only screen and (-webkit-min-device-pixel-ratio: 0){.switch-toggle input:focus~span a,.switch-toggle input:focus+label{outline-color:-webkit-focus-ring-color;outline-style:auto}}@media only screen{.switch-toggle input{position:absolute;left:0;opacity:0}.switch-toggle input+label{position:relative;z-index:2;display:block;float:left;padding:0 8px;margin:0;text-align:center}.switch-toggle a{position:absolute;top:0;left:0;padding:0;z-index:1;width:10px;height:100%}.switch-toggle label:nth-child(2):nth-last-child(4),.switch-toggle label:nth-child(2):nth-last-child(4)~label,.switch-toggle label:nth-child(2):nth-last-child(4)~a{width:50%}.switch-toggle label:nth-child(2):nth-last-child(4)~input:checked:nth-child(3)+label~a{left:50%}.switch-toggle label:nth-child(2):nth-last-child(6),.switch-toggle label:nth-child(2):nth-last-child(6)~label,.switch-toggle label:nth-child(2):nth-last-child(6)~a{width:33.33%}.switch-toggle label:nth-child(2):nth-last-child(6)~input:checked:nth-child(3)+label~a{left:33.33%}.switch-toggle label:nth-child(2):nth-last-child(6)~input:checked:nth-child(5)+label~a{left:66.66%}.switch-toggle label:nth-child(2):nth-last-child(8),.switch-toggle label:nth-child(2):nth-last-child(8)~label,.switch-toggle label:nth-child(2):nth-last-child(8)~a{width:25%}.switch-toggle label:nth-child(2):nth-last-child(8)~input:checked:nth-child(3)+label~a{left:25%}.switch-toggle label:nth-child(2):nth-last-child(8)~input:checked:nth-child(5)+label~a{left:50%}.switch-toggle label:nth-child(2):nth-last-child(8)~input:checked:nth-child(7)+label~a{left:75%}.switch-toggle label:nth-child(2):nth-last-child(10),.switch-toggle label:nth-child(2):nth-last-child(10)~label,.switch-toggle label:nth-child(2):nth-last-child(10)~a{width:20%}.switch-toggle label:nth-child(2):nth-last-child(10)~input:checked:nth-child(3)+label~a{left:20%}.switch-toggle label:nth-child(2):nth-last-child(10)~input:checked:nth-child(5)+label~a{left:40%}.switch-toggle label:nth-child(2):nth-last-child(10)~input:checked:nth-child(7)+label~a{left:60%}.switch-toggle label:nth-child(2):nth-last-child(10)~input:checked:nth-child(9)+label~a{left:80%}.switch-toggle label:nth-child(2):nth-last-child(12),.switch-toggle label:nth-child(2):nth-last-child(12)~label,.switch-toggle label:nth-child(2):nth-last-child(12)~a{width:16.6%}.switch-toggle label:nth-child(2):nth-last-child(12)~input:checked:nth-child(3)+label~a{left:16.6%}.switch-toggle label:nth-child(2):nth-last-child(12)~input:checked:nth-child(5)+label~a{left:33.2%}.switch-toggle label:nth-child(2):nth-last-child(12)~input:checked:nth-child(7)+label~a{left:49.8%}.switch-toggle label:nth-child(2):nth-last-child(12)~input:checked:nth-child(9)+label~a{left:66.4%}.switch-toggle label:nth-child(2):nth-last-child(12)~input:checked:nth-child(11)+label~a{left:83%}.switch-toggle.switch-candy,.switch-light.switch-candy>span{background-color:#2d3035;border-radius:3px;box-shadow:inset 0 2px 6px rgba(0, 0, 0, 0.3),0 1px 0 rgba(255, 255, 255, 0.2)}.switch-light.switch-candy span span,.switch-light.switch-candy input:checked~span span:first-child,.switch-toggle.switch-candy label{color:#fff;font-weight:bold;text-align:center;text-shadow:1px 1px 1px #191b1e}.switch-light.switch-candy input~span span:first-child,.switch-light.switch-candy input:checked~span span:nth-child(2),.switch-candy input:checked+label{color:#333;text-shadow:0 1px 0 rgba(255, 255, 255, 0.5)}.switch-candy a{border:1px solid #333;border-radius:3px;box-shadow:0 1px 1px rgba(0, 0, 0, 0.2),inset 0 1px 1px rgba(255, 255, 255, 0.45);background-color:#70c66b;background-image:linear-gradient(rgba(255, 255, 255, 0.2), transparent)}.switch-candy-blue a{background-color:#38a3d4}.switch-candy-yellow a{background-color:#f5e560}.switch-ios.switch-light span span{color:#888b92}.switch-ios.switch-light a{left:0;top:0;width:32px;height:32px;background-color:#fff;border-radius:100%;border:4px solid #d8d9db;transition:all .2s ease-out}.switch-ios.switch-light>span{display:block;width:100%;height:32px;background-color:#d8d9db;border-radius:28px;transition:all .4s ease-out}.switch-ios.switch-light>span span{position:absolute;top:0;left:0;width:100%;opacity:0;line-height:30px;vertical-align:middle;transition:all .2s ease-out}.switch-ios.switch-light>span span:first-of-type{opacity:1;padding-left:30px}.switch-ios.switch-light>span span:last-of-type{padding-right:30px}.switch-ios.switch-light input:checked~span a{left:100%;border-color:#4bd865;margin-left:-32px}.switch-ios.switch-light input:checked~span{border-color:#4bd865;box-shadow:inset 0 0 0 30px #4bd865}.switch-ios.switch-light input:checked~span span:first-of-type{opacity:0}.switch-ios.switch-light input:checked~span span:last-of-type{opacity:1;color:#fff}.switch-ios.switch-toggle{background-color:#d8d9db;border-radius:30px;box-shadow:inset rgba(0, 0, 0, 0.1) 0 1px 0}.switch-ios.switch-toggle a{background-color:#4bd865;border:2px solid #d8d9db;border-radius:28px;transition:all .12s ease-out}.switch-ios.switch-toggle label{height:2.4em;color:#888b92;line-height:2.4em;vertical-align:middle}.switch-ios input:checked+label{color:#3e4043}.switch-toggle.switch-holo,.switch-light.switch-holo>span{background-color:#464747;border-radius:1px;box-shadow:inset rgba(0, 0, 0, 0.1) 0 1px 0;color:#fff;text-transform:uppercase}.switch-holo label{color:#fff}.switch-holo>span span{opacity:0;transition:all .1s}.switch-holo>span span:first-of-type{opacity:1}.switch-holo>span span,.switch-holo label{font-size:85%;line-height:34.5px}.switch-holo a{background-color:#666;border-radius:1px;box-shadow:inset rgba(255, 255, 255, 0.2) 0 1px 0,inset rgba(0, 0, 0, 0.3) 0 -1px 0}.switch-holo.switch-light input:checked~span a{background-color:#0e88b1}.switch-holo.switch-light input:checked~span span:first-of-type{opacity:0}.switch-holo.switch-light input:checked~span span:last-of-type{opacity:1}.switch-light.switch-material a{top:-3px;width:28px;height:28px;border-radius:50%;background:#fafafa;box-shadow:0 2px 2px 0 rgba(0, 0, 0, 0.14),0 3px 2px -2px rgba(0, 0, 0, 0.2),0 2px 4px 0 rgba(0, 0, 0, 0.12);transition:right .28s cubic-bezier(0.4, 0, 0.2, 1)}.switch-material.switch-light{overflow:visible}.switch-material.switch-light::after{clear:both;content:"";display:table}.switch-material.switch-light>span{overflow:visible;position:relative;top:3px;width:52px;height:24px;min-height:auto;border-radius:16px;background:rgba(0, 0, 0, 0.26)}.switch-material.switch-light span span{position:absolute;clip:rect(0 0 0 0)}.switch-material.switch-light input:checked~span a{right:0;background:#3f51b5;box-shadow:0 3px 4px 0 rgba(0, 0, 0, 0.14),0 3px 3px -2px rgba(0, 0, 0, 0.2),0 1px 6px 0 rgba(0, 0, 0, 0.12)}.switch-material.switch-light input:checked~span{background:rgba(63, 81, 181, 0.5)}.switch-toggle.switch-material{overflow:visible}.switch-toggle.switch-material::after{clear:both;content:"";display:table}.switch-toggle.switch-material a{top:48%;width:6px !important;height:6px;margin-left:4px;background:#3f51b5;border-radius:100%;transform:translateY(-50%);transition:transform .4s ease-in}.switch-toggle.switch-material label{color:rgba(0, 0, 0, 0.54);font-size:1em}.switch-toggle.switch-material label:before{content:"";position:absolute;top:48%;left:0;display:block;width:14px;height:14px;border-radius:100%;border:2px solid rgba(0, 0, 0, 0.54);transform:translateY(-50%)}.switch-toggle.switch-material input:checked+label:before{border-color:#3f51b5}.switch-light.switch-material>span:before,.switch-light.switch-material>span:after,.switch-toggle.switch-material label:after{content:"";position:absolute;top:0;left:0;z-index:3;display:block;width:64px;height:64px;border-radius:100%;background:#3f51b5;opacity:.4;margin-left:-20px;margin-top:-20px;transform:scale(0);transition:opacity .4s ease-in}.switch-light.switch-material>span:after{left:auto;right:0;margin-left:0;margin-right:-20px}.switch-toggle.switch-material label:after{width:52px;height:52px;margin-top:-12px}@keyframes materialRipple{0%{transform:scale(0)}20%{transform:scale(1)}100%{opacity:0;transform:scale(1)}}.switch-material.switch-light input:not(:checked)~span:after,.switch-material.switch-light input:checked~span:before,.switch-toggle.switch-material input:checked+label:after{animation:materialRipple .4s ease-in}.switch-light.switch-material.switch-light input~span:before,.switch-light.switch-material.switch-light input~span:after,.switch-material.switch-toggle input+label:after{visibility:hidden}.switch-light.switch-material.switch-light input:focus:checked~span:before,.switch-light.switch-material.switch-light input:focus:not(:checked)~span:after,.switch-material.switch-toggle input:focus:checked+label:after{visibility:visible}}@media only screen and (-webkit-max-device-pixel-ratio: 2)and (max-device-width: 1280px){.switch-light,.switch-toggle{-webkit-animation:webkitSiblingBugfix infinite 1s}}@-webkit-keyframes webkitSiblingBugfix{from{-webkit-transform:translate3d(0, 0, 0)}to{-webkit-transform:translate3d(0, 0, 0)}} 3 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "removeddit", 3 | "version": "1.1.8", 4 | "description": "View removed comments from reddit", 5 | "main": "src/index.js", 6 | "repository": { 7 | "type": "git", 8 | "url": "git+https://github.com/gurnec/removeddit.git" 9 | }, 10 | "keywords": [ 11 | "reddit", 12 | "comments", 13 | "removed", 14 | "deleted" 15 | ], 16 | "author": "Jesper Wrang", 17 | "license": "GPL-3.0", 18 | "bugs": { 19 | "url": "https://github.com/gurnec/removeddit/issues" 20 | }, 21 | "homepage": "https://github.com/gurnec/removeddit#readme", 22 | "scripts": { 23 | "start": "webpack-dev-server --mode development", 24 | "build": "webpack --mode production", 25 | "css": "sass -s compressed src/sass/index.sass >dist/main.css && sass -s compressed node_modules/css-toggle-switch/dist/toggle-switch-px.css >>dist/main.css", 26 | "eslint": "eslint src/*.js 'src/api/**' 'src/pages/**'" 27 | }, 28 | "dependencies": { 29 | "@ali-tas/htmldiff-js": "^1.1.3", 30 | "core-js": "^3.30.1", 31 | "npm": "^8.19.4", 32 | "react": "^16.14.0", 33 | "react-dom": "^16.14.0", 34 | "react-router-dom": "^5.3.4", 35 | "snuownd": "github:JordanMilne/snuownd", 36 | "unstated": "^2.1.1", 37 | "whatwg-fetch": "^3.6.2" 38 | }, 39 | "devDependencies": { 40 | "@babel/cli": "^7.21.0", 41 | "@babel/core": "^7.21.4", 42 | "@babel/eslint-parser": "^7.21.3", 43 | "@babel/preset-env": "^7.21.4", 44 | "@babel/preset-react": "^7.18.6", 45 | "acorn": "^8.8.2", 46 | "babel-loader": "^8.3.0", 47 | "css-toggle-switch": "^4.1.0", 48 | "eslint": "^8.39.0", 49 | "eslint-plugin-react": "^7.32.2", 50 | "eslint-plugin-react-hooks": "^4.6.0", 51 | "sass": "^1.62.0", 52 | "webpack": "^5.80.0", 53 | "webpack-cli": "^4.10.0", 54 | "webpack-dev-server": "^4.13.3" 55 | }, 56 | "overrides": { 57 | "minimist": "git+https://github.com/meszaros-lajos-gyorgy/minimist-lite#semver:^v2.2.1" 58 | } 59 | } 60 | -------------------------------------------------------------------------------- /src/api/pushshift/index.js: -------------------------------------------------------------------------------- 1 | import { fetchJson, sleep } from '../../utils' 2 | 3 | export const chunkSize = 1000; 4 | const postURL = 'https://api.pushshift.io/reddit/search/submission?filter=author,created_utc,domain,edited,id,link_flair_text,num_comments,permalink,position,removed_by_category,retrieved_on,retrieved_utc,score,selftext,subreddit,thumbnail,thumbnail_height,thumbnail_width,title,url&ids=' 5 | const commentURL = 'https://api.pushshift.io/reddit/search/comment?filter=author,body,created_utc,id,link_id,parent_id,retrieved_on,retrieved_utc,score,subreddit&' 6 | const commentURLbyIDs = `${commentURL}ids=` 7 | const commentURLbyLink = `${commentURL}limit=${chunkSize}&sort=id&order=asc&link_id=` 8 | 9 | const errorHandler = (msg, origError, from) => { 10 | console.error(from + ': ' + origError) 11 | const error = new Error(msg) 12 | if (origError.name == 'TypeError') // Usually indicates that Pushshift is down 13 | error.helpUrl = '/about#psdown' 14 | throw error 15 | } 16 | 17 | class TokenBucket { 18 | 19 | // Refills tokens at a rate of one per msRefillIntvl millis, storing up to size tokens. 20 | constructor(msRefillIntvl, size) { 21 | if (!(msRefillIntvl > 0)) 22 | throw RangeError('msRefillIntvl must be > 0') 23 | if (!(size > 0)) 24 | throw RangeError('size must be > 0') 25 | this._msRefillIntvl = msRefillIntvl 26 | this._maxSize = size 27 | this._tokens = size 28 | // Invariant: this._msNextRefill is valid iff this._tokens < this._maxSize 29 | } 30 | 31 | // Removes one token, waiting for it to refill if none are available. 32 | async waitForToken() { 33 | let msNow 34 | // Calculate if/how many tokens to refill 35 | if (this._tokens < this._maxSize) { // this._msNextRefill is valid 36 | msNow = Date.now() 37 | if (msNow >= this._msNextRefill) { 38 | const newTokens = Math.floor((msNow - this._msNextRefill) / this._msRefillIntvl) + 1 39 | this._tokens += newTokens 40 | if (this._tokens < this._maxSize) 41 | this._msNextRefill += newTokens * this._msRefillIntvl 42 | else 43 | this._tokens = this._maxSize // this._msNextRefill is now invalid 44 | } 45 | } 46 | // Remove a token or wait for _msNextRefill, and recalculate it 47 | if (this._tokens > 0) { 48 | if (this._tokens == this._maxSize) // this._msNextRefill is invalid, 49 | this._msNextRefill = (msNow || Date.now()) + this._msRefillIntvl // make it valid 50 | this._tokens-- 51 | } else { // this._msNextRefill is valid and msNow has already been set above 52 | await sleep(this._msNextRefill - msNow) 53 | this._msNextRefill += this._msRefillIntvl 54 | } 55 | } 56 | 57 | // Removes all tokens, and will refill the next token msNextAvail 58 | // millis from now. After it's refilled, resumes normal refill rate. 59 | setNextAvail(msNextAvail) { 60 | this._tokens = 0 61 | this._msNextRefill = Date.now() + msNextAvail 62 | } 63 | } 64 | 65 | const pushshiftTokenBucket = new TokenBucket(515, 7) 66 | 67 | export const getPost = async threadID => { 68 | await pushshiftTokenBucket.waitForToken() 69 | try { 70 | return (await fetchJson(`${postURL}${parseInt(threadID, 36)}`)).data[0] 71 | } catch (error) { 72 | errorHandler('Could not get removed/edited post', error, 'pushshift.getPost') 73 | } 74 | } 75 | 76 | // Starting sometime around May/6/2022, queries using the `ids` parameter 77 | // started returning decimal IDs for the `_id` members instead of fullnames. 78 | const toBase36 = id => { 79 | if (!id) 80 | return id 81 | if (typeof id == 'number') 82 | return id.toString(36) 83 | else 84 | return id[2] == '_' ? id.substring(3) : id 85 | } 86 | 87 | export const getCommentsFromIds = async commentIDs => { 88 | if (commentIDs.length == 0) 89 | return [] 90 | let response, delay = 0 91 | while (true) { 92 | await pushshiftTokenBucket.waitForToken() 93 | try { 94 | response = await fetchJson(`${commentURLbyIDs}${commentIDs.map(id => parseInt(id, 36)).join()}`) 95 | break 96 | } catch (error) { 97 | if (delay >= 2000) // after ~4s of consecutive failures 98 | errorHandler('Could not get removed comments', error, 'pushshift.getCommentsFromIds') // rethrows 99 | delay = delay * 2 || 125 100 | pushshiftTokenBucket.setNextAvail(delay) 101 | console.log('pushshift.getCommentsFromIds delay: ' + delay) 102 | } 103 | } 104 | return response.data.map(c => { 105 | c.link_id = toBase36(c.link_id) 106 | c.parent_id = toBase36(c.parent_id) || c.link_id 107 | return c 108 | }) 109 | } 110 | 111 | // Comments w/a created_utc in the ranges below must be queried *without* the faster `q=*` parameter: 112 | // 1504224000 - 1506815999 (Sep/1/2017 0:00 - Sep/30/2017 23:59:59 UTC) 113 | // 1517443200 - 1522540799 (Feb/1/2018 0:00 - Mar/31/2018 23:59:59 UTC) 114 | // The ranges below subtract two weeks from the range start and optionally add two to the end. 115 | // TODO: Pushshift requests w/o `q=*` are broken; revert this change when they're fixed 116 | //const inBrokenRange = (utc, looseEnd = false) => looseEnd ? 117 | // utc > 1503014400 && utc < 1508025599 || utc > 1516233600 && utc < 1523750399 : 118 | // utc > 1503014400 && utc < 1506815999 || utc > 1516233600 && utc < 1522540799 119 | 120 | // The callback() function is called with an Array of comments after each chunk is 121 | // retrieved. It should return as quickly as possible (scheduling time-taking work 122 | // later), and may return false to cause getComments to exit early, or true otherwise. 123 | export const getComments = async (callback, threadID, maxComments, after = -1, before = undefined) => { 124 | let chunks = Math.floor(maxComments / chunkSize), response, lastCreatedUtc = 1 125 | while (true) { 126 | 127 | let query = commentURLbyLink + parseInt(threadID, 36) 128 | //if (!inBrokenRange(after)) 129 | // query += '&q=*' 130 | query += `&since=${after + 1}` 131 | if (before) 132 | query += `&until=${before}` 133 | let delay = 0 134 | while (true) { 135 | await pushshiftTokenBucket.waitForToken() 136 | try { 137 | response = await fetchJson(query) 138 | break 139 | } catch (error) { 140 | if (delay >= 8000) // after ~16s of consecutive failures 141 | errorHandler('Could not get removed comments', error, 'pushshift.getComments') // rethrows 142 | delay = delay * 2 || 125 143 | pushshiftTokenBucket.setNextAvail(delay) 144 | if (!callback([])) 145 | return [ lastCreatedUtc, false ] 146 | console.log('pushshift.getComments delay: ' + delay) 147 | } 148 | } 149 | const comments = response.data 150 | const exitEarly = !callback(comments.map(c => ({ 151 | ...c, 152 | parent_id: c.parent_id ? toBase36(c.parent_id) : threadID, 153 | link_id: c.link_id?.substring(3) || threadID 154 | }))) 155 | 156 | // If there's a chance the comments are in a broken range, restart the retrieval 157 | //if (firstChunk && !after && (comments.length === 0 || inBrokenRange(comments[0].created_utc, true))) 158 | // return getComments(callback, threadID, maxComments, 1503014401, before) 159 | //firstChunk = false 160 | 161 | //const loadedAllComments = Object.prototype.hasOwnProperty.call(response.metadata, 'total_results') ? 162 | // response.metadata.results_returned >= response.metadata.total_results : 163 | // comments.length < chunkSize/2 164 | const loadedAllComments = comments.length < chunkSize*3/4 165 | if (comments.length) 166 | lastCreatedUtc = comments[comments.length - 1].created_utc 167 | if (loadedAllComments || chunks <= 1 || exitEarly) 168 | return [ lastCreatedUtc, loadedAllComments ] 169 | chunks-- 170 | after = Math.max(lastCreatedUtc - 1, after + 1) 171 | } 172 | } 173 | -------------------------------------------------------------------------------- /src/api/reddit/auth.js: -------------------------------------------------------------------------------- 1 | import { fetchJson } from '../../utils' 2 | 3 | // Change this to your own client ID: https://www.reddit.com/prefs/apps 4 | // The app NEEDS TO BE an installed app and NOT a web app 5 | 6 | const clientID = 'NAhiRYXXEFeIXyFazmhGHQ' 7 | 8 | // Token for reddit API 9 | let token, tokenExpiresMS = 0, tokenPromise 10 | 11 | // TODO: respect login API limits? 12 | const getToken = async () => { 13 | // We have already gotten a token 14 | if (token && tokenExpiresMS > Date.now()) 15 | return token 16 | 17 | // We are already waiting to get a token 18 | if (tokenPromise) 19 | return (await tokenPromise).access_token 20 | 21 | // Headers for getting reddit api token 22 | const tokenInit = { 23 | headers: { 24 | Authorization: `Basic ${window.btoa(`${clientID}:`)}`, 25 | 'Content-Type': 'application/x-www-form-urlencoded; charset=utf-8' 26 | }, 27 | method: 'POST', 28 | body: `grant_type=${encodeURIComponent('https://oauth.reddit.com/grants/installed_client')}&device_id=DO_NOT_TRACK_THIS_DEVICE` 29 | } 30 | 31 | tokenPromise = fetchJson('https://www.reddit.com/api/v1/access_token', tokenInit) 32 | try { 33 | const response = await tokenPromise 34 | tokenExpiresMS = Date.now() + 1000*( parseInt(response.expires_in) - 10 ) 35 | token = response.access_token 36 | } catch (error) { 37 | console.error('reddit.getToken ->') 38 | throw error 39 | } finally { 40 | tokenPromise = undefined 41 | } 42 | return token 43 | } 44 | 45 | // Get header for general api calls 46 | export const getAuth = () => { 47 | return getToken() 48 | .then(token => ({ 49 | headers: { 50 | Authorization: `bearer ${token}` 51 | } 52 | })) 53 | } 54 | -------------------------------------------------------------------------------- /src/api/reddit/index.js: -------------------------------------------------------------------------------- 1 | import { getAuth } from './auth' 2 | import { fetchJsonAndHeaders, sleep } from '../../utils' 3 | 4 | export const chunkSize = 100; 5 | const baseURL = 'https://oauth.reddit.com' 6 | 7 | let limitDefault = 300 8 | let limitRemaining = limitDefault, limitResetAtMS = 0 9 | 10 | // Fetch JSON results from the Reddit API, respecting the reported API limits 11 | const fetchJson = async url => { 12 | const init = await getAuth() 13 | 14 | if (limitRemaining <= 0) { 15 | const waitMS = limitResetAtMS - Date.now() + 1000 16 | if (waitMS > 0) { 17 | // TODO: update the UI to notify user of a delay 18 | console.log(`Waiting ${waitMS}ms for Reddit API`) 19 | await sleep(waitMS) 20 | } 21 | if (limitRemaining <= 0) 22 | limitRemaining = limitDefault 23 | } 24 | 25 | limitRemaining-- 26 | init.headers['Accept-Language'] = 'en' 27 | const response = await fetchJsonAndHeaders(url, init) 28 | const headers = response.headers 29 | 30 | const reportedLimitRemaining = parseInt(headers.get('X-Ratelimit-Remaining')) 31 | const reportedLimitDefault = reportedLimitRemaining + parseInt(headers.get('X-Ratelimit-Used')) 32 | if (reportedLimitDefault && reportedLimitDefault != limitDefault) { 33 | // This should only happen if Reddit changes the API limits 34 | console.warn('Correcting limitDefault from', limitDefault, 'to', reportedLimitDefault) 35 | limitDefault = reportedLimitDefault 36 | } 37 | 38 | const reportedLimitResetAtMS = parseInt(headers.get('X-Ratelimit-Reset')) * 1000 + Date.now() 39 | if (reportedLimitResetAtMS > limitResetAtMS + 30000) { 40 | // This happens each time the Reddit API resets our limit 41 | console.debug('Resetting limitResetAtMS from', limitResetAtMS, 'to', reportedLimitResetAtMS) 42 | limitResetAtMS = reportedLimitResetAtMS 43 | } else { 44 | if (reportedLimitResetAtMS < limitResetAtMS) { 45 | // This happens sporadically due to jitter 46 | console.debug('Decreasing limitResetAtMS from', limitResetAtMS, 'to', reportedLimitResetAtMS) 47 | limitResetAtMS = reportedLimitResetAtMS 48 | } 49 | if (reportedLimitRemaining < limitRemaining) { 50 | // This probably shouldn't happen unless Reddit decreases the API limits 51 | console.warn('Decreasing limitRemaining from', limitRemaining, 'to', reportedLimitRemaining) 52 | limitRemaining = reportedLimitRemaining 53 | } 54 | } 55 | return response.json 56 | } 57 | 58 | const errorHandler = (origError, from) => { 59 | console.error(from + ': ' + origError) 60 | const error = new Error('Could not connect to Reddit') 61 | error.origError = origError 62 | if (origError.name == 'TypeError') { // The exception when blocked by Tracking Protection 63 | // https://stackoverflow.com/a/9851769 64 | const isFirefox = typeof InstallTrigger !== 'undefined' 65 | if (isFirefox) 66 | error.helpUrl = '/about#firefox' 67 | else { 68 | const isChrome = !!window.chrome && (!!window.chrome.webstore || !!window.chrome.runtime) 69 | const isEdgeChromium = isChrome && (navigator.userAgent.indexOf("Edg") != -1) 70 | if (isEdgeChromium) 71 | error.helpUrl = '/about#edge' 72 | } 73 | } 74 | throw error 75 | } 76 | 77 | // Return the post itself 78 | export const getPost = threadID => ( 79 | fetchJson(`${baseURL}/comments/${threadID}.json?limit=1`) 80 | .then(thread => thread[0].data.children[0].data) 81 | .catch(error => errorHandler(error, 'reddit.getPost')) 82 | ) 83 | 84 | //// Fetch multiple threads (via the info endpoint) 85 | //export const getThreads = threadIDs => ( 86 | // fetchJson(`${baseURL}/api/info?id=${threadIDs.map(id => `t3_${id}`).join()}`) 87 | // .then(response => response.data.children.map(threadData => threadData.data)) 88 | // .catch(error => errorHandler(error, 'reddit.getThreads')) 89 | //) 90 | 91 | // Fetch multiple comments by id 92 | export const getComments = commentIDs => ( 93 | fetchJson(`${baseURL}/api/info?id=${commentIDs.map(id => `t1_${id}`).join()}`) 94 | .then(results => results.data.children.map(({data}) => data)) 95 | .catch(error => errorHandler(error, 'reddit.getComments')) 96 | ) 97 | 98 | // Fetch up to 8 of a comment's parents 99 | export const getParentComments = (threadID, commentID, parents) => { 100 | parents = Math.min(parents, 8) 101 | return fetchJson( 102 | `${baseURL}/comments/${threadID}?comment=${commentID}&context=${parents}&limit=${parents}&threaded=false&showmore=false` 103 | ) 104 | .then(results => { 105 | const { children } = results[1].data 106 | // If there are fewer parents than requested, remove the comments which aren't parents 107 | const idx = children.findIndex(c => c.data.id == commentID) 108 | if (idx >= 0) 109 | children.splice(idx) 110 | return children.map(({data}) => data) 111 | }) 112 | .catch(error => errorHandler(error, 'reddit.getParentComments')) 113 | } 114 | -------------------------------------------------------------------------------- /src/api/removeddit/index.js: -------------------------------------------------------------------------------- 1 | //import { fetchJson } from '../../utils' 2 | // 3 | //const baseURL = 'http://unddit.com/api' 4 | // 5 | //export const getRemovedThreadIDs = (subreddit = '', page = 1) => { 6 | // if (subreddit.toLowerCase() === 'all') { 7 | // subreddit = '' 8 | // } 9 | // 10 | // return fetchJson(`${baseURL}/threads?subreddit=${subreddit}&page=${page - 1}`) 11 | // .catch(error => { 12 | // console.error('removeddit.getRemovedThreadIDs: ' + error) 13 | // throw new Error('Could not get removed threads') 14 | // }) 15 | //} 16 | -------------------------------------------------------------------------------- /src/index.js: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | import ReactDOM from 'react-dom' 3 | import { BrowserRouter, Switch, Route, Redirect } from 'react-router-dom' 4 | import { Provider } from 'unstated' 5 | 6 | import Header from './pages/common/Header' 7 | import About from './pages/about' 8 | //import Subreddit from './pages/subreddit' 9 | import Thread from './pages/thread' 10 | import NotFound from './pages/404' 11 | 12 | /* global __dirname */ // an eslint directive 13 | 14 | ReactDOM.render( 15 | 16 | 17 | 18 |
19 |
20 | 21 | 22 | 23 | 24 | 25 | 27 | 28 | 29 | 30 |
31 | 32 | 33 | , 34 | document.getElementById('app') 35 | ) 36 | -------------------------------------------------------------------------------- /src/pages/404.js: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | 3 | export default function NotFound() { 4 | return

404 Error - Not found

5 | } 6 | -------------------------------------------------------------------------------- /src/pages/about.js: -------------------------------------------------------------------------------- 1 | import React, { useEffect } from 'react' 2 | import { Link } from 'react-router-dom' 3 | import { connect } from '../state' 4 | 5 | const About = props => { 6 | document.title = 'About Unddit' 7 | if (props.global.state.statusImage !== undefined) { 8 | props.global.clearStatus() 9 | } 10 | 11 | const { hash } = props.location; 12 | 13 | useEffect(() => { 14 | const id = hash.substr(1) 15 | if (id) 16 | document.getElementById(id)?.scrollIntoView({behavior: 'smooth'}) 17 | }, [hash]) 18 | 19 | return ( 20 |
21 |
22 |

About

23 |

24 | Display 25 | removed 26 | (by mods) and 27 | deleted 28 | (by users) comments/posts for Reddit. 29 |

30 |

31 | PC Usage: Press Ctrl-Shift-B to view the bookmark bar, and then drag this bookmarklet: 32 | 33 | Unddit 34 | 35 | to the bar and click it when viewing a Reddit post. 36 |

37 | Android Usage: Install this app from the Play store, 38 | and then, while viewing a post in whichever Reddit app you prefer, click the Share button and select Unddit (which might be beneath Reveddit). 39 |

40 | Alternatively you can manually replace the re of reddit in the URL with un. 41 |
42 | E.g. https://unddit.com/r/Bitcoin/comments/7jzpir/ 43 |

44 |

45 | Created by Jesper Wrang and 46 | uses Jason Baumgartner's service for getting removed comments. 47 |

48 |

FAQ

49 |
50 | Q: Why do new posts all have zero comments? 51 |

52 | On May 1st, Reddit banned Pushshift from the Reddit API. 53 | Since Unddit relies on Pushshift to find removed and deleted comments and posts, any posts made after this time will appear to have zero comments on Unddit. 54 | The official announcement is available here. 55 |

56 |
57 |
58 | Q: I posted some sensitive information on Reddit. Can you delete this from your page? 59 |

60 | No, I can't remove anything myself since I am not the not the one storing all the deleted comments. 61 | This is done by an external service called Pushshift.io. 62 | If you want something sensitive removed permanently you should follow the instructions here. 63 |

64 |
65 |
66 | Q: Didn't this site used to be named Removeddit? 67 |

68 | The Removeddit site stopped working a short while ago, and this site was made to partially replace it. 69 | All creddit for the software which makes this site possible goes to the original author, Jesper Wrang. 70 | Any bugs or problems are due to this site's operator. 71 | In particular, Unddit does not currently support browsing subreddits, only specific posts. 72 |

73 |
74 |
75 | Q: How does it work? 76 |

77 | This page is only possible because of the amazing work done by Jason. 78 | His service Pushshift.io actively listens for new comments on Reddit and stores them in a database. 79 | Then sites like Unddit and Reveddit can fetch these comments from Pushshift. 80 | Unddit knows what comments Reddit shows (from Reddit's API) and what comments should be shown (from Pushshift's API). 81 | By comparing the comments from these 2 APIs, it can figure out what has been deleted and removed. 82 |

83 |
84 |
85 | Q: Why doesn't it work in Firefox? 86 |

87 | If you have enabled Strict Enhanced Tracking Protection in Firefox, this will prevent Unddit from contacting Reddit's API. 88 | Luckily there is an easy workaround. 89 | Click on the shield symbol on the left side of the address bar, and then switch off Enhanced Tracking Protection for this site. 90 | It will still be enabled for other sites. 91 |

92 |
93 |
94 | Q: Why doesn't it work in Edge? 95 |

96 | If you have enabled Strict Tracking Protection in Edge, this will prevent Unddit from contacting Reddit's API. 97 | Luckily there is an easy workaround. 98 | Click on the padlock symbol on the left side of the address bar, and then switch off Tracking Protection for this site. 99 | It will still be enabled for other sites. 100 |

101 |
102 |
103 | Q: Is Unddit/Pushshift down? 104 |

105 | Occasionally, Pushshift (the service used by Unddit) goes offline for a while. 106 | This can result in “Could not get removed post/comments” errors on Unddit. 107 | To check its status, click this direct link to Pushshift. 108 | You should either get a message saying that “Pushshift is UP!” within the first few words of the message, or an error. 109 |

110 |
111 |
112 | Q: What's the difference between Ceddit and Removeddit/Unddit? 113 |

114 | Not much. Removeddit was created as a temporary replacement for Ceddit, at a time when Ceddit didn't work. 115 | Jesper thought this was necessary since he used Ceddit more then Reddit itself. 116 | Months later Ceddit was fixed, but he didn't see any reason to remove what he had built. 117 | Today both sites live side by side and strive for the same goal. 118 |

119 |
120 | There are some minor differences in them though: 121 |
    122 |
  • 123 | Ceddit respects user-made deletions while Removeddit does not. This decision was made early on and I feel like it's too late to change now. 124 | If I had created Removeddit today I might had thought more about what was right here. 125 |
    • 126 |
  • 127 | Removeddit usually loads faster since it uses a slightly different algorithm for detecting removed comments. 128 | Removeddit also uses significantly less JavaScript on the page which also should make the page load faster. 129 |
    • 130 |
  • 131 | Ceddit provides user lookup while Removeddit doesn't. 132 |
    • 133 |
134 |
135 |
136 | 137 |

Links

138 |

139 | Code on Github. 140 |

141 |
142 |
143 | ) 144 | } 145 | 146 | export default connect(About) 147 | -------------------------------------------------------------------------------- /src/pages/common/Header.js: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | import { Link } from 'react-router-dom' 3 | import { connect } from '../../state' 4 | import { theme } from '../../state' 5 | 6 | const Header = props => ( 7 |
8 | 29 |
30 | {props.global.state.statusText && 31 |

{props.global.state.statusText}

} 32 | {props.global.state.statusHelpUrl && 33 | Need help?} 34 | {props.global.state.statusImage && 35 | status} 36 |
37 |
38 | ) 39 | 40 | export default connect(Header) 41 | -------------------------------------------------------------------------------- /src/pages/common/Post.js: -------------------------------------------------------------------------------- 1 | import React, { useState } from 'react' 2 | import { Link } from 'react-router-dom' 3 | import { prettyScore, prettyDate, prettyTimeDiff, exactDateTime, parse, redditThumbnails, 4 | isDeleted, isRemoved, editedModes, editedTitles } from '../../utils' 5 | import { Diff } from '@ali-tas/htmldiff-js' 6 | 7 | const hasOwnProperty = Object.prototype.hasOwnProperty 8 | 9 | const Post = (props) => { 10 | if (!props.title) { 11 | const permalink = `/r/${props.subreddit}/comments/${props.id}/` 12 | return
13 |
14 | 30 | } 31 | 32 | let url = new URL(props.url, 'https://www.reddit.com') 33 | if ((url.hostname.endsWith('.reddit.com') || url.hostname == 'reddit.com') && 34 | url.pathname.match(/^\/(?:r|user)\/[^/]+\/comments\/./)) { 35 | url.protocol = document.location.protocol 36 | url.host = document.location.host 37 | } 38 | const isUrlThisPost = url.origin == document.location.origin && 39 | (new RegExp(`/(?:r|user)/[^/]+/comments/${props.id}\\b`)).test(url.pathname) 40 | if (isUrlThisPost) 41 | url = url.href.substring(url.origin.length) 42 | 43 | const userLink = isDeleted(props.author) ? undefined : `https://www.reddit.com/user/${props.author}` 44 | 45 | let thumbnail 46 | const thumbnailWidth = props.thumbnail_width ? props.thumbnail_width * 0.5 : 70 47 | const thumbnailHeight = props.thumbnail_height ? props.thumbnail_height * 0.5 : 70 48 | 49 | if (redditThumbnails.includes(props.thumbnail)) { 50 | thumbnail = React.createElement(isUrlThisPost ? Link : 'a', { 51 | [isUrlThisPost ? 'to' : 'href']: url, 52 | replace: isUrlThisPost ? props.isLocFullPost : undefined, 53 | className: `thumbnail thumbnail-${props.thumbnail}` 54 | }) 55 | } else if (props.thumbnail !== '') { 56 | thumbnail = React.createElement(isUrlThisPost ? Link : 'a', { 57 | [isUrlThisPost ? 'to' : 'href']: url, 58 | replace: isUrlThisPost ? props.isLocFullPost : undefined 59 | }, Thumbnail) 60 | } 61 | 62 | const innerHTML = Array(editedModes.length) 63 | if (props.removed && isRemoved(props.selftext)) { 64 | if (!hasOwnProperty.call(props, 'retrieved_utc') && !hasOwnProperty.call(props, 'retrieved_on') || !hasOwnProperty.call(props, 'created_utc')) { 65 | innerHTML[editedModes.dfault] = '

[removed too quickly to be archived]

' 66 | } else { 67 | const retrieved = hasOwnProperty.call(props, 'retrieved_utc') ? props.retrieved_utc : props.retrieved_on; 68 | innerHTML[editedModes.dfault] = `

[removed within ${prettyTimeDiff(retrieved - props.created_utc)}]

` 69 | } 70 | } else if (props.selftext && (props.is_self || !isDeleted(props.selftext))) { 71 | if (hasOwnProperty.call(props, 'edited_selftext')) { 72 | innerHTML[editedModes.orig] = parse(props.selftext) 73 | innerHTML[editedModes.edited] = parse(props.edited_selftext) 74 | innerHTML[editedModes.dfault] = Diff.execute(innerHTML[editedModes.orig], innerHTML[editedModes.edited]) 75 | } else 76 | innerHTML[editedModes.dfault] = parse(props.selftext) 77 | } 78 | 79 | // eslint-disable-next-line react-hooks/rules-of-hooks 80 | const [editedMode, setEditedMode] = useState(editedModes.dfault) 81 | 82 | const totalComments = 93 | 94 | return
95 |
96 | {props.position && 97 | {props.position}} 98 |
99 |
100 |
{prettyScore(props.score)}
101 |
102 |
103 | {thumbnail} 104 |
105 | { React.createElement(isUrlThisPost ? Link : 'a', { 106 | [isUrlThisPost ? 'to' : 'href']: url, 107 | replace: isUrlThisPost ? props.isLocFullPost : undefined, 108 | className:'thread-title' 109 | }, props.title) } 110 | {props.link_flair_text && 111 | {props.link_flair_text} 112 | } 113 | ({props.domain}) 114 |
115 | submitted {prettyDate(props.created_utc)} 116 | {props.edited && 117 | * (last edited {prettyDate(props.edited)}) 118 | } 119 |  by {props.author} to /r/{props.subreddit} 120 |
121 | {innerHTML[editedModes.dfault] === undefined && totalComments} 122 |
123 |
124 | {innerHTML[editedModes.dfault] !== undefined && 125 |
126 |
127 | {totalComments} 128 |
129 | } 130 |
131 | } 132 | 133 | export default Post 134 | -------------------------------------------------------------------------------- /src/pages/search/index.js: -------------------------------------------------------------------------------- 1 | 2 | // var radioInput = function(name, displayNames, values) { 3 | // var inputs = ""; 4 | 5 | // for(var i = 0, len = displayNames.length; i < len; i++){ 6 | // inputs += ''; 7 | // inputs += ''; 9 | // inputs += ''; 10 | // } 11 | // return inputs; 12 | // }; 13 | 14 | // var textInput = function(name){ 15 | // return ''; 16 | // }; 17 | 18 | // var label = function(name, display) { 19 | // return ''; 20 | // }; 21 | 22 | // var inputRow = function(text, input) { 23 | // return '
'+text+''+input+"
"; 24 | // }; 25 | 26 | // var selectTime = function() { 27 | // var values = ["hour", "12hour", "day", "week", "month", "6month", "year", "all"]; 28 | // var display = ["past hour", "past 12 hours", "past day", "past week", "past month", "past 6 months", "past year", "all time"]; 29 | // var html = '"; 36 | // }; 37 | 38 | // var select = function(name, display, values){ 39 | // var html = '"; 46 | // }; 47 | 48 | // return { 49 | // createSearch: function(){ 50 | // var searchBox = document.createElement("div"); 51 | // searchBox.id = "main-box"; 52 | // searchBox.className = "search-box"; 53 | // /* 54 | // Comments: 55 | // text (body) string 56 | // title (title) string 57 | // subreddit (subreddit) string 58 | // author (author) string 59 | // over_18 (over_18) sfw,nsfw,both * 60 | // locked (locked) bool * 61 | // between (after/before) "date" 62 | // sort (sort) asc,desc 63 | // */ 64 | // var html = inputRow('Im looking for: ', radioInput("thread", ["Thread","Comment"], ["true", "false"])); 65 | // html += inputRow(label("text", "Text"), textInput("text")); 66 | // html += inputRow(label("title","Title"), textInput("title")); 67 | // html += inputRow(label("subreddit", "Subreddit"), textInput("subreddit")); 68 | // html += inputRow(label("author", "Author"), textInput("author")); 69 | // html += inputRow("Over 18: ", radioInput("over_18", ["Both","NSFW","SFW"], ["both","nsfw","sfw"])); 70 | // html += inputRow("Locked: ", radioInput("locked", ["Both","True", "False"], ["both","true","false"])); 71 | // html += inputRow("Removed: ", select("removed", ["Removed and non-removed", "Only removed", "Only deleted"], ["all", "removed", "deleted"])); 72 | // html += inputRow("From:", selectTime()); 73 | // html += inputRow("Sort: ", select("sort", ["Highest score","Lowest score","Newest","Oldest"], ["score_desc","score_asc","time_desc","time_asc"])); 74 | // html += ''; 75 | // html += ''; 76 | // searchBox.innerHTML = html; 77 | 78 | // mainDiv.appendChild(searchBox); 79 | -------------------------------------------------------------------------------- /src/pages/subreddit/SubredditPagination.js: -------------------------------------------------------------------------------- 1 | //import React from 'react' 2 | // 3 | //export default (props) => { 4 | // let pageination = 5 | // 6 | // for (let i = props.start; i <= props.end; i++) { 7 | // if (props.currentPage === i) { 8 | // pageination += {i} 9 | // } else { 10 | // pageination += {i} 11 | // } 12 | // } 13 | // return ( 14 | // 24 | // ) 25 | //} 26 | -------------------------------------------------------------------------------- /src/pages/subreddit/SubredditSort.js: -------------------------------------------------------------------------------- 1 | //import React from 'react' 2 | // 3 | //export default (props) => { 4 | // const isSelected = time => props.time === time 5 | // 6 | // return ( 7 | //
8 | // top post of /r/{props.subreddit} from: 9 | // 19 | //
20 | // ) 21 | //} 22 | -------------------------------------------------------------------------------- /src/pages/subreddit/index.js: -------------------------------------------------------------------------------- 1 | //import React from 'react' 2 | //import { Link } from 'react-router-dom' 3 | //import { getRemovedThreadIDs } from '../../api/removeddit' 4 | //import { getThreads } from '../../api/reddit' 5 | //import Post from '../common/Post' 6 | //import { connect } from '../../state' 7 | // 8 | //class Subreddit extends React.Component { 9 | // state = { 10 | // threads: [], 11 | // loading: true 12 | // } 13 | // 14 | // componentDidMount() { 15 | // const { subreddit = 'all' } = this.props.match.params 16 | // this.getRemovedThreads(subreddit) 17 | // } 18 | // 19 | // // Check if the subreddit has changed in the url, and fetch threads accordingly 20 | // componentDidUpdate(prevProps) { 21 | // const { subreddit: newSubreddit = 'all' } = this.props.match.params 22 | // const { subreddit = 'all' } = prevProps.match.params 23 | // 24 | // if (subreddit !== newSubreddit) { 25 | // this.getRemovedThreads(newSubreddit) 26 | // } 27 | // } 28 | // 29 | // // Download thread IDs from removeddit API, then thread info from reddit API 30 | // getRemovedThreads(subreddit) { 31 | // document.title = `/r/${subreddit}` 32 | // this.setState({ threads: [], loading: true }) 33 | // this.props.global.setLoading('Loading removed threads...') 34 | // 35 | // getRemovedThreadIDs(subreddit) 36 | // .then(threadIDs => getThreads(threadIDs)) 37 | // .then(threads => { 38 | // threads.forEach(thread => { 39 | // thread.removed = true 40 | // thread.selftext = '' 41 | // }) 42 | // this.setState({ threads, loading: false }) 43 | // this.props.global.setSuccess() 44 | // }) 45 | // .catch(this.props.global.setError) 46 | // } 47 | // 48 | // render() { 49 | // const { subreddit = 'all' } = this.props.match.params 50 | // const noThreadsFound = this.state.threads.length === 0 && !this.state.loading 51 | // 52 | // return ( 53 | // 54 | //
55 | // /r/{subreddit} 56 | // 57 | // reddit 58 | // 59 | // reveddit 60 | //
61 | // { 62 | // noThreadsFound 63 | // ?

No removed threads found for /r/{subreddit}

64 | // : this.state.threads.map(thread => ( 65 | // 66 | // )) 67 | // } 68 | // 69 | // ) 70 | // } 71 | //} 72 | // 73 | //export default connect(Subreddit) 74 | -------------------------------------------------------------------------------- /src/pages/thread/Comment.js: -------------------------------------------------------------------------------- 1 | import React, { useState } from 'react' 2 | import { Link, NavLink } from 'react-router-dom' 3 | import { prettyScore, prettyDate, prettyTimeDiff, exactDateTime, 4 | parse, isRemoved, editedModes, editedTitles } from '../../utils' 5 | import { Diff } from '@ali-tas/htmldiff-js' 6 | 7 | const hasOwnProperty = Object.prototype.hasOwnProperty 8 | 9 | const Comment = (props) => { 10 | let commentStyle = 'comment ' 11 | 12 | if (props.removed) { 13 | commentStyle += 'removed' 14 | } else if (props.deleted) { 15 | commentStyle += 'deleted' 16 | } else { 17 | commentStyle += props.depth % 2 === 0 ? 'comment-even' : 'comment-odd' 18 | } 19 | if (props.id == props.highlightedID) { 20 | commentStyle += ' highlighted' 21 | } 22 | 23 | const innerHTML = Array(editedModes.length) 24 | if (props.removed && isRemoved(props.body)) { 25 | if (!hasOwnProperty.call(props, 'retrieved_utc') && !hasOwnProperty.call(props, 'retrieved_on') || !hasOwnProperty.call(props, 'created_utc')) { 26 | innerHTML[editedModes.dfault] = '

[removed too quickly to be archived]

' 27 | } else if (props.created_utc < 1627776000) { // Aug 1 2021 28 | const retrieved = hasOwnProperty.call(props, 'retrieved_utc') ? props.retrieved_utc : props.retrieved_on; 29 | innerHTML[editedModes.dfault] = `

[removed within ${prettyTimeDiff(retrieved - props.created_utc)}]

` 30 | } 31 | // After around Aug 1 2021, Pushshift began updating comments from Reddit after around 32 | // 24-48 hours, including removing(?) comments that were removed from Reddit. The presence 33 | // of either retrieved_utc or retrieved_on can currently be used to test for this behaviour. 34 | else if (hasOwnProperty.call(props, 'retrieved_utc')) { 35 | innerHTML[editedModes.dfault] = `

[removed within ${prettyTimeDiff(props.retrieved_utc - props.created_utc)}]

` 36 | } else { 37 | innerHTML[editedModes.dfault] = `

[either removed too quickly, or removed(?) from archive after ${prettyTimeDiff(props.retrieved_on - props.created_utc, true)}]

` 38 | } 39 | } else { 40 | if (hasOwnProperty.call(props, 'edited_body')) { 41 | innerHTML[editedModes.orig] = parse(props.body) 42 | innerHTML[editedModes.edited] = parse(props.edited_body) 43 | innerHTML[editedModes.dfault] = Diff.execute(innerHTML[editedModes.orig], innerHTML[editedModes.edited]) 44 | } else 45 | innerHTML[editedModes.dfault] = parse(props.body) 46 | } 47 | 48 | const [collapsed, setCollapsed] = useState(false) 49 | const [editedMode, setEditedMode] = useState(editedModes.dfault) 50 | const permalink = `/r/${props.subreddit}/comments/${props.link_id}/_/${props.id}/` 51 | const parentlink = props.parent_id == props.link_id ? undefined : ( 52 | props.depth == 0 ? 53 | parent 57 | : 58 | // Use a function, not just an object--state is recreated and scrollBehavior is always initialized 59 | ({...loc, hash: `#${props.parent_id}`, state: {scrollBehavior: 'smooth'}})}>parent 60 | ) 61 | 62 | return ( 63 |
64 |
65 | setCollapsed(!collapsed)} 66 | onKeyDown={e => e.key == "Enter" && setCollapsed(!collapsed)} 67 | tabIndex= {0} 68 | className='comment-collapse'>[{collapsed ? '+' : '\u2212'}] 69 | 70 | 74 | {props.author} 75 | {props.deleted && ' (deleted by user)'} 76 | 77 | 78 | {prettyScore(props.score)} point{(props.score !== 1) && 's'} 79 | 80 | {props.created_utc && 81 | {prettyDate(props.created_utc)}} 82 | {(hasOwnProperty.call(props, 'edited_body') || props.edited) && 83 | * (last edited {prettyDate(props.edited ? props.edited : props.created_utc)})} 85 |
86 |
87 |
88 |
89 | ({pathname: permalink, hash: '#comment-info', state: {scrollBehavior: 'auto'}})}>permalink 90 | reddit 91 | reveddit 92 | {parentlink} 93 | {hasOwnProperty.call(props, 'edited_body') && 94 | setEditedMode((editedMode + 1) % editedModes.length)} 95 | onKeyDown={e => e.key == "Enter" && setEditedMode((editedMode + 1) % editedModes.length)} 96 | tabIndex= {0} 97 | title= {editedTitles[editedMode]} 98 | >*edited} 99 |
100 |
101 | {props.replies.map(comment => ( 102 | 109 | ))} 110 |
111 |
112 |
113 | ) 114 | } 115 | 116 | export default Comment 117 | -------------------------------------------------------------------------------- /src/pages/thread/CommentInfo.js: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | 3 | const getProcent = (part, total) => (total === 0 ? '0.0' : ((100 * part) / total).toFixed(1)) 4 | 5 | export default function CommentInfo(props) { 6 | return
7 | 8 | removed comments: {props.removed}/{props.total} ({getProcent(props.removed, props.total)}%) 9 | 10 | 11 | deleted comments: {props.deleted}/{props.total} ({getProcent(props.deleted, props.total)}%) 12 | 13 |
14 | } 15 | -------------------------------------------------------------------------------- /src/pages/thread/CommentSection.js: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | import Comment from './Comment' 3 | import {sort, filter} from '../../state' 4 | import { 5 | topSort, bottomSort, newSort, oldSort, 6 | showRemovedAndDeleted, showRemoved, showDeleted 7 | } from '../../utils' 8 | 9 | const unflatten = (commentMap, rootID, context, postID) => { 10 | const commentTree = [] 11 | 12 | commentMap.forEach(comment => { 13 | if (comment) 14 | comment.replies = [] 15 | }) 16 | 17 | if (rootID == postID) { 18 | commentMap.forEach(comment => { 19 | if (!comment) 20 | return 21 | const parentID = comment.parent_id 22 | if (parentID == postID) 23 | commentTree.push(comment) 24 | else { 25 | const parentComment = commentMap.get(comment.parent_id) 26 | if (parentComment) 27 | parentComment.replies.push(comment) 28 | else 29 | console.warn('Missing parent ID:', parentID, 'for comment', comment) 30 | } 31 | }) 32 | return commentTree 33 | 34 | } else { 35 | const missingRootReplies = [] 36 | commentMap.forEach(comment => { 37 | if (!comment) 38 | return 39 | const parentID = comment.parent_id 40 | const parentComment = commentMap.get(parentID) 41 | if (parentComment) 42 | parentComment.replies.push(comment) 43 | else if (parentID == rootID) 44 | missingRootReplies.push(comment) 45 | }) 46 | let rootComment = commentMap.get(rootID) 47 | if (!rootComment) { 48 | const anyComment = commentMap.values().next().value 49 | if (!anyComment) 50 | return [] 51 | rootComment = { 52 | id: rootID, 53 | link_id: anyComment.link_id, 54 | parent_id: anyComment.link_id, 55 | subreddit: anyComment.subreddit, 56 | score: '?', 57 | body: '...', 58 | replies: missingRootReplies 59 | } 60 | } 61 | let newRoot 62 | while (context && rootComment.parent_id && (newRoot = commentMap.get(rootComment.parent_id))) { 63 | newRoot.replies = [rootComment] 64 | rootComment = newRoot 65 | context-- 66 | } 67 | return [rootComment] 68 | } 69 | } 70 | 71 | const sortCommentTree = (comments, sortFunction) => { 72 | comments.sort(sortFunction) 73 | 74 | comments.forEach(comment => { 75 | if (comment.replies.length > 0) { 76 | sortCommentTree(comment.replies, sortFunction) 77 | } 78 | }) 79 | } 80 | 81 | const filterCommentTree = (comments, filterFunction) => { 82 | if (comments.length === 0) { 83 | return false 84 | } 85 | 86 | let hasOkComment = false 87 | 88 | // Reverse for loop since we are removing stuff 89 | for (let i = comments.length - 1; i >= 0; i--) { 90 | const comment = comments[i] 91 | const isRepliesOk = filterCommentTree(comment.replies, filterFunction) 92 | const isCommentOk = filterFunction(comment) 93 | 94 | if (!isRepliesOk && !isCommentOk) { 95 | comments.splice(i, 1) 96 | } else { 97 | hasOkComment = true 98 | } 99 | } 100 | 101 | return hasOkComment 102 | } 103 | 104 | let commentTree, lastTotal, lastRoot, lastContext, lastFilter, lastSort, lengthBeforeFiltering 105 | 106 | const commentSection = (props) => { 107 | console.time('Build comment tree') 108 | const {total, root, context, commentFilter, commentSort} = props 109 | 110 | const needsRebuild = !(total === lastTotal && root === lastRoot && context === lastContext && ( 111 | commentFilter === lastFilter || 112 | lastFilter === filter.all || 113 | lastFilter === filter.removedDeleted && ( 114 | commentFilter === filter.removed || 115 | commentFilter === filter.deleted 116 | ) 117 | )) 118 | if (needsRebuild) { 119 | commentTree = unflatten(props.comments, root, context, props.postID) 120 | lengthBeforeFiltering = commentTree.length 121 | } 122 | 123 | if (needsRebuild || commentFilter !== lastFilter) { 124 | if (commentFilter === filter.removedDeleted) { 125 | filterCommentTree(commentTree, showRemovedAndDeleted) 126 | } else if (commentFilter === filter.removed) { 127 | filterCommentTree(commentTree, showRemoved) 128 | } else if (commentFilter === filter.deleted) { 129 | filterCommentTree(commentTree, showDeleted) 130 | } 131 | } 132 | 133 | if (needsRebuild || commentSort !== lastSort) { 134 | if (commentSort === sort.top) { 135 | sortCommentTree(commentTree, topSort) 136 | } else if (commentSort === sort.bottom) { 137 | sortCommentTree(commentTree, bottomSort) 138 | } else if (commentSort === sort.new) { 139 | sortCommentTree(commentTree, newSort) 140 | } else if (commentSort === sort.old) { 141 | sortCommentTree(commentTree, oldSort) 142 | } 143 | } 144 | 145 | lastTotal = total 146 | lastRoot = root 147 | lastContext = context 148 | lastFilter = commentFilter 149 | lastSort = commentSort 150 | console.timeEnd('Build comment tree') 151 | 152 | props.setMoreContextAvail(commentTree.length > 0 && commentTree[0].parent_id != commentTree[0].link_id) 153 | props.setAllCommentsFiltered(commentTree.length == 0 && lengthBeforeFiltering > 0) 154 | 155 | console.time('Build html tree') 156 | const htmlTree = ( 157 | commentTree.length !== 0 158 | ? commentTree.map(comment => ( 159 | 166 | )) 167 | :

No comments found

168 | ) 169 | console.timeEnd('Build html tree') 170 | return htmlTree 171 | } 172 | 173 | const areEqual = (prevProps, nextProps) => { 174 | if (prevProps.commentFilter !== nextProps.commentFilter || 175 | prevProps.commentSort !== nextProps.commentSort || 176 | prevProps.root !== nextProps.root) 177 | return false 178 | if (nextProps.reloadingComments) 179 | return true 180 | return prevProps.total === nextProps.total && 181 | prevProps.context === nextProps.context && 182 | prevProps.postAuthor === nextProps.postAuthor 183 | } 184 | 185 | export default React.memo(commentSection, areEqual) 186 | -------------------------------------------------------------------------------- /src/pages/thread/LoadMore.js: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | import {connect, maxCommentsDefault} from '../../state' 3 | 4 | let loadingStarted = false, showLoadedCount = false, lastTotal, lastContext, newComments 5 | const loadMoreComments = (props, maxComments) => { 6 | loadingStarted = true 7 | props.global.loadMoreComments(maxComments) 8 | } 9 | 10 | const loadMore = (props) => { 11 | const maxCommentsPreferred = props.global.maxComments 12 | let loadElements 13 | 14 | if (props.global.isErrored()) 15 | return null 16 | else if (props.reloadingComments) 17 | loadElements = [loading...] 18 | else { 19 | if (props.loadedAllComments) 20 | loadElements = [ loadMoreComments(props, maxCommentsDefault)}>load new comments] 21 | else { 22 | loadElements = [] 23 | if (maxCommentsPreferred <= maxCommentsDefault / 2) 24 | loadElements.push( loadMoreComments(props, maxCommentsPreferred)}>load {maxCommentsPreferred} more comments) 25 | loadElements.push( loadMoreComments(props, maxCommentsDefault)}>load {maxCommentsDefault} more comments) 26 | if (maxCommentsPreferred >= maxCommentsDefault * 2) 27 | loadElements.push( loadMoreComments(props, maxCommentsPreferred)}>load {maxCommentsPreferred} more comments) 28 | } 29 | 30 | // If loadMoreComments() was called and has completed (because reloadingComments is now false), 31 | if (loadingStarted) { 32 | showLoadedCount = true // then showLoadedCount below 33 | newComments = props.total - lastTotal 34 | lastTotal = props.total 35 | lastContext = props.context 36 | loadingStarted = false 37 | 38 | // Otherwise if the comment total or context changed w/o calling loadMoreComments(), 39 | } else if (lastTotal !== props.total || lastContext !== props.context) { 40 | showLoadedCount = false // then don't showLoadedCount below 41 | lastTotal = props.total 42 | lastContext = props.context 43 | } 44 | 45 | if (showLoadedCount) { 46 | loadElements.push( 47 | {newComments > 0 ? `loaded ${newComments} more comments` : 'no new comments found'} 48 | ) 49 | } 50 | } 51 | return

{loadElements}

52 | } 53 | 54 | export default connect(loadMore) 55 | -------------------------------------------------------------------------------- /src/pages/thread/Modal.js: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | import ReactDom from "react-dom" 3 | 4 | const Modal = props => { 5 | return
6 |
7 |
8 | props.closeModal()}>× 9 |

Pushshift Ban

10 |
11 |
12 |

13 | On May 1st, Reddit banned Pushshift from the Reddit API. 14 | Since Unddit relies on Pushshift to find removed and deleted comments and posts, any posts made after this time will appear to have zero comments on Unddit. 15 | The official announcement is available here. 16 |

17 | props.closeModalPermanent()} type='button' value='Do not show this message again' /> 18 |
19 |
20 |
21 | } 22 | 23 | export default Modal 24 | -------------------------------------------------------------------------------- /src/pages/thread/SortBy.js: -------------------------------------------------------------------------------- 1 | import React, { useState } from 'react' 2 | import {connect, sort, filter, minCommentsLimit, maxCommentsLimit, constrainMaxComments} from '../../state' 3 | 4 | const SortBy = props => { 5 | // The current value of the field; it'll be later saved after an onBlur event 6 | const [maxCommentsField, setMaxCommentsField] = useState(props.global.maxComments) 7 | const isFirefox = typeof InstallTrigger !== 'undefined' 8 | let usedMouse; 9 | 10 | return ( 11 |
12 | 13 | 14 | 23 | 24 | 25 | 26 | 27 | 36 | 37 | 38 | 39 | 40 | 41 | e.key == "Enter" && e.target.blur()} 43 | onChange= {e => setMaxCommentsField(constrainMaxComments(parseInt(e.target.value)))} 44 | onBlur= {e => e.target.value = props.global.setMaxComments(e.target.value)} 45 | { ...(isFirefox ? { 46 | onClick: e => e.target.focus() } : {}) } 47 | defaultValue={props.global.maxComments} type='number' maxLength='5' required 48 | min={minCommentsLimit} max={maxCommentsLimit} step={minCommentsLimit} /> 49 | 50 | { !props.reloadingComments && !props.loadedAllComments && !props.global.isErrored() && 51 | maxCommentsField > props.global.maxComments && maxCommentsField - minCommentsLimit >= props.total && 52 | 53 | 54 | props.global.loadMoreComments(props.global.maxComments - props.total)} type='button' value='Reload' /> 55 | } 56 |
57 | ) 58 | } 59 | 60 | export default connect(SortBy) 61 | -------------------------------------------------------------------------------- /src/pages/thread/index.js: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | import { Link } from 'react-router-dom' 3 | import { 4 | getPost, 5 | getComments as getRedditComments, 6 | getParentComments, 7 | chunkSize as redditChunkSize 8 | } from '../../api/reddit' 9 | import { 10 | getPost as getPushshiftPost, 11 | getComments as getPushshiftComments, 12 | getCommentsFromIds, 13 | chunkSize as pushshiftChunkSize 14 | } from '../../api/pushshift' 15 | import { isDeleted, isRemoved, sleep, get, put } from '../../utils' 16 | import { connect, constrainMaxComments } from '../../state' 17 | import Post from '../common/Post' 18 | import CommentSection from './CommentSection' 19 | import SortBy from './SortBy' 20 | import CommentInfo from './CommentInfo' 21 | import LoadMore from './LoadMore' 22 | import Modal from './Modal' 23 | 24 | // A FIFO queue with items pushed in individually, and shifted out in an Array of chunkSize 25 | class ChunkedQueue { 26 | 27 | constructor(chunkSize) { 28 | if (!(chunkSize > 0)) 29 | throw RangeError('chunkSize must be > 0') 30 | this._chunkSize = chunkSize 31 | this._chunks = [[]] // Array of Arrays 32 | // Invariant: this._chunks always contains at least one Array 33 | } 34 | 35 | push(x) { 36 | const last = this._chunks[this._chunks.length - 1] 37 | if (last.length < this._chunkSize) 38 | last.push(x) 39 | else 40 | this._chunks.push([x]) 41 | } 42 | 43 | hasFullChunk = () => this._chunks[0].length >= this._chunkSize * 0.9 44 | isEmpty = () => this._chunks[0].length == 0 45 | 46 | shiftChunk() { 47 | const first = this._chunks.shift() 48 | if (this._chunks.length == 0) 49 | this._chunks.push([]) 50 | return first 51 | } 52 | } 53 | 54 | // The .firstCreated of the contig containing a post's first comment (see contigs below) 55 | const EARLIEST_CREATED = 1 56 | 57 | // Key for localStorage 58 | const dismissModalKey = 'modal' 59 | 60 | class Thread extends React.Component { 61 | state = { 62 | post: {}, 63 | pushshiftCommentLookup: new Map(), 64 | removed: 0, 65 | deleted: 0, 66 | context: 0, 67 | moreContextAvail: true, 68 | allCommentsFiltered: false, 69 | loadedAllComments: false, 70 | loadingComments: true, 71 | reloadingComments: false, 72 | showModal: !get(dismissModalKey) 73 | } 74 | nextMoreContextAvail = true 75 | nextAllCommentsFiltered = false 76 | 77 | // A 'contig' is an object representing a contiguous block of comments currently being downloaded or already 78 | // downloaded, e.g. { firstCreated: #, lastCreated: # } (secs past the epoch; min. value of EARLIEST_CREATED) 79 | contigs = [] // sorted non-overlapping array of contig objects 80 | curContigIdx = 0 81 | curContig () { return this.contigs[this.curContigIdx] } 82 | nextContig () { return this.contigs[this.curContigIdx + 1] } 83 | 84 | // If the current contig and the next probably overlap, merge them 85 | // (should only be called if there's another reason to believe they overlap) 86 | mergeContigs () { 87 | const nextContig = this.nextContig() 88 | if (this.curContig().lastCreated >= nextContig?.firstCreated) // probably; definitely would be '>' 89 | nextContig.firstCreated = this.contigs.splice(this.curContigIdx, 1)[0].firstCreated 90 | else 91 | console.warn("Can't merge contigs", this.curContig(), "and", nextContig) // shouldn't happen 92 | } 93 | 94 | // Convert Reddit fullnames to their short ID (base36) form 95 | fullnamesToShortIDs (comment) { 96 | comment.parent_id = comment.parent_id?.substring(3) || this.props.match.params.threadID 97 | comment.link_id = comment.link_id?.substring(3) || this.props.match.params.threadID 98 | return comment 99 | } 100 | 101 | // Can be called when a comment is missing from Pushshift; 102 | // the comment's ids must have already been updated by fullnamesToShortIDs() 103 | useRedditComment (comment) { 104 | if (isRemoved(comment.body)) { 105 | this.state.removed++ // eslint-disable-line react/no-direct-mutation-state 106 | comment.removed = true 107 | } else if (isDeleted(comment.body)) { 108 | this.state.deleted++ // eslint-disable-line react/no-direct-mutation-state 109 | comment.deleted = true 110 | } 111 | this.state.pushshiftCommentLookup.set(comment.id, comment) 112 | } 113 | 114 | commentIdAttempts = new Set() // keeps track of attempts to load permalinks to avoid reattempts 115 | 116 | componentDidMount () { 117 | const { subreddit, threadID, commentID } = this.props.match.params 118 | const { location } = this.props 119 | this.setState({ post: {subreddit, id: threadID} }) 120 | this.props.global.setLoading('Loading post...') 121 | console.time('Load comments') 122 | 123 | // Get post from Reddit. Each code path below should end in either 124 | // setLoading() on success (if comments are still loading), or 125 | // setError() and assigning stopLoading = true on failure. 126 | getPost(threadID) 127 | .then(post => { 128 | document.title = post.title 129 | if (isDeleted(post.selftext)) 130 | post.deleted = true 131 | else if (isRemoved(post.selftext) || post.removed_by_category) 132 | post.removed = true 133 | 134 | if (post.is_self === false ? !post.deleted : !post.deleted && !post.removed && !post.edited) { 135 | this.setState({ post }) 136 | if (this.state.loadingComments) 137 | this.props.global.setLoading('Loading comments...') 138 | 139 | // Fetch the post from Pushshift if it was deleted/removed/edited 140 | } else { 141 | const redditSelftext = post.selftext 142 | if (post.is_self) 143 | post.selftext = '...' // temporarily remove selftext to avoid flashing it onscreen 144 | this.setState({ post }) 145 | getPushshiftPost(threadID) 146 | .then(origPost => { 147 | if (origPost) { 148 | 149 | // If found on Pushshift, and deleted on Reddit, use Pushshift's post instead 150 | if (post.deleted || post.removed) { 151 | origPost.score = post.score 152 | origPost.num_comments = post.num_comments 153 | origPost.edited = post.edited 154 | if (post.deleted) 155 | origPost.deleted = true 156 | else 157 | origPost.removed = true 158 | this.setState({ post: origPost }) 159 | 160 | // If found on Pushshift, but it was only edited, update and use the Reddit post 161 | } else { 162 | if (redditSelftext != origPost.selftext && !isRemoved(origPost.selftext)) { 163 | post.selftext = origPost.selftext 164 | post.edited_selftext = redditSelftext 165 | } else 166 | post.selftext = redditSelftext // edited selftext not archived by Pushshift, use Reddit's 167 | this.setState({ post }) 168 | } 169 | 170 | // Else if not found on Pushshift, nothing to do except restore the selftext (removed above) 171 | } else { 172 | post.selftext = redditSelftext 173 | this.setState({ post }) 174 | } 175 | 176 | if (this.state.loadingComments) 177 | this.props.global.setLoading('Loading comments...') 178 | }) 179 | .catch(error => { 180 | console.timeEnd('Load comments') 181 | this.props.global.setError(error, error.helpUrl) 182 | this.stopLoading = true 183 | post.selftext = redditSelftext // restore it (after temporarily removing it above) 184 | this.setState({ post }) 185 | }) 186 | } 187 | }) 188 | .catch(error => { 189 | const origMessage = error.origError?.message 190 | 191 | // Fetch the post from Pushshift if quarantined/banned (403) or not found (404) 192 | if (origMessage && (origMessage.startsWith('403') || origMessage.startsWith('404'))) { 193 | getPushshiftPost(threadID) 194 | .then(removedPost => { 195 | if (removedPost) { 196 | document.title = removedPost.title 197 | this.setState({ post: { ...removedPost, removed: true } }) 198 | if (this.state.loadingComments) 199 | this.props.global.setLoading('Loading comments...') 200 | } else { 201 | if (origMessage.startsWith('403')) { // If Reddit admits it exists but Pushshift can't find it, then 202 | this.setState({ post: { id: threadID, subreddit, removed: true } }) // create a dummy post and continue 203 | if (this.state.loadingComments) 204 | this.props.global.setLoading('Loading comments...') 205 | } else { 206 | console.timeEnd('Load comments') 207 | this.props.global.setError({ message: '404 Post not found' }) 208 | this.stopLoading = true 209 | } 210 | } 211 | }) 212 | .catch(error => { 213 | console.timeEnd('Load comments') 214 | this.props.global.setError(error, error.helpUrl) 215 | this.stopLoading = true 216 | }) 217 | 218 | } else { 219 | console.timeEnd('Load comments') 220 | this.props.global.setError(error, error.helpUrl) 221 | this.stopLoading = true 222 | } 223 | }) 224 | 225 | // The max_comments query parameter can increase the initial comments-to-download 226 | const searchParams = new URLSearchParams(location.search) 227 | const maxComments = Math.max(this.props.global.maxComments, 228 | constrainMaxComments(parseInt(searchParams.get('max_comments')))) 229 | 230 | // Get comments starting from the earliest available (not a permalink) 231 | if (commentID === undefined) { 232 | this.contigs.unshift({firstCreated: EARLIEST_CREATED}) 233 | this.getComments(maxComments) 234 | 235 | // Get comments starting from the permalink if possible, otherwise from the earliest available 236 | } else { 237 | this.commentIdAttempts.add(commentID) 238 | getRedditComments([commentID]) 239 | .then(([comment]) => { 240 | if (comment) 241 | this.fullnamesToShortIDs(comment) 242 | if (comment?.link_id != threadID) { 243 | console.timeEnd('Load comments') 244 | this.props.global.setError({ message: 'Invalid permalink' }) 245 | this.setState({loadingComments: false}) 246 | console.error('link_id mismatch:', comment) 247 | return 248 | } 249 | const context = parseInt(searchParams.get('context')) 250 | if (context > 0) 251 | this.contextPromise = this.getContext(context) 252 | this.contigs.unshift({firstCreated: comment?.created_utc || EARLIEST_CREATED}) 253 | this.getComments(maxComments, false, comment) 254 | }) 255 | .catch(() => { 256 | this.contigs.unshift({firstCreated: EARLIEST_CREATED}) 257 | this.getComments(maxComments) 258 | }) 259 | 260 | // Set the scroll location to just below the post if not already set (only with permalinks) 261 | if (!location.hash) 262 | location.hash = '#comment-info' 263 | } 264 | 265 | if (location.hash) { 266 | location.state = {scrollBehavior: 'smooth'} 267 | if (location.hash.startsWith('#thing_t1_')) 268 | location.hash = '#' + location.hash.substring(10) 269 | } 270 | } 271 | 272 | // Updates this.curContigIdx based on URL's commentID if it's already downloaded. 273 | // Returns true on success, or false if not found (and then curContigIdx is not updated). 274 | updateCurContig () { 275 | const { commentID } = this.props.match.params 276 | let curContigIdx = -1 277 | if (commentID === undefined) 278 | curContigIdx = this.contigs[0]?.firstCreated == EARLIEST_CREATED ? 0 : -1 279 | else { 280 | const created_utc = this.state.pushshiftCommentLookup.get(commentID)?.created_utc 281 | if (created_utc > EARLIEST_CREATED) 282 | curContigIdx = this.contigs.findIndex(contig => created_utc >= contig.firstCreated && created_utc <= contig.lastCreated) 283 | } 284 | if (curContigIdx < 0) 285 | return false 286 | this.setCurContig(curContigIdx) 287 | return true 288 | } 289 | setCurContig (idx) { 290 | this.curContigIdx = idx 291 | // When the current contig changes, loadedAllComments might also change 292 | const loadedAllComments = Boolean(this.curContig().loadedAllComments) 293 | if (this.state.loadedAllComments != loadedAllComments) 294 | this.setState({loadedAllComments}) 295 | } 296 | 297 | componentDidUpdate () { 298 | let { loadingComments } = this.state 299 | const { commentID } = this.props.match.params 300 | 301 | // If the max-to-download Reload button or 'load more comments' was clicked 302 | const { loadingMoreComments } = this.props.global.state 303 | if (loadingMoreComments) { 304 | this.props.global.state.loadingMoreComments = 0 305 | this.setState({reloadingComments: true}) 306 | this.props.global.setLoading('Loading comments...') 307 | console.time('Load comments') 308 | this.updateCurContig() 309 | this.getComments(loadingMoreComments, true) 310 | 311 | // Otherwise if we're not already downloading comments, check to see if we need to start 312 | } else if (!loadingComments && !this.state.reloadingComments) { 313 | 314 | // If we're loading a comment tree we haven't downloaded yet 315 | if (!this.updateCurContig()) { 316 | 317 | // If we haven't downloaded from the earliest available yet (not a permalink) 318 | if (commentID === undefined) { 319 | loadingComments = true 320 | this.setState({loadingComments}) 321 | this.props.global.setLoading('Loading comments...') 322 | console.time('Load comments') 323 | this.contigs.unshift({firstCreated: EARLIEST_CREATED}) 324 | this.setCurContig(0) 325 | this.getComments(this.props.global.maxComments) 326 | 327 | // Otherwise if we haven't downloaded this permalink yet 328 | } else if (!this.commentIdAttempts.has(commentID)) { 329 | this.commentIdAttempts.add(commentID) 330 | this.setState({reloadingComments: true}) 331 | this.props.global.setLoading('Loading comments...') 332 | console.time('Load comments') 333 | let createdUtcNotFound // true if Reddit doesn't have the comment's created_utc 334 | const hasComment = this.state.pushshiftCommentLookup.get(commentID); 335 | (hasComment ? Promise.resolve([hasComment]) : getRedditComments([commentID])) 336 | .then(([comment]) => { 337 | const created_utc = comment?.created_utc 338 | if (created_utc > EARLIEST_CREATED) { 339 | let insertBefore = this.contigs.findIndex(contig => created_utc < contig.firstCreated) 340 | if (insertBefore == -1) 341 | insertBefore = this.contigs.length 342 | 343 | // If comment isn't inside an existing contig, create a new one and start downloading 344 | if (insertBefore == 0 || created_utc >= this.contigs[insertBefore - 1].lastCreated) { 345 | this.contigs.splice(insertBefore, 0, {firstCreated: created_utc}) 346 | this.setCurContig(insertBefore) 347 | if (!hasComment) 348 | this.fullnamesToShortIDs(comment) 349 | this.getComments(this.props.global.maxComments, false, comment) 350 | 351 | // Otherwise an earlier attempt to download it from Pushshift turned up nothing, 352 | } else if (!hasComment) { 353 | this.fullnamesToShortIDs(comment) 354 | this.useRedditComment(comment) // so use the Reddit comment instead 355 | this.setCurContig(insertBefore - 1) // (this was the failed earlier attempt) 356 | console.timeEnd('Load comments') 357 | this.props.global.setSuccess() 358 | this.setState({loadingComments: false, reloadingComments: false}) 359 | } else 360 | createdUtcNotFound = true 361 | } else 362 | createdUtcNotFound = true 363 | }) 364 | .catch(() => createdUtcNotFound = true) 365 | .finally(() => { 366 | if (createdUtcNotFound) { 367 | // As a last resort, try to download starting from the previous contig; 368 | // this only occurs once per commentID due to the commentIdAttempts Set. 369 | if (this.curContigIdx > 0) 370 | this.setCurContig(this.curContigIdx - 1) 371 | // If there is no previous, create one 372 | else if (this.curContig().firstCreated != EARLIEST_CREATED) 373 | this.contigs.unshift({firstCreated: EARLIEST_CREATED}) 374 | this.getComments(this.props.global.maxComments) 375 | } 376 | }) 377 | } 378 | } // end of "If we're loading a comment tree we haven't downloaded yet" 379 | 380 | // Check if the context query parameter has changed 381 | if (commentID) { 382 | const context = Math.max(parseInt((new URLSearchParams(this.props.location.search)).get('context')) || 0, 0) 383 | if (context > this.state.context) { 384 | this.setState({reloadingComments: true}) 385 | this.props.global.setLoading('Loading comments...') 386 | console.time('Load comments') 387 | this.getContext(context) // also updates state.context 388 | .then(commentCount => { 389 | console.log('Reddit:', commentCount, 'comments') 390 | console.timeEnd('Load comments') 391 | this.props.global.setSuccess() 392 | this.setState({loadingComments: false, reloadingComments: false}) 393 | }) 394 | } else if (context != this.state.context) 395 | this.setState({ context }) 396 | } else if (0 != this.state.context) 397 | this.setState({ context: 0 }) 398 | 399 | } // end of "If we're not already downloading comments, check to see if we need to start" 400 | 401 | // Handle any requested scrolling 402 | const { location } = this.props 403 | if (location.state?.scrollBehavior && location.hash.length > 1 && 404 | !loadingComments && !this.props.global.isErrored()) { 405 | const hashElem = document.getElementById(location.hash.substring(1)) 406 | if (hashElem) { 407 | hashElem.scrollIntoView({behavior: location.state.scrollBehavior}) 408 | delete location.state 409 | } 410 | } 411 | 412 | if (this.nextMoreContextAvail != this.state.moreContextAvail) 413 | this.setState({moreContextAvail: this.nextMoreContextAvail}) 414 | if (this.nextAllCommentsFiltered != this.state.allCommentsFiltered) 415 | this.setState({allCommentsFiltered: this.nextAllCommentsFiltered}) 416 | } 417 | 418 | // Before calling, state.pushshiftCommentLookup must be populated. 419 | // Compares an array of Reddit comments with those in pushshiftCommentLookup, 420 | // updating them to reflect their removed/deleted/edited status and then 421 | // updates the state's removed/deleted count. Returns the number processed. 422 | compareAndUpdateComments (redditComments) { 423 | if (redditComments.length == 0) 424 | return 0 425 | const { pushshiftCommentLookup } = this.state 426 | let removed = 0, deleted = 0 427 | redditComments.forEach(redditComment => { 428 | let pushshiftComment = pushshiftCommentLookup.get(redditComment.id) 429 | if (pushshiftComment === undefined) { 430 | // When a parent comment is missing from pushshift, use the redditComment instead 431 | pushshiftComment = this.fullnamesToShortIDs(redditComment) 432 | pushshiftCommentLookup.set(pushshiftComment.id, pushshiftComment) 433 | } else { 434 | // Replace pushshift score with reddit (it's usually more accurate) 435 | pushshiftComment.score = redditComment.score 436 | } 437 | 438 | // Check what is removed / deleted according to reddit 439 | if (isRemoved(redditComment.body)) { 440 | removed++ 441 | pushshiftComment.removed = true 442 | } else if (isDeleted(redditComment.body)) { 443 | deleted++ 444 | pushshiftComment.deleted = true 445 | } else if (pushshiftComment !== redditComment) { 446 | if (isRemoved(pushshiftComment.body)) { 447 | // If it's deleted in pushshift, but later restored by a mod, use the restored 448 | this.fullnamesToShortIDs(redditComment) 449 | pushshiftCommentLookup.set(redditComment.id, redditComment) 450 | } else if (pushshiftComment.body != redditComment.body) { 451 | pushshiftComment.edited_body = redditComment.body 452 | pushshiftComment.edited = redditComment.edited 453 | } 454 | } 455 | }) 456 | this.setState({ removed: this.state.removed + removed, deleted: this.state.deleted + deleted }) 457 | return redditComments.length 458 | } 459 | 460 | // Before calling, either create (and set to current) a new contig to begin downloading 461 | // after a new time, or set the current contig to begin adding to the end of that contig. 462 | // persistent: if true, will try to continue downloading after the current contig has 463 | // been completed and merged with the next contig. 464 | // commentHint: a Reddit comment for use if Pushshift is missing that same comment; 465 | // its ids must have already been updated by fullnamesToShortIDs() 466 | getComments (newCommentCount, persistent = false, commentHint = undefined) { 467 | const { threadID, commentID } = this.props.match.params 468 | const { pushshiftCommentLookup } = this.state 469 | const redditIdQueue = new ChunkedQueue(redditChunkSize) 470 | const pushshiftPromises = [], redditPromises = [] 471 | let doRedditComments 472 | 473 | // Process a chunk of comments downloaded from Pushshift (called by getPushshiftComments() below) 474 | const processPushshiftComments = comments => { 475 | if (comments.length && !this.stopLoading) { 476 | pushshiftPromises.push(sleep(0).then(() => { 477 | let count = 0 478 | comments.forEach(comment => { 479 | const { id, parent_id } = comment 480 | if (!pushshiftCommentLookup.has(id)) { 481 | pushshiftCommentLookup.set(id, comment) 482 | redditIdQueue.push(id) 483 | count++ 484 | // When viewing the full thread (to prevent false positives), if a parent_id is a comment 485 | // (not a post/thread) and it's missing from Pushshift, try to get it from Reddit instead. 486 | if (commentID === undefined && parent_id != threadID && !pushshiftCommentLookup.has(parent_id)) { 487 | pushshiftCommentLookup.set(parent_id, undefined) // prevents adding it to the Queue multiple times 488 | redditIdQueue.push(parent_id) 489 | } 490 | } 491 | }) 492 | while (redditIdQueue.hasFullChunk()) 493 | doRedditComments(redditIdQueue.shiftChunk()) 494 | return count 495 | })) 496 | } 497 | return !this.stopLoading // causes getPushshiftComments() to exit early if set 498 | } 499 | 500 | // Download a list of comments by id from Reddit, and process them 501 | doRedditComments = ids => redditPromises.push(getRedditComments(ids) 502 | .then(comments => this.compareAndUpdateComments(comments)) 503 | .catch(error => { 504 | console.timeEnd('Load comments') 505 | this.props.global.setError(error, error.helpUrl) 506 | this.stopLoading = true 507 | }) 508 | ) 509 | 510 | // Download comments from Pushshift into the current contig, and process each chunk (above) as it's retrieved 511 | const after = this.curContig().lastCreated - 1 || this.curContig().firstCreated - 1 512 | const before = this.nextContig()?.firstCreated + 1 513 | getPushshiftComments(processPushshiftComments, threadID, newCommentCount, after, before) 514 | .then(([lastCreatedUtc, curContigLoadedAll]) => { 515 | 516 | // Update the contigs array 517 | if (curContigLoadedAll) { 518 | if (before) { 519 | this.curContig().lastCreated = before - 1 520 | this.mergeContigs() 521 | } else { 522 | this.curContig().lastCreated = lastCreatedUtc 523 | this.curContig().loadedAllComments = true 524 | } 525 | } else 526 | this.curContig().lastCreated = lastCreatedUtc 527 | if (this.stopLoading) 528 | return 529 | 530 | // Finished retrieving comments from Pushshift; wait for processing to finish 531 | this.props.global.setLoading('Comparing comments...') 532 | Promise.all(pushshiftPromises).then(lengths => { 533 | const pushshiftComments = lengths.reduce((a,b) => a+b, 0) 534 | console.log('Pushshift:', pushshiftComments, 'comments') 535 | 536 | // If Pushshift didn't find the Reddit commentHint, but should have, use Reddit's comment 537 | if (commentHint && !pushshiftCommentLookup.has(commentHint.id) && 538 | commentHint.created_utc >= this.curContig().firstCreated && ( 539 | commentHint.created_utc < this.curContig().lastCreated || curContigLoadedAll 540 | )) { 541 | this.useRedditComment(commentHint) 542 | commentHint = undefined 543 | } 544 | 545 | // All comments from Pushshift have been processed; wait for Reddit to finish 546 | while (!redditIdQueue.isEmpty()) 547 | doRedditComments(redditIdQueue.shiftChunk()) 548 | if (this.contextPromise) 549 | redditPromises.push(this.contextPromise) 550 | Promise.all(redditPromises).then(lengths => { 551 | this.contextPromise = undefined 552 | console.log('Reddit:', lengths.reduce((a,b) => a+b, 0), 'comments') 553 | 554 | if (!this.stopLoading) { 555 | const loadedAllComments = Boolean(this.curContig().loadedAllComments) 556 | if (persistent && !loadedAllComments && pushshiftComments <= newCommentCount - pushshiftChunkSize) 557 | this.getComments(newCommentCount - pushshiftComments, true, commentHint) 558 | 559 | else { 560 | console.timeEnd('Load comments') 561 | this.props.global.setSuccess() 562 | this.setState({ 563 | pushshiftCommentLookup, 564 | removed: this.state.removed, 565 | deleted: this.state.deleted, 566 | loadedAllComments, 567 | loadingComments: false, 568 | reloadingComments: false 569 | }) 570 | } 571 | } 572 | }) 573 | }) 574 | }) 575 | .catch(e => { 576 | console.timeEnd('Load comments') 577 | this.props.global.setError(e, e.helpUrl) 578 | if (this.curContig().lastCreated === undefined) { 579 | this.contigs.splice(this.curContigIdx, 1) 580 | if (this.contigs.length && this.curContigIdx >= this.contigs.length) 581 | this.setCurContig(this.contigs.length - 1) 582 | } 583 | }) 584 | } 585 | 586 | // Makes a best-effort attempt to retrieve context# ancestors of the current commentID. 587 | // Returns a Promise which resolves with the number retrieved, or rejects with undefined. 588 | // (Each code path below must setState({ context }) to avoid an infinite loop.) 589 | getContext (context) { 590 | const { params } = this.props.match 591 | const { pushshiftCommentLookup } = this.state 592 | 593 | // Check how many (if any) ancestors have already been retrieved 594 | let comment = pushshiftCommentLookup.get(params.commentID), ancestorsFound = 0 595 | if (comment) { 596 | while (true) { 597 | const parent = pushshiftCommentLookup.get(comment.parent_id) 598 | if (!parent) 599 | break 600 | if (parent.parent_id == params.threadID) { 601 | this.setState({ context }) 602 | return Promise.resolve(0) 603 | } 604 | ancestorsFound++ 605 | if (ancestorsFound >= context) { 606 | this.setState({ context }) 607 | return Promise.resolve(0) 608 | } 609 | comment = parent 610 | } 611 | } 612 | 613 | // Ask Reddit for a list of ancestors 614 | return getParentComments(params.threadID, comment?.id || params.commentID, context - ancestorsFound) 615 | .then(redditComments => { 616 | 617 | // Double-check which comments haven't yet been retrieved from Pushshift, and retreive them 618 | const ids = redditComments.map(c => c.id).filter(id => !pushshiftCommentLookup.has(id)) 619 | return getCommentsFromIds(ids) 620 | .then(pushshiftComments => { 621 | if (ids.length) 622 | console.log('Pushshift:', pushshiftComments.length, 'comments') 623 | this.setState({ context }) // Displays the retrieved context 624 | pushshiftComments.forEach(comment => pushshiftCommentLookup.set(comment.id, comment)) 625 | return this.compareAndUpdateComments(redditComments) 626 | }) 627 | }) 628 | .catch(e => { 629 | console.error(e) 630 | this.setState({ context }) 631 | }) 632 | } 633 | 634 | componentWillUnmount () { 635 | this.stopLoading = true 636 | } 637 | 638 | render () { 639 | const { subreddit, id, author } = this.state.post 640 | const { commentID } = this.props.match.params 641 | const reloadingComments = this.state.loadingComments || 642 | this.state.reloadingComments || 643 | this.props.global.state.loadingMoreComments 644 | 645 | const isSingleComment = commentID !== undefined 646 | const root = isSingleComment ? commentID : id 647 | 648 | return ( 649 | <> 650 | 651 | 656 | 662 | { 663 | (!this.state.loadingComments && root) && 664 | <> 665 | {isSingleComment && 666 |
667 |
you are viewing a single comment's thread.
668 | {this.state.reloadingComments ? 669 | view the rest of the comments → : 670 | ({ 671 | pathname: `/r/${subreddit}/comments/${id}/_/`, 672 | hash: '#comment-info', 673 | state: {scrollBehavior: 'smooth'}} 674 | )}>view the rest of the comments → 675 | } 676 | {this.state.moreContextAvail && this.state.context < 8 && <> 677 | 678 | {this.state.reloadingComments ? 679 | view more context → : 680 | ({ 681 | pathname: `/r/${subreddit}/comments/${id}/_/${commentID}/`, 682 | search: `?context=${this.state.context < 4 ? 4 : 8}`} 683 | )}>view more context → 684 | } 685 | } 686 |
687 | } 688 | this.nextMoreContextAvail = avail} 699 | setAllCommentsFiltered={filtered => this.nextAllCommentsFiltered = filtered} 700 | /> 701 | 707 | 708 | } 709 | {this.state.showModal && 710 | this.setState({showModal: false})} 712 | closeModalPermanent={() => {this.setState({showModal: false}); put(dismissModalKey, true)}} 713 | /> 714 | } 715 | 716 | ) 717 | } 718 | } 719 | 720 | export default connect(Thread) 721 | -------------------------------------------------------------------------------- /src/sass/about.sass: -------------------------------------------------------------------------------- 1 | #main-box 2 | margin: 0 auto 3 | padding: 20px 4 | border-radius: 5px 5 | color: var(--light) 6 | word-wrap: break-word 7 | max-width: 800px 8 | background-color: var(--about-bg) 9 | @media (prefers-color-scheme: light) 10 | color: var(--l-light) 11 | background-color: var(--l-about-bg) 12 | 13 | h2 14 | margin: 20px 0px 12px 15 | 16 | h2.about 17 | margin: 0 18 | color: $removed 19 | h2.todo 20 | color: $about-todo 21 | h2.contact 22 | color: $about-contact 23 | 24 | .highlighted 25 | animation: highlighted-anim 3s ease-out 26 | 27 | @keyframes highlighted-anim 28 | 0% 29 | background-color: var(--about-q) 30 | @media (prefers-color-scheme: light) 31 | @keyframes highlighted-anim 32 | 0% 33 | background-color: var(--l-about-q) 34 | 35 | .question 36 | font-size: 18px 37 | color: var(--about-q) 38 | @media (prefers-color-scheme: light) 39 | color: var(--l-about-q) 40 | 41 | ul 42 | padding-left: 30px 43 | margin: 0 44 | 45 | .bookmarklet 46 | background: $removed 47 | color: $white 48 | padding: 9px 49 | font-size: large 50 | font-weight: bold 51 | display: inline-block 52 | border-radius: 5px 53 | margin: 0 7px 54 | -------------------------------------------------------------------------------- /src/sass/colors.sass: -------------------------------------------------------------------------------- 1 | $background: #262626 2 | $scrolltrack: black 3 | $scrollthumb: #888 4 | $light: #ddd 5 | $white: white 6 | $border: #767676 7 | $border-lt: #808080 8 | $removed: #c70300 9 | $deleted: #0000ff 10 | $removed-bg: #840c09 11 | $deleted-bg: #00007d 12 | $link: #8cb3d9 13 | $author: #6a98af 14 | $dim: #828282 15 | $poster: #0055df 16 | $score: #b4b4b4 17 | $rank: #505050 18 | $odd-bg: #121212 19 | $even-bg: #161616 20 | $comment-brd: #333 21 | $tooltip-bg: #121212 22 | 23 | $diff-ins: #050 24 | $diff-del: #800 25 | $diff-mod: #770 26 | 27 | $thread-title: #a6a6a6 28 | $thread-score: #646464 29 | $thread-domain: #888 30 | $thread-flair: #c8c8c8 31 | $thread-flr-bg: #404040 32 | $thread-flr-brd: #4d4d4d 33 | $thread-brd: #666 34 | $thread-rest: #ccc 35 | $thread-rest-bg: #264d73 36 | $thread-rest-brd: #2966a3 37 | 38 | $about-bg: $even-bg 39 | $about-todo: #239f2b 40 | $about-contact: #1b767a 41 | $about-q: #add8e6 42 | 43 | $l-background: #f1f1f1 44 | $l-scrolltrack: #e7e7e7 45 | $l-scrollthumb: #eee 46 | $l-light: #111 47 | $l-white: black 48 | $l-border: #898989 49 | $l-border-lt: #7f7f7f 50 | $l-removed-bg: #ff9494 51 | $l-deleted-bg: #a3c2ff 52 | $l-link: #00e 53 | $l-author: #369 54 | $l-dim: #737373 55 | $l-score: #4b4b4b 56 | $l-rank: #afafaf 57 | $l-odd-bg: #f6f6f6 58 | $l-even-bg: white 59 | $l-comment-brd: #ccc 60 | $l-tooltip-bg: white 61 | 62 | $l-diff-ins: #afa 63 | $l-diff-del: #faa 64 | $l-diff-mod: #ff9 65 | 66 | $l-thread-title: #4d4d4d 67 | $l-thread-score: #878787 68 | $l-thread-domain: #777 69 | $l-thread-flair: black 70 | $l-thread-flr-bg: #c9c9c9 71 | $l-thread-flr-brd: #999 72 | $l-thread-brd: #999 73 | $l-thread-rest: #333 74 | $l-thread-rest-bg: #d9b28c 75 | $l-thread-rest-brd: #d6995c 76 | 77 | $l-about-bg: $l-even-bg 78 | $l-about-q: #522719 79 | 80 | 81 | :root 82 | 83 | --background: #{$background} 84 | --scrolltrack: #{$scrolltrack} 85 | --scrollthumb: #{$scrollthumb} 86 | --scrollbar: #{$scrollthumb} #{$scrolltrack} 87 | --light: #{$light} 88 | --white: #{$white} 89 | --border: #{$border} 90 | --border-lt: #{$border-lt} 91 | --deleted-bg: #{$deleted-bg} 92 | --removed-bg: #{$removed-bg} 93 | --link: #{$link} 94 | --author: #{$author} 95 | --dim: #{$dim} 96 | --score: #{$score} 97 | --rank: #{$rank} 98 | --odd-bg: #{$odd-bg} 99 | --even-bg: #{$even-bg} 100 | --comment-brd: #{$comment-brd} 101 | --tooltip-bg: #{$tooltip-bg} 102 | 103 | --diff-ins: #{$diff-ins} 104 | --diff-del: #{$diff-del} 105 | --diff-mod: #{$diff-mod} 106 | 107 | --thread-title: #{$thread-title} 108 | --thread-score: #{$thread-score} 109 | --thread-domain: #{$thread-domain} 110 | --thread-flair: #{$thread-flair} 111 | --thread-flr-bg: #{$thread-flr-bg} 112 | --thread-flr-brd: #{$thread-flr-brd} 113 | --thread-brd: #{$thread-brd} 114 | --thread-rest: #{$thread-rest} 115 | --thread-rest-bg: #{$thread-rest-bg} 116 | --thread-rest-brd: #{$thread-rest-brd} 117 | 118 | --about-bg: #{$about-bg} 119 | --about-q: #{$about-q} 120 | 121 | --l-background: #{$background} 122 | --l-scrolltrack: #{$scrolltrack} 123 | --l-scrollthumb: #{$scrollthumb} 124 | --l-scrollbar: #{$scrollthumb} #{$scrolltrack} 125 | --l-light: #{$light} 126 | --l-white: #{$white} 127 | --l-border: #{$border} 128 | --l-border-lt: #{$border-lt} 129 | --l-deleted-bg: #{$deleted-bg} 130 | --l-removed-bg: #{$removed-bg} 131 | --l-link: #{$link} 132 | --l-author: #{$author} 133 | --l-dim: #{$dim} 134 | --l-score: #{$score} 135 | --l-rank: #{$rank} 136 | --l-odd-bg: #{$odd-bg} 137 | --l-even-bg: #{$even-bg} 138 | --l-comment-brd: #{$comment-brd} 139 | --l-tooltip-bg: #{$tooltip-bg} 140 | 141 | --l-diff-ins: #{$diff-ins} 142 | --l-diff-del: #{$diff-del} 143 | --l-diff-mod: #{$diff-mod} 144 | 145 | --l-thread-title: #{$thread-title} 146 | --l-thread-score: #{$thread-score} 147 | --l-thread-domain: #{$thread-domain} 148 | --l-thread-flair: #{$thread-flair} 149 | --l-thread-flr-bg: #{$thread-flr-bg} 150 | --l-thread-flr-brd: #{$thread-flr-brd} 151 | --l-thread-brd: #{$thread-brd} 152 | --l-thread-rest: #{$thread-rest} 153 | --l-thread-rest-bg: #{$thread-rest-bg} 154 | --l-thread-rest-brd: #{$thread-rest-brd} 155 | 156 | --l-about-bg: #{$about-bg} 157 | --l-about-q: #{$about-q} 158 | 159 | 160 | [data-theme='LIGHT'] 161 | 162 | --background: #{$l-background} 163 | --scrolltrack: #{$l-scrolltrack} 164 | --scrollthumb: #{$l-scrollthumb} 165 | --scrollbar: auto 166 | --light: #{$l-light} 167 | --white: #{$l-white} 168 | --border: #{$l-border} 169 | --border-lt: #{$l-border-lt} 170 | --deleted-bg: #{$l-deleted-bg} 171 | --removed-bg: #{$l-removed-bg} 172 | --link: #{$l-link} 173 | --author: #{$l-author} 174 | --dim: #{$l-dim} 175 | --score: #{$l-score} 176 | --rank: #{$l-rank} 177 | --odd-bg: #{$l-odd-bg} 178 | --even-bg: #{$l-even-bg} 179 | --comment-brd: #{$l-comment-brd} 180 | --tooltip-bg: #{$l-tooltip-bg} 181 | 182 | --diff-ins: #{$l-diff-ins} 183 | --diff-del: #{$l-diff-del} 184 | --diff-mod: #{$l-diff-mod} 185 | 186 | --thread-title: #{$l-thread-title} 187 | --thread-score: #{$l-thread-score} 188 | --thread-domain: #{$l-thread-domain} 189 | --thread-flair: #{$l-thread-flair} 190 | --thread-flr-bg: #{$l-thread-flr-bg} 191 | --thread-flr-brd: #{$l-thread-flr-brd} 192 | --thread-brd: #{$l-thread-brd} 193 | --thread-rest: #{$l-thread-rest} 194 | --thread-rest-bg: #{$l-thread-rest-bg} 195 | --thread-rest-brd: #{$l-thread-rest-brd} 196 | 197 | --about-bg: #{$l-about-bg} 198 | --about-q: #{$l-about-q} 199 | 200 | 201 | [data-theme='LIGHT'], [data-theme='SYSTEM'] 202 | 203 | --l-background: #{$l-background} 204 | --l-scrolltrack: #{$l-scrolltrack} 205 | --l-scrollthumb: #{$l-scrolltrack} 206 | --l-scrollbar: auto 207 | --l-light: #{$l-light} 208 | --l-white: #{$l-white} 209 | --l-border: #{$l-border} 210 | --l-border-lt: #{$l-border-lt} 211 | --l-deleted-bg: #{$l-deleted-bg} 212 | --l-removed-bg: #{$l-removed-bg} 213 | --l-link: #{$l-link} 214 | --l-author: #{$l-author} 215 | --l-dim: #{$l-dim} 216 | --l-score: #{$l-score} 217 | --l-rank: #{$l-rank} 218 | --l-odd-bg: #{$l-odd-bg} 219 | --l-even-bg: #{$l-even-bg} 220 | --l-comment-brd: #{$l-comment-brd} 221 | --l-tooltip-bg: #{$l-tooltip-bg} 222 | 223 | --l-diff-ins: #{$l-diff-ins} 224 | --l-diff-del: #{$l-diff-del} 225 | --l-diff-mod: #{$l-diff-mod} 226 | 227 | --l-thread-title: #{$l-thread-title} 228 | --l-thread-score: #{$l-thread-score} 229 | --l-thread-domain: #{$l-thread-domain} 230 | --l-thread-flair: #{$l-thread-flair} 231 | --l-thread-flr-bg: #{$l-thread-flr-bg} 232 | --l-thread-flr-brd: #{$l-thread-flr-brd} 233 | --l-thread-brd: #{$l-thread-brd} 234 | --l-thread-rest: #{$l-thread-rest} 235 | --l-thread-rest-bg: #{$l-thread-rest-bg} 236 | --l-thread-rest-brd: #{$l-thread-rest-brd} 237 | 238 | --l-about-bg: #{$l-about-bg} 239 | --l-about-q: #{$l-about-q} 240 | -------------------------------------------------------------------------------- /src/sass/comment.sass: -------------------------------------------------------------------------------- 1 | .comment 2 | min-width: 240px 3 | margin: 0 0 8px 0 4 | padding: 5px 8px 5px 20px 5 | border: 1px solid var(--comment-brd) 6 | border-radius: 3px 7 | color: var(--light) 8 | font-size: 14px 9 | @media (prefers-color-scheme: light) 10 | border-color: var(--l-comment-brd) 11 | color: var(--l-light) 12 | 13 | .highlighted 14 | border: 2px solid var(--thread-rest-brd) 15 | @media (prefers-color-scheme: light) 16 | border-color: var(--l-thread-rest-brd) 17 | 18 | .comment-head 19 | font-size: 10px 20 | 21 | .comment-collapse 22 | cursor: pointer 23 | 24 | .comment-collapsed span, .comment-collapsed a:not(.comment-collapse) 25 | color: var(--dim) 26 | font-style: oblique 27 | @media (prefers-color-scheme: light) 28 | color: var(--l-dim) 29 | 30 | .comment-author 31 | font-weight: bold 32 | 33 | .comment-author:not([href]) 34 | color: var(--dim) 35 | @media (prefers-color-scheme: light) 36 | color: var(--l-dim) 37 | 38 | .comment-poster 39 | color: $light 40 | background-color: $poster 41 | padding: 0 2px 42 | border-radius: 3px 43 | 44 | .comment-score 45 | color: var(--score) 46 | font-weight: bold 47 | @media (prefers-color-scheme: light) 48 | color: var(--l-score) 49 | 50 | .comment-time 51 | color: var(--dim) 52 | @media (prefers-color-scheme: light) 53 | color: var(--l-dim) 54 | 55 | .comment-body 56 | max-width: 840px 57 | line-height: 20px 58 | 59 | p 60 | margin: 5px 0 61 | line-height: 20px 62 | 63 | a:hover 64 | text-decoration: none 65 | 66 | .comment-links 67 | margin-bottom: 6px 68 | 69 | .comment-links a 70 | color: var(--dim) 71 | font-weight: bold 72 | font-size: 10px 73 | margin-right: 4px 74 | cursor: pointer 75 | @media (prefers-color-scheme: light) 76 | color: var(--l-dim) 77 | 78 | .comment-links a.wait 79 | cursor: wait 80 | 81 | .comment-links a.wait:hover 82 | text-decoration: none 83 | 84 | .comment-odd 85 | background-color: var(--odd-bg) 86 | @media (prefers-color-scheme: light) 87 | background-color: var(--l-odd-bg) 88 | 89 | .comment-even 90 | background-color: var(--even-bg) 91 | @media (prefers-color-scheme: light) 92 | background-color: var(--l-even-bg) 93 | -------------------------------------------------------------------------------- /src/sass/common.sass: -------------------------------------------------------------------------------- 1 | html 2 | background-color: var(--background) 3 | font-family: verdana, arial, helvetica, sans-serif 4 | @media (prefers-color-scheme: light) 5 | background-color: var(--l-background) 6 | 7 | // Blink (Chromium) 8 | // 9 | ::-webkit-scrollbar 10 | background-color: var(--scrolltrack) 11 | @media (prefers-color-scheme: light) 12 | background-color: var(--l-scrolltrack) 13 | // 14 | ::-webkit-scrollbar-thumb 15 | -webkit-box-shadow: inset 0 0 8px rgba(0, 0, 0, 0.8) 16 | background-color: var(--scrollthumb) 17 | @media (prefers-color-scheme: light) 18 | background-color: var(--l-scrollthumb) 19 | // 20 | ::-webkit-scrollbar-corner 21 | -webkit-box-shadow: inset 0 0 8px rgba(0, 0, 0, 0.8) 22 | background-color: var(--scrollthumb) 23 | @media (prefers-color-scheme: light) 24 | background-color: var(--l-scrollthumb) 25 | 26 | // Gecko (Firefox) 27 | // 28 | scrollbar-color: var(--scrollbar) 29 | @media (prefers-color-scheme: light) 30 | scrollbar-color: var(--l-scrollbar) 31 | 32 | transition-property: background-color 33 | transition-timing-function: ease-out 34 | transition-duration: 0s // changed to 0.4s after page loads in src/state.js 35 | 36 | div, input 37 | transition-property: background-color, border-color 38 | transition-timing-function: ease-out 39 | transition-duration: 0.4s 40 | 41 | body 42 | margin: 0 43 | 44 | 45 | .wait 46 | cursor: wait 47 | 48 | .main 49 | margin: 8px 15px 15px 15px 50 | color: var(--white) 51 | @media (prefers-color-scheme: light) 52 | color: var(--l-white) 53 | 54 | .removed 55 | background-color: var(--removed-bg) 56 | @media (prefers-color-scheme: light) 57 | background-color: var(--l-removed-bg) 58 | 59 | .deleted 60 | background-color: var(--deleted-bg) 61 | @media (prefers-color-scheme: light) 62 | background-color: var(--l-deleted-bg) 63 | 64 | .removed-text 65 | color: $removed 66 | 67 | .deleted-text 68 | color: $deleted 69 | 70 | a 71 | color: var(--link) 72 | @media (prefers-color-scheme: light) 73 | color: var(--l-link) 74 | 75 | a:link, a:visited, a:active 76 | text-decoration: none 77 | 78 | a:hover 79 | text-decoration: underline 80 | 81 | .author 82 | color: var(--author) 83 | @media (prefers-color-scheme: light) 84 | color: var(--l-author) 85 | 86 | .author:not([href]) 87 | color: inherit 88 | text-decoration: none 89 | 90 | .nowrap 91 | display: inline-block !important 92 | 93 | .space 94 | margin-left: 5px 95 | 96 | select 97 | background: transparent 98 | border: 0 99 | color: var(--dim) 100 | @media (prefers-color-scheme: light) 101 | color: var(--l-dim) 102 | 103 | 104 | // Show tooltip on click for touch/pen screens; credit to https://stackoverflow.com/a/60660207 105 | @media (pointer: coarse), (hover: none) 106 | 107 | span[title], a[title] 108 | position: relative 109 | display: inline-flex 110 | justify-content: center 111 | 112 | &:hover::after 113 | content: attr(title) 114 | position: absolute 115 | top: 95% 116 | z-index: 1 117 | padding: 3px 118 | min-width: 132px 119 | font-weight: normal 120 | text-align: center 121 | color: var(--white) 122 | background-color: var(--tooltip-bg) 123 | border: 1px solid var(--thread-brd) 124 | border-radius: 3px 125 | @media (prefers-color-scheme: light) 126 | color: var(--l-white) 127 | background-color: var(--l-tooltip-bg) 128 | border-color: var(--l-thread-brd) 129 | -------------------------------------------------------------------------------- /src/sass/header.sass: -------------------------------------------------------------------------------- 1 | header 2 | background-color: $removed 3 | color: $white 4 | display: flex 5 | justify-content: space-between 6 | align-items: center 7 | margin: 7px 8 | padding: 7px 9 | 10 | #header 11 | 12 | h1 13 | margin: 0 0 7px 14 | text-align: center 15 | 16 | .switch-toggle 17 | margin-right: 14px 18 | float: left 19 | font-size: 14px 20 | 21 | label 22 | cursor: pointer 23 | 24 | a[href] 25 | color: $white 26 | font-size: 20px 27 | 28 | #status 29 | display: flex 30 | justify-content: space-between 31 | align-items: center 32 | 33 | #status-text, #status-helpurl 34 | margin: 0 20px 0 0 35 | text-align: center 36 | 37 | #status-helpurl 38 | color: $white 39 | font-size: 20px 40 | 41 | #status-image 42 | height: 64px 43 | width: 64px 44 | border-radius: 32px 45 | -------------------------------------------------------------------------------- /src/sass/index.sass: -------------------------------------------------------------------------------- 1 | @import colors 2 | @import common 3 | @import header 4 | @import about 5 | @import comment 6 | @import post 7 | @import thread 8 | @import subreddit 9 | @import search 10 | @import modal 11 | -------------------------------------------------------------------------------- /src/sass/modal.sass: -------------------------------------------------------------------------------- 1 | .modal 2 | display: block 3 | position: fixed 4 | z-index: 1 5 | padding-top: 100px 6 | left: 0 7 | top: 0 8 | width: 100% 9 | height: 100% 10 | background-color: rgb(0,0,0) 11 | background-color: rgba(0,0,0,0.4) 12 | 13 | .modal-content 14 | position: relative 15 | margin: auto 16 | padding: 0 17 | border: 1px solid #888 18 | width: 80% 19 | background-color: var(--background) 20 | @media (prefers-color-scheme: light) 21 | background-color: var(--l-background) 22 | box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2),0 6px 20px 0 rgba(0,0,0,0.19) 23 | -webkit-animation-name: animatetop 24 | -webkit-animation-duration: 0.4s 25 | animation-name: animatetop 26 | animation-duration: 0.4s 27 | 28 | @-webkit-keyframes animatetop 29 | 0% 30 | top:-300px 31 | opacity:0 32 | 100% 33 | top:0 34 | opacity:1 35 | 36 | @keyframes animatetop 37 | 0% 38 | top:-300px 39 | opacity:0 40 | 100% 41 | top:0 42 | opacity:1 43 | 44 | .close 45 | color: $white 46 | float: right 47 | font-size: 28px 48 | font-weight: bold 49 | 50 | .close:hover, .close:focus 51 | color: black 52 | text-decoration: none 53 | cursor: pointer 54 | 55 | .modal-header 56 | padding: 2px 16px 57 | color: $white 58 | background-color: $removed 59 | 60 | .modal-body 61 | padding: 2px 16px 16px 62 | -------------------------------------------------------------------------------- /src/sass/post.sass: -------------------------------------------------------------------------------- 1 | #comment-info 2 | margin-top: 10px 3 | font-weight: bold 4 | padding-bottom: 5px 5 | border-bottom: 1px dotted var(--border-lt) 6 | font-size: 16px 7 | @media (prefers-color-scheme: light) 8 | border-bottom-color: var(--l-border-lt) 9 | 10 | #comment-info span 11 | margin-right: 8px 12 | 13 | 14 | #comment-sort, #comment-sort input 15 | color: var(--border-lt) 16 | font-size: 12px 17 | margin: 5px 0 18 | background-color: var(--background) 19 | @media (prefers-color-scheme: light) 20 | color: var(--l-border-lt) 21 | background-color: var(--l-background) 22 | 23 | #comment-sort 24 | 25 | input 26 | border-color: var(--border) 27 | @media (prefers-color-scheme: light) 28 | border-color: var(--l-border) 29 | 30 | &[type='number'] 31 | width: 54px 32 | appearance: textfield 33 | 34 | &:hover, &:focus 35 | appearance: none 36 | 37 | input, select 38 | &:hover, &:focus 39 | color: var(--light) 40 | @media (prefers-color-scheme: light) 41 | color: var(--l-light) 42 | 43 | option 44 | color: var(--light) 45 | background-color: var(--background) 46 | @media (prefers-color-scheme: light) 47 | color: var(--l-light) 48 | background-color: var(--l-background) 49 | 50 | .attention 51 | outline: 3px solid $removed 52 | border-radius: 2px 53 | animation: attention-anim 1s steps(2, jump-none) 2 54 | 55 | @keyframes attention-anim 56 | 100% 57 | outline-style: none 58 | -------------------------------------------------------------------------------- /src/sass/search.sass: -------------------------------------------------------------------------------- 1 | //.search-box 2 | // font-size: 16px 3 | // 4 | // .search-row 5 | // padding: 10px 6px 11px 6 | // border-bottom: 1px dotted var(--thread-rest) 7 | // min-height: 26px 8 | // 9 | // .search-left 10 | // font-weight: bold 11 | // display: inline-block 12 | // width: 190px 13 | // vertical-align: middle 14 | // 15 | // input[type="text"] 16 | // font-size: 17px 17 | // width: 400px 18 | // border-radius: 2px 19 | // padding-left: 3px 20 | // 21 | // .radioButton 22 | // background: #8a8888 23 | // color: black 24 | // border-radius: 3px 25 | // display: inline-block 26 | // margin-right: 9px 27 | // transition: all 0.3s 28 | // 29 | // label 30 | // padding: 7px 10px 7px 3px 31 | // display: inline-block 32 | // 33 | // input 34 | // margin: 0 0 0 5px 35 | // height: 35px 36 | // display: inline-block 37 | // vertical-align: top 38 | // 39 | // select 40 | // padding: 3px 41 | // font-size: 15px 42 | // border-radius: 2px 43 | // 44 | // input[type="submit"] 45 | // margin: 16px auto 0px 46 | // display: block 47 | // padding: 9px 16px 48 | // font-size: 18px 49 | // background: $about-todo 50 | // border: 0 51 | // border-radius: 2px 52 | // color: $white 53 | -------------------------------------------------------------------------------- /src/sass/subreddit.sass: -------------------------------------------------------------------------------- 1 | .post-rank 2 | min-width: 20px 3 | color: var(--rank) 4 | font-size: 16px 5 | text-align: right 6 | margin: 14px 4px 0 0 7 | @media (prefers-color-scheme: light) 8 | color: var(--l-rank) 9 | 10 | //.subreddit-info 11 | // border-bottom: 1px dotted var(--border-lt) 12 | // padding: 5px 10px 13 | // color: var(--thread-rest) 14 | // font-size: 14px 15 | // margin-bottom: 5px 16 | // 17 | // select 18 | // background: var(--background) 19 | // color: var(--border-lt) 20 | // font-size: 14px 21 | // font-weight: bold 22 | // text-decoration: underline 23 | // border: 0 24 | // 25 | //#pagination 26 | // border-top: 1px dotted var(--border-lt) 27 | // padding: 5px 10px 28 | // color: var(--thread-rest) 29 | // font-size: 16px 30 | // span, a 31 | // margin: 5px 32 | // 33 | //.subreddit-box 34 | // margin-bottom: 15px 35 | // 36 | //.subreddit-title 37 | // margin-left: 5px 38 | // font-size: 22px 39 | // font-weight: bold 40 | // color: var(--white) 41 | // 42 | //.subreddit-title-link 43 | // margin-bottom: 15px 44 | // margin-left: 5px 45 | // font-size: 14px 46 | // color: var(--white) 47 | -------------------------------------------------------------------------------- /src/sass/thread.sass: -------------------------------------------------------------------------------- 1 | .thread 2 | display: flex 3 | flex-grow: 1 4 | margin-bottom: 7px 5 | border-radius: 1px 6 | padding-top: 6px 7 | 8 | .thumbnail 9 | width: 70px 10 | margin-right: 3px 11 | margin-top: -2px 12 | 13 | img 14 | border-radius: 1px 15 | 16 | .thumbnail-default 17 | background-image: url("https://www.redditstatic.com/sprite-reddit.6Om8v6KMv28.png") 18 | background-position: 0px -1099px 19 | background-repeat: no-repeat 20 | height: 50px 21 | 22 | .thumbnail-self 23 | background-image: url("https://www.redditstatic.com/sprite-reddit.6Om8v6KMv28.png") 24 | background-position: 0px -1267px 25 | background-repeat: no-repeat 26 | height: 50px 27 | 28 | .thumbnail-image 29 | background-image: url("https://www.redditstatic.com/sprite-reddit.6Om8v6KMv28.png") 30 | background-position: 0px -1043px 31 | background-repeat: no-repeat 32 | height: 50px 33 | 34 | .thumbnail-nsfw 35 | background-image: url("https://www.redditstatic.com/sprite-reddit.6Om8v6KMv28.png") 36 | background-position: 0px -1155px 37 | background-repeat: no-repeat 38 | height: 50px 39 | 40 | .thumbnail-spoiler 41 | background-image: url("https://www.redditstatic.com/sprite-reddit.6Om8v6KMv28.png") 42 | background-position: 0px -1211px 43 | background-repeat: no-repeat 44 | height: 50px 45 | 46 | .thread-score-box 47 | margin: 0 7px 48 | width: 43px 49 | 50 | .vote 51 | background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAC0AAAAcCAMAAADC4sagAAABFFBMVEUjJCQiIiIjIyMkIiIkJCQlJSUlJicmJiYnIyEnJycnKCsoKCgpLC8rIyErKyssMDUvLy8wJCAwMDAxMTEyMjI0NDQ2NjY3JR83Nzc5OTk7Ozs8PDw9PT0+Pj4/Pz9AQEBBQUFCQkJDQ0NGRkZISEhKSkpKV2tLS0tMTExOTk5PT09QYHdSUlJTU1NVVVVWVlZXV1dXaINYWFhaWlpabYlbW1tecpBgYGBhYWFid5dkZGRle5xlfJ1pgKRrhKhshKlshapuLhZwirFyjbV0j7h4lL97mcZ9MBR/nsyCo9OOMxGcNQ+eNg+kNw6sOA2vOAy0OQy7Ogq/OwrBOwrDPAnLPQjPPQfTPgfbPwXjQQTrQgPzQwLKxGgxAAAAAXRSTlMAQObYZgAAAAlwSFlzAAALEwAACxMBAJqcGAAAAVlJREFUOMu9lF1TwjAQRTcMvmeQOi1QPmxFBQTxW1ERUUFEUVRU/P//w9yGmBTFyZPnpXNmbju76W6IJM8Uw49rLa6Tz4mpq/mCqY3Gvqnj6XQ61lp0mGd8favCwx2tow8wUlpwGWOZrNJKjXO+UVc6fJcMZzV7IswSOU/qej0l0rwyq33wphhAM1kWkcy70GB7mUfUNqG9V02PyPMTMs2Wig5RaTctwzxVXyPqvJh0VkJBIKJ4huncCRAvHOEZyGKegO4a6UDrIdLGCT4C6/QDsE7fA+v0HdAadWqk0SH9D3sgXkm4uJIDYKTFnwwXd3kMrNOnwDp9BmzS5QuTshN1iDRwfkxV9VJTJXLzSWYM+NzEEjWvFE2oGvCE7/2yDeL8riWzM8xmorRazLlNI2rdgNb3ZYLF1Es/t8VE7X6/39Yqlt4tLLwhiLq3XVNLfumP24fo3Opm+wLGCVa252Y8tQAAAABJRU5ErkJggg==) 52 | background-repeat: no-repeat 53 | margin-left: auto 54 | margin-right: auto 55 | width: 15px 56 | height: 14px 57 | cursor: pointer 58 | 59 | .upvote 60 | background-position: -15px 0px 61 | margin-top: 2px 62 | 63 | .downvote 64 | background-position: -15px -14px 65 | margin-top: 2px 66 | 67 | .thread-score 68 | color: var(--thread-score) 69 | font-size: 13px 70 | font-weight: bold 71 | text-align: center 72 | @media (prefers-color-scheme: light) 73 | color: var(--l-thread-score) 74 | 75 | .link-flair 76 | display: inline-block 77 | color: var(--thread-flair) 78 | background-color: var(--thread-flr-bg) 79 | margin-right: 5px 80 | border: 1px solid var(--thread-flr-brd) 81 | border-radius: 2px 82 | padding: 0 2px 83 | font-size: 10px 84 | @media (prefers-color-scheme: light) 85 | color: var(--l-thread-flair) 86 | background-color: var(--l-thread-flr-bg) 87 | border-color: var(--l-thread-flr-brd) 88 | 89 | .thread-title 90 | color: var(--thread-title) 91 | margin-right: 5px 92 | @media (prefers-color-scheme: light) 93 | color: var(--l-thread-title) 94 | 95 | .thread-title:hover 96 | text-decoration: none 97 | 98 | .domain 99 | color: var(--thread-domain) 100 | font-size: 10px 101 | @media (prefers-color-scheme: light) 102 | color: var(--l-thread-domain) 103 | 104 | .thread-image 105 | max-width: 768px 106 | max-height: 768px 107 | 108 | .thread-info 109 | color: var(--dim) 110 | font-size: 10px 111 | margin-top: 2px 112 | @media (prefers-color-scheme: light) 113 | color: var(--l-dim) 114 | 115 | 116 | .thread-content 117 | margin: 0 7px 118 | 119 | .thread-selftext 120 | border: 1px solid var(--thread-brd) 121 | border-radius: 7px 122 | margin: 5px 0 7px 123 | padding: 5px 10px 124 | max-width: 840px 125 | color: var(--light) 126 | font-size: 14px 127 | @media (prefers-color-scheme: light) 128 | border-color: var(--l-thread-brd) 129 | color: var(--l-light) 130 | 131 | p 132 | margin: 5px 0 133 | line-height: 20px 134 | 135 | a:hover 136 | text-decoration: none 137 | 138 | p:first-child 139 | margin-top: 0px 140 | 141 | p:last-child 142 | margin-bottom: 0px 143 | 144 | .total-comments 145 | font-size: 10px 146 | font-weight: bold 147 | margin-top: 4px 148 | padding-bottom: 7px 149 | 150 | a, span 151 | color: var(--dim) 152 | margin-right: 4px 153 | @media (prefers-color-scheme: light) 154 | color: var(--l-dim) 155 | 156 | a 157 | cursor: pointer 158 | 159 | 160 | .thread-selftext, .comment 161 | 162 | ins.diffins, ins.diffmod 163 | text-decoration: none 164 | background-color: var(--diff-ins) 165 | @media (prefers-color-scheme: light) 166 | background-color: var(--l-diff-ins) 167 | 168 | ins.mod 169 | text-decoration: none 170 | background-color: var(--diff-mod) 171 | @media (prefers-color-scheme: light) 172 | background-color: var(--l-diff-mod) 173 | 174 | del.diffdel, del.diffmod 175 | background-color: var(--diff-del) 176 | @media (prefers-color-scheme: light) 177 | background-color: var(--l-diff-del) 178 | 179 | 180 | .view-rest-of-comment 181 | background-color: var(--thread-rest-bg) 182 | border-color: var(--thread-rest-brd) 183 | font-size: 13px 184 | padding: 10px 185 | color: var(--thread-rest) 186 | margin-bottom: 10px 187 | @media (prefers-color-scheme: light) 188 | background-color: var(--l-thread-rest-bg) 189 | border-color: var(--l-thread-rest-brd) 190 | color: var(--l-thread-rest) 191 | 192 | .faux-link 193 | color: var(--link) 194 | @media (prefers-color-scheme: light) 195 | color: var(--l-link) 196 | 197 | 198 | .load-more 199 | font-weight: bold 200 | font-size: 10px 201 | 202 | a, span 203 | margin-left: 16px 204 | 205 | a 206 | cursor: pointer 207 | 208 | .fade 209 | animation: fade-anim 3s 5s ease-in-out forwards 210 | 211 | @keyframes fade-anim 212 | 100% 213 | color: var(--background) 214 | @media (prefers-color-scheme: light) 215 | @keyframes fade-anim 216 | 100% 217 | color: var(--l-background) 218 | -------------------------------------------------------------------------------- /src/state.js: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | import { Subscribe, Container } from 'unstated' 3 | import { get, put } from './utils' 4 | import { chunkSize } from './api/pushshift' 5 | 6 | // Sort types for comments 7 | export const sort = { 8 | top: 'SORT_TOP', 9 | bottom: 'SORT_BOTTOM', 10 | new: 'SORT_NEW', 11 | old: 'SORT_OLD' 12 | } 13 | 14 | // Filter types for comments 15 | export const filter = { 16 | all: 'SHOW_ALL', 17 | removedDeleted: 'SHOW_REMOVED_DELETED', 18 | removed: 'SHOW_REMOVED', 19 | deleted: 'SHOW_DELETED' 20 | } 21 | 22 | // Light/Dark mode themes 23 | export const theme = { 24 | dark: 'DARK', 25 | light: 'LIGHT', 26 | system: 'SYSTEM' 27 | } 28 | 29 | export const maxCommentsDefault = chunkSize * 4 30 | export const minCommentsLimit = chunkSize 31 | export const maxCommentsLimit = 20000 32 | 33 | // Constrains input to between minCommentsLimit and maxCommentsLimit 34 | export const constrainMaxComments = maxComments => { 35 | maxComments = Math.min(Math.round(maxComments), maxCommentsLimit) 36 | if (!(maxComments >= minCommentsLimit)) // also true when maxComments isn't a number 37 | maxComments = minCommentsLimit 38 | return maxComments 39 | } 40 | 41 | // Keys for localStorage 42 | const sortKey = 'commentSort' 43 | const filterKey = 'commentFilter' 44 | const maxCommentsKey = 'maxComments' 45 | const themeKey = 'theme' 46 | 47 | document.documentElement.dataset.theme = get(themeKey, theme.dark) 48 | setTimeout(() => document.documentElement.style.transitionDuration = '0.4s') 49 | 50 | class GlobalState extends Container { 51 | state = { 52 | commentSort: get(sortKey, sort.top), 53 | commentFilter: get(filterKey, filter.removedDeleted), 54 | loadingMoreComments: 0, // max # of comments to attempt to load next 55 | statusText: '', 56 | statusHelpUrl: undefined, 57 | statusImage: undefined 58 | } 59 | 60 | // Preferred max # of comments to get during (re-)loads 61 | maxComments = get(maxCommentsKey, maxCommentsDefault) 62 | 63 | curTheme = document.documentElement.dataset.theme 64 | 65 | setCommentSort (sortType) { 66 | put(sortKey, sortType) 67 | this.setState({commentSort: sortType}) 68 | } 69 | 70 | setCommentFilter (filterType) { 71 | put(filterKey, filterType) 72 | this.setState({commentFilter: filterType}) 73 | } 74 | 75 | // Contrains, saves, and returns it (does not load more comments) 76 | setMaxComments (maxComments) { 77 | this.maxComments = constrainMaxComments(maxComments) 78 | put(maxCommentsKey, this.maxComments) 79 | return this.maxComments 80 | } 81 | 82 | // Loads more comments 83 | loadMoreComments = loadingMoreComments => this.setState({loadingMoreComments}) 84 | 85 | setTheme (newTheme) { 86 | put(themeKey, newTheme) 87 | this.curTheme = newTheme 88 | document.documentElement.dataset.theme = newTheme 89 | } 90 | 91 | setSuccess = () => { 92 | this.setState({statusText: '', statusHelpUrl: undefined, statusImage: '/images/success.png'}) 93 | document.body.classList.remove('wait') 94 | } 95 | setLoading = text => { 96 | this.setState({statusText: text, statusImage: '/images/loading.gif'}) 97 | document.body.classList.add('wait') 98 | } 99 | setError = (error, helpUrl = undefined) => { 100 | this.setState({statusText: error.message, statusImage: '/images/error.png'}) 101 | if (helpUrl) 102 | this.setState({statusHelpUrl: helpUrl}) 103 | document.body.classList.remove('wait') 104 | } 105 | clearStatus = () => { 106 | this.setState({statusText: '', statusHelpUrl: undefined, statusImage: undefined}) 107 | document.body.classList.remove('wait') 108 | } 109 | 110 | isErrored = () => this.state.statusImage?.endsWith('error.png') 111 | } 112 | 113 | // A redux-like connect function for Unstated 114 | export const connect = Component => { 115 | return function Connected(props) { 116 | return 117 | {globalState => } 118 | 119 | } 120 | } 121 | -------------------------------------------------------------------------------- /src/utils.js: -------------------------------------------------------------------------------- 1 | import SnuOwnd from 'snuownd' 2 | 3 | const markdown = SnuOwnd.getParser() 4 | 5 | // Fetches JSON at the given url or throws a descriptive Error 6 | export const fetchJson = (url, init = {}) => fetchJsonAndHeaders(url, init) 7 | .then(response => response.json) 8 | 9 | // Fetches JSON, returning an object with a .json and a .headers member 10 | export const fetchJsonAndHeaders = (url, init = {}) => 11 | window.fetch(url, init) 12 | .then(response => response.ok ? 13 | { 14 | json: response.json() 15 | .catch(error => { 16 | throw new Error((response.statusText || response.status) + ', ' + error) 17 | }), 18 | headers: response.headers 19 | } : 20 | response.text() 21 | .catch(error => { 22 | throw new Error((response.statusText || response.status) + ', ' + error) 23 | }).then(text => { 24 | throw new Error((response.statusText || response.status) + ': ' + text) 25 | }) 26 | ) 27 | 28 | export const sleep = ms => 29 | new Promise(slept => setTimeout(slept, ms)) 30 | 31 | // Reddits way of indicating that something is deleted (the '\\' is for Reddit and the other is for pushshift) 32 | export const isDeleted = textBody => textBody === '\\[deleted\\]' || textBody === '[deleted]' 33 | 34 | // Reddits way of indicating that something is deleted 35 | export const isRemoved = textBody => textBody === '\\[removed\\]' || textBody === '[removed]' || textBody === '[ Removed by Reddit ]' 36 | 37 | // Default thumbnails for reddit threads 38 | export const redditThumbnails = ['self', 'default', 'image', 'nsfw', 'spoiler'] 39 | 40 | // Parse comments (see https://www.reddit.com/dev/api/#response_body_encoding) 41 | export const parse = text => markdown.render(text.replaceAll('<', '<').replaceAll('>', '>').replaceAll('&', '&')) 42 | 43 | // UTC to "Reddit time format" (e.g. 5 hours ago, just now, etc...) 44 | export const prettyDate = createdUTC => { 45 | const currentUTC = Math.floor((new Date()).getTime() / 1000) 46 | 47 | const secondDiff = currentUTC - createdUTC 48 | if (secondDiff < 86400) { 49 | if (secondDiff < 10) return 'just now' 50 | if (secondDiff < 60) return `${secondDiff} seconds ago` 51 | if (secondDiff < 120) return 'a minute ago' 52 | if (secondDiff < 3600) return `${Math.floor(secondDiff / 60)} minutes ago` 53 | if (secondDiff < 7200) return 'an hour ago' 54 | return `${Math.floor(secondDiff / 3600)} hours ago` 55 | } 56 | 57 | const dayDiff = Math.floor(secondDiff / 86400) 58 | if (dayDiff < 2) return '1 day ago' 59 | if (dayDiff < 7) return `${dayDiff} days ago` 60 | if (dayDiff < 14) return '1 week ago' 61 | if (dayDiff < 31) return `${Math.floor(dayDiff / 7)} weeks ago` 62 | if (dayDiff < 60) return '1 month ago' 63 | if (dayDiff < 365) return `${Math.floor(dayDiff / 30)} months ago` 64 | if (dayDiff < 730) return '1 year ago' 65 | return `${Math.floor(dayDiff / 365)} years ago` 66 | } 67 | 68 | // The date and time, to the second, formatted in the user's locale 69 | export const exactDateTime = utc => { 70 | const datetime = new Date(utc * 1000) 71 | if (new Date().toDateString() == datetime.toDateString()) 72 | return datetime.toLocaleTimeString([], {timeStyle: 'long'}) 73 | else 74 | return datetime.toLocaleString([], {dateStyle: 'medium', timeStyle: 'long'}) 75 | } 76 | 77 | // Time difference in seconds to text, rounded up by default (e.g. x seconds/minutes/hours) 78 | export const prettyTimeDiff = (secondDiff, roundDown = false) => { 79 | if (secondDiff < 2) return `1 second` 80 | if (secondDiff < 120) return `${secondDiff} seconds` 81 | const round = roundDown ? Math.floor : Math.ceil 82 | if (secondDiff < 7200) return `${round(secondDiff / 60)} minutes` 83 | if (secondDiff < 172800) return `${round(secondDiff / 3600)} hours` 84 | const days = round(secondDiff / 86400) 85 | if (days < 10 && roundDown) return `${days} days, ${round((secondDiff - days*86400) / 3600)} hours` 86 | return `${days} days` 87 | } 88 | 89 | // Reddit format for scores, e.g. 12000 => 12k 90 | export const prettyScore = score => { 91 | if (score >= 100000) { 92 | return `${(score / 1000).toFixed(0)}k` 93 | } else if (score >= 10000) { 94 | return `${(score / 1000).toFixed(1)}k` 95 | } 96 | 97 | return score 98 | } 99 | 100 | // Retrieve, store and delete stuff in the local storage 101 | export const get = (key, defaultValue) => { 102 | const value = window.localStorage.getItem(key) 103 | return value !== null ? JSON.parse(value) : defaultValue 104 | } 105 | 106 | export const put = (key, value) => window.localStorage.setItem(key, JSON.stringify(value)) 107 | 108 | // Sorting for comments 109 | export const topSort = (commentA, commentB) => commentB.score - commentA.score 110 | export const bottomSort = (commentA, commentB) => commentA.score - commentB.score 111 | export const newSort = (commentA, commentB) => commentB.created_utc - commentA.created_utc 112 | export const oldSort = (commentA, commentB) => commentA.created_utc - commentB.created_utc 113 | 114 | // Filter comments 115 | export const showRemoved = comment => comment.removed === true 116 | export const showDeleted = comment => comment.deleted === true 117 | export const showRemovedAndDeleted = comment => comment.removed === true || comment.deleted === true 118 | 119 | // Edited text display modes 120 | export const editedModes = { 121 | dfault: 0, // diff mode if it's been edited, otherwise same as orig 122 | orig: 1, 123 | edited: 2, 124 | length: 3 125 | } 126 | export const editedTitles = [ 127 | 'Edits are highlighted; click to change', 128 | 'The first archived edit is shown; click to change', 129 | 'The most recent edit is shown; click to change' 130 | ] 131 | -------------------------------------------------------------------------------- /webpack.config.js: -------------------------------------------------------------------------------- 1 | const path = require('path') 2 | 3 | module.exports = (env, argv) => ({ 4 | entry: [ 5 | 'whatwg-fetch', 6 | './src/index.js' 7 | ], 8 | devServer: { 9 | static: path.resolve(__dirname, 'dist'), 10 | historyApiFallback: true 11 | }, 12 | devtool: argv.mode !== 'production' ? 'eval-cheap-module-source-map' : false, 13 | module: { 14 | rules: [ 15 | { 16 | test: /\.js$/, 17 | exclude: /node_modules/, 18 | use: 'babel-loader' 19 | } 20 | ] 21 | } 22 | }) 23 | --------------------------------------------------------------------------------